CSS三大特性：层叠性继承性优先级 盒子模型：content padding border margin

CSS三大特性

层叠性
作用：选择器相同时，给相同的样式设置相同的属性（不同属性值）时，解决样式冲突问题。

1. 遵循“就近原则”，哪个样式离结构近，就显示哪个。
2. 不冲突的样式，不会重叠
   注：使用浏览器检查时，如果某样式被划线掉，但无黄色叹号，表示该样式被层叠掉了。

继承性
作用：“子承父业”，子元素会继承父元素的某些样式，如文字相关样式。
行高的继承：
给父元素定义属性font: 12px/1.5 'Microsoft YaHei' 注：行高不加单位px
子元素定义属性：font: 12px 则：子元素继承的行高为12px*1.5=18px
优先级
作用：多个选择器样式相同时，判断执行哪一个
元素的权重如下：
继承或*：0,0,0,0
标签选择器：0,0,0,1
类选择器、伪类选择器：0,0,1,0
ID选择器：0,1,0,0
行内样式style=“样式属性”：1,0,0,0
!important:∞无穷大
应注意：

1. 权重是4组数字组成，永远不会进位
2. 等级从左向右判断
3. 继承的权重是0
4. 若本标签被单独选出来，则执行自己的样式

注：复合选择器要考虑权重的叠加问题，对应位置相加即可，注意不可进位。

盒子模型

盒子模型的组成：实际内容，内边距，边框，外边距
border -边框
属性写法：

/* 边框宽度 */
border-width: 10px;
/* 边框样式 solid实线 dashed虚线 dotted点线 */
border-style: solid;
/* 边框颜色 */
border-color: blue;

边框的复合写法：border: 10px solid red;
应注意：盒子加边框会改变盒子大小，可把盒子宽高减去一部分
盒子大小=定义的宽高+边框+内边距
padding-内边距
作用：设置内容与盒子边框的距离
注：padding也会改变盒子的大小
复合属性的四种写法：

/* 上下左右都5像素的内边距 */
padding: 5px;
/* 上下5像素，左右10像素 */
padding: 5px 10px;
/* 上5像素，左右10像素，下20像素 */
padding: 5px 10px 20px;
/* 上5像素，右10像素，下20像素，坐30像素 */
padding: 5px 10px 20px 30px;
/* 即：遵循上右下左的顺序 */

margin-外边距
作用：控制盒子与盒子之间的距离
也有四种写法，与padding一致
使块级元素水平居中的方式：1给块级元素定义宽高2设置margin: auto属性即可
外边距的合并和塌陷问题
相邻元素外边距垂直合并：效果是取两值中较大者，解决：只设置一个就行，避开此情况
嵌套元素外边距垂直塌陷：效果是父子元素如都设置了外边距，则父元素会塌陷为较大的外边距值，且子元素并未与父元素有间距。解决：1为父元素定义边框色透明2为父元素定义内边距，而不是设置子元素3为父元素添加overflow: hidden;
注：清除所有内外边距方法

* {
    margin: 0;
    padding: 0;
}