在一个文档中，每个元素被当成一个盒子，这里说一下盒子的尺寸和外边距合并。
CSS 3 新属性 box-sizing ，这里讨论 box-sizing 的 content-box 和 border-box
content-box
默认值，标准盒模型，也就是 CSS 2.1 规定的盒模型
width/height = content
border-box
border-box 重新规定元素的宽高的计算规则
width/height = border + padding + content
测试：
页面中有两个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
给他们添加样式
<style>
.box1 {
width: 100px;
height: 100px;
border: 10px solid black;
margin: 30px;
padding:10px;
background: yellow;
box-sizing: border-box;
}
.box2 {
width: 100px;
height: 100px;
border: 10px solid red;
margin: 30px;
padding: 10px;
background: blue;
}
</style>
效果：
box-sizing.png
结论
可以看到，
在 content-box 标准盒模型下，元素的实际宽度 = 设置宽度 + padding + border ，其中 content = 设置宽度
在 border-box 盒模型下 ，元素的实际宽度 = 设置宽度，其中 content = 设置宽度 - padding - border，就是说内容区被缩小了
外边距合并
从上图中可以看到，两个盒子都设置了margin：30px，但是实际上下两个盒子高度只有30px
原因：相邻块元素，父元素与其最后一个子元素，空块元素会出现两个边距合并为较大的单个边距，即外边距合并，这是默认的渲染规则。
再深入：BFC，Block Formatting Context，块格式化上下文，给元素一个 BFC ，相当于给这个元素生成一个独立的块级区域，就不会发生外边距合并了。
形成 BFC 的条件
- 浮动元素，float 除 none 以外的值；
- 绝对定位元素，position（absolute，fixed）；
- display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
- overflow 除了 visible 以外的值（hidden，auto，scroll）
网友评论