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;
}
4.使用before和after双伪元素清除浮动
#parent::after,
#parent::before {
content: " ";
display: table;
}
#parent::af