1. 标准盒模型
内容 width = css 属性 width 的大小。
盒子 width = 内容width + 2 * padding + 2 * border 。
可以通过 box-sizing: content-box; 设置为标准盒模型。
举例如下:
/* W3C盒模型:内容width = 100px */
/* 盒子宽度为:100 + 2*20 + 2*2 = 144px */
/* 高度同理 */
div {
width: 100px;
height: 100px;
margin:20px;
padding: 20px;
border: 2px solid;
box-sizing: content-box;
}
2. 怪异盒模型
内容 width = css 属性 width - 2 * padding - 2 * border。
盒子 width = css 属性 width。
可以通过 box-sizing: border-box; 设置为怪异盒模型。
举例如下:
/* W3C盒模型:内容 width = 100 - 2*20 -2*2 = 56px */
/* 盒子width:100px */
/* 高度同理 */
div {
width: 100px;
height: 100px;
margin:20px;
padding: 20px;
border: 2px solid;
box-sizing: border-box;
}
3. BFC
块级格式化上下文
BFC如何产生–
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
4. 父子关系
如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距,给父元素添加 overflow:hidden 这样父元素就变为 BFC,不会随子元素产生外边距,但是父元素的高
5. 同级元素
在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个