高频面试题中的CSS（二）

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

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. 实现一个正方形 🏳️‍🌈

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


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

查看效果