盒子好比快递小哥的一个快递包裹。把这个包裹延着x轴切开，如下图所示：
盒子的内容就是你网购的商品，盒子的填充就是包裹里面一些泡沫或者报纸保护运输的物品的安全，边框就是包裹的盒子的厚度，盒子的外边距是快递小哥来放置快递的时候，快递与快递的距离。对应到css中如上图所示。
content只需确定 width 和 height 就能确定其大小。但是对span元素不适用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ background-color: silver; height: 100%; } .box1{ width: 50%; height: 50%; background-color: indianred; } span{ width: 500px; height: 20px; background-color: indianred; } </style> </head> <body> <div class="box1"> <p>hello box</p> </div> <span>hello span</span> </body> </html>
运行结果如下图：
padding：[<length>|<percentage>]{1,4} 四个元素 一次是顺时针方向 上、右、下、左。
padiing元素的值缩写：
padding 20px ; = padding 20px 20px 20px 20px;
padding 20px 10px ;= padding 20px 10px 20px 10px;
padding 20px 10px 30px;= padding 20px 10px 30px 10px;
margin为盒子的外边距。
margin合并：在上下的毗邻元素中，margin-bottom：40； margin-top：20px；实际俩个元素的距离为40px；
父元素和第一个/最后一个子元素 同样存在以上的情况。
border为盒子的厚度。
border-width：（trbl）1px 2px 3px 4px;
border-style:solid (直线)、dashed（虚线）、dotted（点状）
border—radius 为圆角边框，四个角水平半径和竖直半径。
例子如下：
border-radius:50%; 就为一个圆。
盒子里面内容超出范围（使用overflow）
overflow：visible（超出了也显示）
overflow：hidden（超出了隐藏）
overflow：scroll（显示滚动条）
overflow：auto（如果内容超出显示滚动条，没超出不显示）
盒模型中默认情况宽高设置的是 content-box,使用box-sizing 使宽高设置为border-box；
box-sizing：content-box|border-box
box-shadow：盒子的阴影 不占用空间
轮廓outline（不占空间在border外，如果有border描述，就没有必要使用outline了）
