【前端面试问题总结】2022.9.18

1.讲一下盒子模型

盒模型：内容，内边距，外边距，边框
模型有两种类型：标准盒模型和IE盒模型。
1.标准盒模型
box-sizing: content-box;
简单来说你的盒子会被padding盒border撑大
标准盒模型的width组成：content（不包含 padding 和 border）
标准盒模型的height组成：content（不包含 padding 和 border）
此时你的盒子实际大小是：
实际高度:height+padding-top+border-top
实际宽度：width+padding+border
2.IE盒模型
box-sizing: border-box;
简单来说盒子不会被padding和border撑大
标准盒模型的width组成：content + 2 * padding + 2 * border
标准盒模型的height组成：content + 2 * padding + 2 * border
此时你的盒子实际大小是：
实际高度:height
实际宽度：width

---

2.清除浮动的方式

原理，在父元素的内部子元素添加浮动后，因为不占据原来的位置，父元素会发生塌陷问题，因此需要清除浮动
1.额外标签法
给父元素末尾添加一个空标签，设置clear:both
2.父元素添加overflow:hidden
3.父元素使用after伪元素清除浮动

   #parent:after {
   
            content: "";
            clear: both;
            height: 0;
            display: block;
        }
1
2
3
4
5
6
7

4.使用before和after双伪元素清除浮动

#parent::after,
        #parent::before {
   
            content: " ";
            display: table;
        }
        
        #parent
1
2
3
4
5
6
7