CSS框模型

    在CSS的框模型中，有四个组成：元素，内边距，边框，外边距。

    内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

    内边距，边框，外边距都是可选的，默认值为0。可以通过以下设置来覆盖浏览器样式。

* {
  margin: 0;
  padding: 0;
}

    在CSS中，width和height指的是内容区域的宽度和高度，增加内边距，边框，外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

    像上面这样的设置，元素的总尺寸就是100了.值得提出的是外边距可以是负值，而且在很多时候，外边距就设为负的。

    内边距

    元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

p {padding: 10px 0.25em 2ex 20%;}

    需要提出的是内边距中可以使用百分数来表示大小，这里的百分数指的是父元素的宽度的百分数

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div> 

    边框

    元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式、宽度和颜色。

 

    外边距合并

    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。