CSS盒子模型

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

1. Margin(外边距) 边框外的区域，外边距是透明的。
2. Border(边框) 围绕在内边距和内容外的边框。
3. Padding(内边距)内容周围的区域，内边距是透明的。
4. Content(内容)盒子的内容，显示文本和图像。

width和height

只定义内容的大小，不包含边框和边距。如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设
置

border(边框)

width,边框宽度
color,边框的颜色
style,边框的样式(border-style:dotted、solid、double、dashed;)
分开单独设置，例：

border-width:1px; border-color:#00f; border-style:solid;

使用综合属性，例：

border:1px #00f solid

注意：三个值没有先后顺序，中间用空格隔开
四边独立设置

border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;

使用综合属性

border-left:1px #00F solid;

padding（内边距）

边框和内容之间的空白宽度
注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
padding的综合设置 例：

padding:2px;(四个内边距都为2px)

padding的单边距设置。例：

padding-left:2px;(左边的边框和内容之间的距离为2px)

margin（外边距）

标签和它相邻的标签之间的空白宽度
外边距的设置是相叠加的
margin的综合设置。例：

margin:10px;(和四边临近的标签的距离都为10px)

margin的单边设置。例：

margin-left:10px;(标签距左边10px)