浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子，每一个盒子都有长和款，多个这样的盒子组成了我们的网页。
Margin，Border，Padding
每一个盒子都会有margin，border和padding属性。我们可以通过CSS来指定这三个属性的大小。例如：
.box {
margin: 40px;
padding: 20px;
border: black 2px solid;
text-align: center
}<body>
<div class="box">
box
</div>
<div class="box">
box
</div>
<div class="box">
box
</div>
</body>box class被应用后的样式如下：
- margin 应用后元素与元素之间产生了相应的空间。
- border 应用后元素的外边框增加了宽度。
- padding 应用后元素内的内容和边框之间产生了相应的空间。
我们同样可以通过Chrome的Developer Tools来验证相应的属性。上面的代码在Developer Tools中的计算结果如下：
上栗中，我们将盒子四个方向的margin都设置成了40px。我们还可以只修改上下左右中的其中一个或几个。
/* 具体指定上右下左的margin */
.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
/* 以简写的方式指定margin，依次为上，右，下，左 */
.box {
margin: 10px 20px 30px 40px;
}
/* 以简写的方式指定margin，依次为上下，左右 */
.box {
margin: 10px 20px;
}padding设置的语法与margin相同，这里就不列出了。border的设置比较特殊，有机会会找专门一个章节来介绍。
这里还有一个小技巧，就是如果想将一个元素水平居中，可以将它的margin-left和margin-right属性设置成auto。即左右两边的margin根据当前窗口宽度自动调节到合适大小。
Margin 塌陷
下面这块代码中，盒模型的计算结果和我们预期的不太一样：
.box1 {
margin-bottom: 30px;
border: black 2px solid;
text-align: center
}
.box2 {
margin-top: 60px;
border: black 2px solid;
text-align: center
}<body>
<div class="box1">
box 1
</div>
<div class="box2">
box 2
</div>
</body>如果按照前面的解释，box1和box2这间的空间应该是30px + 60px = 90px，但实际上只有60px。原因是浏览器渲染元素时，垂直方向相邻的元素margin值只会取设置的较大的那个值。这就是Margin Collapsing。在上栗中，最后计算结果是60px。通过Chrome的工具，我们可以验证，如下图：
橘黄色部分为两个盒元素的margin区域。图例中可以看出margin的高度不是两个元素marign相加，而是取较大的那个。
block元素和inline元素
html元素中，有一些元素是block元素，即元素的宽度会占满整个窗口的宽度，例如div。还有一些是inline元素，即元素的宽度是根据自己内容需要计算出来的宽度，且会紧贴在前一个inline元素的后面，例如span。
<body>
<div>
我是block
</div>
<span>
我是inline
</span>
<span>
我是inline
</span>
<div>
我是block
</div>
</body>
我们可以通过display属性还改变元素的默认显示属性。例如想将一个span以block形式展现，只需将其设置成display: block;
还有一点需要注意的是，以inline形式展现的元素，是不受上下margin属性控制的，如果想给一个inline元素设置margin-top和margin-bottom则需要将display设置成inline-block.
<span class="inline">
我是inline
</span>
<span class="inline">
我是inline
</span>上下margin不起作用
.inline {
margin: 20px;
border: red 1px solid;
}
上下margin起作用
.inline {
margin: 20px;
border: red 1px solid;
display: inline-block;
}
盒模型长度和宽度的计算
盒模型的长度可以通过width属性还设置，例如width: 200px。我们来看一个例子：
.box {
margin: 10px auto;
padding: 10px;
border: red 1px solid;
text-align: center;
width: 200px;
}<div class="box">
box
</div>
我们设置了元素宽度是200px，但通过Developer Tools查看到最后的结果是222px。原因是浏览器渲染引擎默认理解width属性是内容加上padding的宽度，整个元素宽度还要加上border和margin，即200px + 2 * 10px (margin) + 2 * 1px (border) = 222px。
这种对width属性的处理很多时候会带来一些不便，因为我们无法准确的知道最后的元素到底有多宽。要解决这个问题，可以通过设置box-sizing: border-box;，这样元素最后整体宽度就是我们设置的宽度了。如下图：
我们在引用一些CSS框架时，大多数框架都会将所有元素的box-sizing设置成border-box。有兴趣的同学可以看看Bootstrap等框架的源码。
* {
box-sizing: border-box;
}关于盒模型的高度，可以通过height属性来设置。而如何将设置垂直居中，还是建议使用flex-box来实现，网上关于flex-box的资料很多，有兴趣的话可以去看看。
