CSS:层叠,继承,盒模型,定位体系,常规流
1.层叠
规则之间属性相同,值不同的时候就会发生声明冲突,这个时候层叠就会起作用了,层叠会将我们声明的不同的值进行保留,相同的值进行比较,选权重值更高的一个来运行。具体情境如下:假设我们定义了一个div标签,再定义其宽高,并赋予它一个类名为div,然后我们通过CSS文件对他的样式进行更改,用元素选择器指定它的背景颜色为红色,再用类选择器指定它的背景颜色为蓝色,这个时候就发生了前面提到的声明冲突,运行结果我们会发现div的背景颜色变成了蓝色,而决定div最终变为蓝色背景的就是层叠。那么层叠是根据什么来决定要在执行哪一个声明的呢?一、比较优先级。声明分为普通声明和重要声明,例:color:red;是一个普通声明,color:red !important;是一个重要声明,在发生声明冲突时,层叠会执行重要声明。二、比较特殊性。所谓特殊性,就要引入一个概念,那就是权重值,内联样式(即内嵌在元素标签内部的样式,如<a style:color:red></a>)的权重值为(1,0,0,0),id选择器的权重值为(0,1,0,0),类选择器的权重值为(0,0,1,0),元素选择器的权重值为(0,0,0,1),通配符的权重值为0,重要声明的权重值最高,层叠会根据声明的权重值,执行权重值大的声明。PS:权重值:重要声明>内联样式>id选择器>类选择器>元素选择器>通配符
2.继承
所谓继承,就是子元素会自动拥有父元素的某些CSS属性,文本类的属性会被继承,例如:假设某个p标签是某个span标签的父元素,当我们定义p标签字体颜色为红色,字体大小为14后,span里的文字内容字体颜色也是红色,字体大小也是14。
3.盒模型
每个元素都会在页面中生成一个矩形区域,CSS将这个矩形区域称为盒子,也就是盒模型。盒模型由四个部分组成:一、content,即内容。二、padding,即内边距。三、border,即边框。四、margin,即外边距。我们可以想象一个快递盒子,content就是我们买的东西,padding就是快递员塞进去的泡泡纸,塞的越多,箱子就会越大,border就是快递外包装,margin就是一个快递盒子和另外一个快递盒子之间的距离。
4.元素的定位体系
元素在页面的定位体系有三种:常规流,浮动Float,绝对定位
常规流即文档流。浮动Float可以让元素向上向左或向上向右浮动,但会让页面结构脱离文档流。绝对定位也会让页面结构脱离文档流。
5.常规流
在没有CSS的干预下,块级元素独占一行,宽高可设,行内元素并排显示,宽高自动。