CSS三大特性与盒子模型

CSS三大特性

（1）CSS层叠性

1. 样式冲突，遵循的原则是就近原则。

（2）CSS继承性

1.子承父业

（3）CSS优先级

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

2. 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

3. 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

4.CSS定义了一个!important命令

 

（2）CSS特殊性

1. 数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

2. 继承的权重是0

 

总结优先级：

使用了!important声明的规则。

内嵌在HTML元素的style属性里面的声明。

使用了ID选择器的规则。

使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

使用了元素选择器的规则。

只包含一个通用选择器的规则。 

同一类选择器则遵循就近原则。

 

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

 

看透网页布局的本质：

把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

4.盒子模型之边框

语法：border : border-width || border-style || border-color

border-style

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

 

border-collapse:collapse; 表示相邻边框合并在一起。

 

盒子模型之内边距

padding属性用于设置内边距。是指边框与内容之间的距离。

 

怪异盒模型：padding向内收缩

box-sizing：border-box；