盒子模型

盒子模型：宽高 width,height;
margin;
border;
padding

• margin，盒外边框宽度，与其他盒子的间距。
  margin:20px; //盒子四个边框都是20px
  margin:x y z p; //盒子四个边框按上右下左的顺序宽度依次是x、y、z、p
  margin:x y z; //盒子左边框宽度没有值，它取它对边的宽度，即右边的宽度y
  可分别设置margin-top,margin-right,margin-bottom,margin-left的值。

• border，盒边框。
  border三要素：宽（border-width）、形状(border-style)、颜色(border-color)。
  border: 10px solid blue;（三个一块儿设置）
  border-width: 10px;
  border-top: 10px solid blue;(单独设置上边线)

• padding，盒内边距，主要控制内部文字与边框的距离。
  padding会使背景变大

一个盒子有margin，border，padding时占用多少空间？
竖直方向：height + padding-top + padding-bottom + border-top + border-bottom + margin-top +margin-bottom
水平方向：width + padding-right + padding-left + border-right + border-left + margin-right +margin-left