高频面试题中的CSS（二）

稀饭2024-03-18interviewCSS

面试题总结系列，这里只列出来出现频率比较高且觉得有必要的题目，

1. 什么是BFC 🏳️‍🌈

BFC是一种排列html的规则

BFC触发方式
根元素，即HTML标签浮动元素：float值为left、right overflow值不为 visible，为 auto、scroll、hidden display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid 定位元素：position值为 absolute、fixed
作用
清除元素浮动，设置父容器overflow值不为none，即hidden、auto、scroll
阻止相邻元素的margin合并，设置元素的display为inline、inline-*或table-caption ；
参考链接open in new window

查看效果

2. 盒模型 🏳️‍🌈

怪异盒模型（border-box）
元素最终宽度 = content大小(100px)
标准盒模型（content-box）
元素最终宽度 = border(4px) + padding(40px) + content大小(100px)

3. position定位的区别 🏳️‍🌈

relative：相对于自身定位；
absolute：相对于父级或组件元素position不为static，即relative，absolute，fixed，sticky；
fixed：相对于浏览器窗口；
sticky：相对于父级或祖先滚动容器定位；

4. 说下重绘和回流及优化 🏳️‍🌈

回流：当DOM结构、样式或布局发生变化时，浏览器重新计算元素的几何属性（如位置、尺寸等）；首先浏览器遍历渲染树，计算每个可见节点在屏幕上的位置和大小等几何属性；在这个过程中，因为节点几何属性的变化，又需要对受影响节点重新计算布局，同时回流的时候必定会触发重绘，所以频繁回流会占用大量的资源来进行布局计算。

重绘：当元素的视觉样式发生变化（如颜色、背景等），但不影响布局时，浏览器会进行重绘；在布局完成之后，按照渲染树的顺序，逐个绘制节点，包括颜色、边框、渲染背景、文字、图像等内容。

优化方法： 1. 减少DOM节点数量，减少或者集中DOM的操作和访问； 2. 使用transform和opacity代替布局属性的修改； 3. 通过requestAnimationFrame批量更新DOM样式，避免每次操作都触发回流；

5. 实现一个正方形 🏳️‍🌈

.box {
    width: 20vw;
    /* width: 20vw;
    height: 20vw; */  /* 1. 高度使用vw单位，会随页面宽度变化而变化 */
    
    background-color: red;
    aspect-ratio: 1 ; /* 2. 使用aspect-ratio属性，需要设置宽度，高度会自动填充为所设置的宽度比例 */
}


<div class="box"></div>