2021-前端高频面试题整理-CSS篇（持续更新）

整理的同时自己也复习一下，答案仅供参考。

清除浮动的几种方式

1.给父元素设置高度

要求浮动元素有确切的高度

2.父级div定义overflow:hidden

这种方法是通过触发BFC达到清除浮动的目的

参考：BFC的触发方式及作用

3.利用clear：both

在父元素的最底下 添加一个块级标签（p,div等），然后给它添加clear：both 来清除浮动。如果页面浮动布局多，就要增加很多空标签。

4.父级使用伪元素::after（推荐）

.clear-float::after {
     
    display: block;
    content: "";
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear-float {
     
    zoom: 1; /*解决IE兼容*/
}

---

解释css sprites ，如何使用？

css sprites其实就是把网页中一些背景图片整合到一张图片文件中。再利用CSS的"background-image"，"background-repeat"，"background-position"的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

css sprites减少了网页的http请求，从而大大的提高了页面的性能，缺点是后期维护改动比较麻烦。

---

px、em、rem的区别

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，更适用于响应式布局。

em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。而rem只是相对于根元素，计算起来更清晰。

---