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的干预下，块级元素独占一行，宽高可设，行内元素并排显示，宽高自动。