元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：
把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
设置一边的边框，比如顶部边框，可以按如下设置：
上面三句可以简写成一句：
设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
设置盒子四边的内间距，可设置如下：
上面的设置可以简写如下：
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。
按照下面代码制作页面：
页面显示效果如下：
通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
1.在布局中，如果我想增大内容和边框的距离，又不想改变盒子显示的尺寸，应该怎么做？
请制作图中所示的标题：
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：