在html文档中，元素体现为一个一个的方形盒子。每个盒子由以下四种属性来确定他在文档中的位置和大小：
- content 内容区域
- padding 内边距
- border 边框
- margin 外边距
在 标准盒模型 定义下，content占据的空间由(min/max)width，(min/max)height来控制。
而在IE或者是 box-sizing: border-box 模式下，content空间应该还包含了padding和border的宽高。
现在通常使用 box-sizing: border-box 这种非标准盒模型来开发。
- width的单位可以是px，rem，em，vw，也可以是百分比%。当单位是%时，取值是父元素宽度的比值。
<!--.div2的宽度是200px( 1000 * 20%)--> .div1{width: 1000px} .div1 > .div2{width: 20%} - height的情况会复杂一些，px，rem，em，vh为单位时，效果和width相仿。而为百分比%时，并不会简单的按照父元素的高度来计算。
<!--如果需要让height百分比生效，需要这样设置--> html, body{height: 100%} #app, .div1{height: 100%} .div2{height: 20%}html代码结构片段
#app .div1 .div2
如果内容区域内的元素宽高超出了定义的大小，可以通过overflow:hidden来截断，也可以通过text-overflow: ellipsis来控制文字的溢出。
padding值指定了content到border之间的距离。不能设置为负值。利用padding的百分比%单位，可以实现盒子的等比缩放。
<!--padding百分比按照父元素宽度计算，所以div2会是一个正方形--> .div1{width: 100%} .div1 > .div2{width: 20%;padding-top: 20%}边框包裹在内容区域周围，可以是实线，也可以是虚线，甚至可以使用图片。边框会随着border-radius属性的设置而弯曲。
- 颜色：边框的颜色会继承字体的颜色。
- 在移动端手机上，通常使用伪元素方式来实现
1px边框。
.1px-top{position: relative} .1px-top::before{ content: ''; position: absolute; width: 100%; height: 1px; border-top: 1px solid; transform-origin: 0 0; transform: scaleY(0.5); }margin是定义盒子自身相对于其他盒子的距离。百分比%同样是按照父元素的宽度进行计算。
在多个存在margin-top/bottom的兄弟元素之间，他们相邻的margin值会被合并，取最大的一个进行展示。
div{margin: 10px 0}下面4个div上下的间距均是10px，而不是20px
<div>1</div> <div>2</div> <div>3</div> <div>4</div>