1 CSS三大特性
1.1 优先级
特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意点:
- !important写在属性值的后面，分号的前面!
- !important不能提升继承的优先级，只要是继承优先级最低!
- 实际开发中不建议使用!important。
1.2 权重叠加计算
场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式:(每一级之间不存在进位)
比较规则:
1.先比较第一级数字，如果比较出来了，之后的统统不看
2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3…
4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!)注意点: !important如果不是继承，则权重最高，天下第一!
2 盒子模型
2.1 介绍
1.盒子的概念
页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染（显示)网页时，会将网页中的元素看做是一个个的矩形区域，也形象的称之为盒子
2.盒子模型
CSS中规定每个盒子分别由:内容区域（content) 、内边距区域(padding)、边框区域(border)、外边距区域（margin）构成，这就是盒子模型
2.2 内容区域的宽度和高度
作用:利用width 和height属性默认设置是盒子内容区域的大小
属性:width / height
常见取值:数字+px
2.3 边框（border）
属性名: border
属性值:单个取值的连写，取值之间以
空格隔开
如: border : 10px solid red;
快捷键: bd + tab
solid：实线 dashed：虚线 dotted：点线
会撑大 盒子的尺寸
场景:只给盒子的某个方向单独设置边框
属性名: border-方位名词
属性值:连写的取值
2.4 内边距（padding）
padding属性可以当做复合属性使用，表示单独设置某个方向的内边距，最多取4个值，从上开始顺时针转一圈，如果数不够，看对面
四个值：顺时针分布
三个值：上 左右 下
两个值：上下 左右
根据文字长度撑开盒子宽度
2.5 外边距（margin）
与padding一致
2.6 自动內减
内减模式
box-sizing:border-box;
2.7 清除默认的内外边距
*{
padding:0;
margin:0;
}
2.8 版心居中
版心：网页的有效内容
magrin: 0 auto:
2.9 外边距折叠现象
2.9.1 合并
场景：垂直布局的块级元素上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:只给其中一个盒子设置margin即可
2.9.2 塌陷
场景：互相嵌套的块级元素，子元素的margin-top 会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
1.给父元素设置border-top 或者padding-top(分隔父子元素的margin-top)
2.给父元素设置overflow: hidden
3.转换成行内块元素
4.设置浮动