原理

浮动原理和清除浮动

原理：脱离文档流，浮动元素碰到包含它的边框或者浮动元素的边框停留

清除：

• 末位加 div & clear: both
• 子元素::after + clear: both + 父元素 *zoom: 1
• 父元素触发 BFC

引入样式的方式和优先级

就近原则：内联 style > head <style> > link href > @import url()

雪碧图原理

将一堆小图标放入一张图中，然后利用 width height background-image ackground-position 进行定位显示

.bg-1_bg2019032502 {
    width: 564px; height: 372px;
    background: url('css_sprites.png') -530px -10px;
}

优点：

• 减少 HTTP 请求数，极⼤地提⾼⻚⾯加载速度
• 增加图⽚信息重复度，提⾼压缩⽐，减少图⽚⼤⼩更换⻛格⽅便，只需在⼀张或⼏张图⽚上修改颜⾊或样式即可实现

缺点：

• 图⽚合并麻烦
• 维护麻烦，修改⼀个图⽚可能需要从新布局整个图⽚，样式

图片使用 base64 的优缺点

一般移动端的大的背景图会用base64，而且图片体积比较大的时候才会用base64；

用base64编码会大大缩小图片的体积；

优点：能够减小大图片的尺寸，同时还能够减少HTTP请求数量；HTTP请求是非常耗费服务器资源的；

缺点：如果图片比较小，那么base64编码后的字符串会比图片本身还大，只有图片大到几百K的时候，且需要消耗 CPU 进⾏编解码。