本篇文章是关于盒模型的，主要是参考W3C CSS2.1标准, 分享CSS中一些比较容易混淆和一些比较重要的东西。
盒尺寸的计算
对于布局来说，最重要的元素的位置，元素的尺寸，元素的相对关系。
元素可以分为块元素和内联元素之分，这些元素的长宽如何计算将在后文中介绍，这里只看盒子是如何计算尺寸的。
盒子有四个元素，内容，padding，border，margin。这些共同组成了一个盒子，所以计算盒子的长宽的时候就是将他们都加起来。
margin的作用
margin的作用是元素控制自己与其他元素的距离。两个元素之间的距离是他们之间的margin之和。所以可以通过负值缩短距离。
margin有四个,top、right、bottom、left。要注意的是非替换元素的内联元素的margin-top和margin-bottom设置了是不起作用的。
之前说了margin是盒子的一个重要部分，所以也可以通过margin来控制盒子的长度。如果需要一个元素宽度超过父元素，可以通过设置margin负值来实现。
要记得的是这里就不能设置元素的宽度了，不然就不能通过margin拉伸宽度。
margin还会有崩塌，竖直方向的margin会崩塌。也就是竖直方向的两个元素(可能是包含关系的父子元素)，在计算距离的时候不是两个margin叠加，而是取最大值。
这个很好记，两段话每一个p元素有margin-top和margin-bottom。如果两个都计算的话，在段与段之间就会有两倍的距离。
padding的作用
padding和margin的区别是，padding是在border里面，在一般情况下margin的背景是透明的，而padding的背景是和content一致的。
画三角形
用CSS画三角形经常在各个网站中实现中遇到。这个原理是什么呢?想象一下这个border是有宽度的，那么在四个角落里重叠的那部分border算谁的呢？
浏览器的处理方式是每个方向各占一半。那么你要实现一个三角形怎么做呢？首先是内容为空，这样的话内容就会是一个点，同理padding也要为0。
接下来设置border，首先要给border一个宽度。想象一下每一个border是一个长方形，有了宽度，两两交叠。
如果四个边都有宽度那么就是正方形，如果3个边有宽度还是一个正方形(= =)。
现在给border涂上不一样的颜色，重叠部分一人一半，画出来的是四个三角形拼成的正方形。如果只有三个边，是不是就是一个三角形，两个直角梯形呢。