1.图片精灵（雪碧图）
(1)Link标签：引入外部文件
<link rel="stylesheet" href="sprite.css">
(2)用到图片精灵的时候如何设置背景大图的尺寸？
不用看大图的原有尺寸，先看纵向和横向有多少小图，然后分别用个数*元素对应轴的尺寸。
(3)图片精灵的定义：将很多张小图整合成一张大图片，然后通过css样式在页面中显示出来某个小图片，这种技术叫图片精灵。
(4)图片精灵的好处：1.减少页面的请求次数，2.提高页面的加载速度。
2.元素盒模型
(1)一个html元素，从里到外分为4个部分，内容盒(content)，内间距(padding)，边框(border)，外间距(margin)。
(2)默认情况下，给元素设置的宽高，是内容盒的宽高，不包含边框与内间距。
(3)设置盒模型，默认是内容盒content-box。
box-sizing: content-box；
(4)Border-box是边框盒。
box-sizing: border-box;
(5)计算宽高时：
按照内容去结算的是内容盒；
内容+内边距+边框=是边框盒。
3.外边距重叠的条件
(1)必须是块元素，
(2)必须是向下的外边距，
(3)没有边框
4.浮动布局
(1)float，设置元素使用浮动布局，浮动有左浮动和右浮动。元素在使用浮动后，会脱离原有的文档流，在浮动文档流中，块元素是横向排列。
(2)注意：在最后一个浮动元素结束的地方必须清除浮动。方法：
- 在最后一个浮动元素后面添加一个元素，
clear：both
- 浮动的元素，都会有一个共同的父元素，可以为这个父元素添加一个后缀伪元素 ，在后缀中清除浮动。
.clear-fix:after{
content: "";
display: block;
clear: both;
}
- 使用after和bifore双类伪元素清除浮动
5.样式的优先级
(1)Id选择器>class选择器>标签选择器。
(2)Id选择器==100，class选择器==10；标签选择器==1；当不同的选择器连用时，优先级会增加。
(3)当两个选择器优先级一样时，会选择靠后的选择器样式，（！Important 样式等级==10000）。
6.元素的隐藏
(1)Rgba：颜色三基色(red,green,blue)，a代表透明度，默认是1,0是透明。值的范围是0.0—1.0。
(2)Display:none，隐藏元素，在文档流中没有位置，
(3)Visibility:hidden，隐藏元素，在文档流中有位置。
7.弹性布局
(1)开启弹性布局：Display:flex;
(2)设置主轴的对其方式
flex-direction: row;
row默认的：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
(3)设置项目(子元素)在容器(父元素)中主轴方向的占比。
flex-basis: 15%;值是百分比
(4)更改项目在容器中的排列顺序，数字越大越靠后。
order: 3;值默认是0
(5)项目在主轴的对齐方式(项目的排列方向)
justify-content:space-around;
flex-start（默认值）：左对齐。
flex-end：右对齐。
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
(6)项目在交叉轴的对齐方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
(7)当容器变大的时候，项目也会随之变大。默认值是0不参与分配。
flex-grow: 1;
(8)当空间不够的情况压缩每个项目的比例
flex-shrink: 2;
(9)Flew-wrap：折行属性，规定项目如何换行。默认是不换。
flex-wrap: wrap;
(10)Flex总结
flex-direction:属性决定主轴的方向
flex-wrap：换行的方式
flex-flow:上述两种的简写
justify-content:项目在主轴上的对齐方式
align-items：交叉轴的对齐方式
align-content:属性定义了多根轴线的对齐方式。
如果项目只有一根轴线，该属性不起作用。
8.2d变形
(1)transform变形样式:
①translate移动
②rotate旋转
③scale缩放deg°
transform: rotate(30deg);
(2)设置变形的原点，默认是中心点50%，50%。
transform-origin: 100% 100%;
(3)平移变形：两个参数分别代表横向偏移量和纵向偏移量
transform: translate(50px,30px);
(4)缩放变形:两个参数分别代表横向缩放比和纵向缩放比
transform: scale(0.5,3.5);
9.3d变形
(1)属性定义了3d元素距离视图的间距，单位是像素。
perspective: 1000px;
10.css动画
- Css过渡动画：transition;
- Css关键帧动画：animation:ani1 3s linear infinite;