1.精灵图的应用
精灵图:
目的: 降低浏览器与服务器的通信成本,提高页面的加载速度
方法: 将多张小图,做成一张大图
技能: 背景图片与背景图片的位移
/* 本质上使用的就是背景图片的位移,显示图片的不同位置 */
2.层叠性的特点
层叠性: 当有相同选择器(权重相同),作用在同一元素身上,发生属性冲突,后面的属性会覆盖前面的属性（后来者居上）
- 概念：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
* 选择器相同，则执行层叠性
* 选择器不同，就会出现优先级的问题。
3.继承性的特点
继承性: 存在父子关系的盒子,子元素会继承父元素部分属性
注意！特殊的两个标签：
1.a标签不继承颜色
2.h系列不继承字体大小
4.优先级的顺序
继承性 < 通配符 < 标签选择器 < 类选择器 < id选择器 < 行内式 < !important
注意：!important对继承本身是没有作用的
5.权重的计算
/* 权重的计算 */
/* 1.先确定选择器是否直接作用到目标元素---排除继承 */
/* 2.再看看有没有行内式以及!important,那么他们权重最高 */
/* 3.开始数数 */
/* 4.先数id,谁的id数最多,那么权重最高 */
/* 5.如果id相同,再数类,类的数量最多的,那么权重最高 */
/* 6.如果类相同,最后数标签,标签数量最多的,那么权重最高 */
/* 7.权重相同时,考虑层叠性,后来者居上 */
/* 在项目中写代码的时候,尽量让自己的选择器权重高一点 */
6.盒子的边框
6.1、边框颜色：border-color:blue;
6.2、边框宽度：border-width:1px;
6.3、边框的样式：border-style:none（默认值）、solid（实线）、double（双实线）、dashed（虚线）、dotted（点线）
6.4、边框的连写border: 2px solid red;
6.5、单条边框border-right: 5px solid blue;（边框是有方向:left top right bottom）
6.6、圆角边框 border-radius：20px；
7.体验内边距
内边距: 内容到边框的距离----四个方向
8.体验外边距
外边距：控制盒子与盒子之间的距离
9.垂直塌陷
垂直塌陷: 当垂直排布的盒子,添加相对应的margin,距离不是相加,而是取最大值
解决办法：尽量给只给一个盒子添加margin值,避免就好
10.包含塌陷
包含塌陷: 存在父子关系的盒子,给子盒子添加margin-top,有可能会把父元素一起带跑
解决办法：
1、给父盒子添加上边框
2、给父盒子加上内边距
3、给父盒子设置overflow：hidden；
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题
