1、css中背景属性有哪些?各自的作用是什么? 2、盒子有哪些元素构成?各自有哪些属性,作用是什么

html-css09

1、css中背景属性有哪些?各自的作用是什么? 2、盒子有哪些元素构成?各自有哪些属性,作用是什么,第1张

好多问题。一个一个来吧

1、css背景属性总的说来就一个。 background

其他的 backgroud-image , background-color, background-repeat等等都是它的分之。

用css控制背景,一个background就够了。比如:

background:#f00 url(图片地址) no-repeat

背景色为红色,有图片,图片不重复。如果分开写的话就要写3个属性,很不简洁。

2、盒子模型,其实就是把html的标签比喻成box(盒子)。盒子干嘛的?当然就是装东西的啦。

盒子属性有:

width height,宽高。px为单位。可以理解为内容区域。

padding 内边距。是内容距离盒子边缘的距离。

border边框。就是盒子的“墙壁”

margin 外边距。盒子与周围的其他盒子的距离。

另外,css3多了个圆角。 border-radius 也可以算是盒子模型中的编外分子。

特别强调盒子模型属性都要占位。比如:

#mydiv{

width:200px

height:100px

padding:10px

border:5px #000 solid

margin:30px

}

id为mydiv的标签 内容宽200px,但是它实际要站的宽度是 200+10*2+5*2+30*2=290px

3、浮动,就是给标签添加 float:left/right; 就行了。

浮动的作用就一个,让原本上下排列的结构,变成水平排列。

java不了解,就不回答了。

例子来自colorui及网上一些资源,不定时更新

例子都只取一个,其他的css样式都是类同的

多类选择器例子:

网上看见一个荧光效果,觉得蛮好看就扒过来分析了一下 https://www.jianshu.com/p/c501fee6fb68

荧光效果主要是:before和:after伪元素起的作用,先将其注释起来,看下原本的效果:

可以看见并没有荧光效果。

这个是给2个伪元素添加一个线性渲染的背景

有了上面蒙层的介绍,这个效果就是整体向外拉伸了2px。 z-index: -1 确保在box的黑色背景底下。注释了黑色背景来看下.box:before的效果:

和before一样,就是多了个高斯模糊,注释了黑色背景来看下.box:after的效果:

所以将3层叠加起来就有了荧光和边框效果。