你知道盒模型吗？

2017-10-11 本文已影响0人虚玩玩TT

在一个文档中，每个元素被当成一个盒子，这里说一下盒子的尺寸和外边距合并。

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）