css框模块

css框模型（box model）规定了元素框处理元素内容、内边距、边框和外边框的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
注意：背景应用于由内容和内边距、边框组成的区域。

在浏览器中，内边距、边框和外边框都是可选的，默认值为0，但是许多元素将由用户代理样式设置外边距和内边距。可以通过将元素的margin和padding设置为零类覆盖浏览器样式。

在css中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素的总尺寸。
注意：外边距可以是负值，而且在很多情况下都要使用负值的外边距

下面来介绍下 各个模型对应的属性值：
1、css内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。css padding属性定义元素边框与元素内容之间的空白区域。

padding属性
声明设置所以内边距属性，设置元素所有内边距的宽度，或者设置个边上边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看看你会延伸到其它行，有可能还会与其它内容重叠。元素的背景会延伸穿过内边距，不允许指定负值的边距值。
eg：

padding:10px 5px 15px 20px

设置后
上内边距是10px
右内边距是5px
下内边距是15px
左内边距是20px
如果只填了一个值，你们所有内边距都是对应一个值。
值：
auto：浏览器技术内边距
length：规定以具体单位计的内边距值。
%：规定基于父元素的宽度的百分比的内边距
iherit：从父元素继承内边距。

其他属性：
padding-buttom
padding-left
padding-right
padding-top
都对应padding中各个值。

2、css边框
元素的边框（border）是围绕元素内容和内边距的一条或多条线。css border属性允许归集元素的边框样式、宽度和颜色。
边框样式属性（border-style）
border-style属性用于设置元素所有边框的样式，或单独地位各边设置边框样式
eg

border-style:dotted solid double dashed;

设置后
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
值：
none：定义无边框
hidden：和none一样。不过应用于表时除外，对应表，hidden用于解决边框冲突。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实现。
solid：定义实线。
double：定义双线。双线的宽度等于border-width的值。
groove：定义3D凹槽边框，其效果取决于border-color的值。
ridge:定义3D垄型边框，其效果取决于border-color的值。
inset：定义3D inset边框，其效果取决于border-color的值。
outset：定义3D outset边框，其效果取决于border-color的值。

类似的属性：
border-top-style
border-right-style
border-bottom-style
border-left-style

设置边框的宽度（border-width）
border-width属性为元素的所有边框设置宽度，或者单独为个边边框设置宽度。
只有当边框样式不是none时才起作用。如果边框样式是none，边框宽度实际上会重置为0。注意不能设置为负值。
例子：

border-width:thin medium thick 10px;

设置后
上边框是细边框
右边框是中等边框
下边框是粗边框
左边框是 10px 宽的边框

值：
thin：定义细的边框。
medium：定义中等的边框（默认）
thick：定义粗的边框。
length：自定义边框的宽度。
inherit：从父元素中继承。
同等属性：
border-top-width
border-right-width
border-bottom-width
border-left-width

3、设置边框颜色(border-color)
border-color属性设置4条边框的颜色。此属性可设置1到4中颜色。注意，边框必须存在，不为none或hidden才可以设置颜色
eg：

border-color:red green blue pink;

上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色
值：
color_name：规定边框颜色值的颜色名称，如例子。
hex_number：规定颜色值为16进制值的边框颜色。
rgb_number：规定颜色值为rgb代码的边框颜色。
transparent：边框颜色为透明，默认值。
同等的属性
border-top-color
border-right-color
border-bottom-color
border-left-color

3、css外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距最简单的方法是使用margin属性，这个属性接受任何长度单位、百分数甚至负值。
设置外边框的大小（margin）
margin属性设置所有外边距，可以为负值
eg：

margin:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

值：
auto：浏览器计算外边距。
length：规定具体单位计的外边距值。
%：规定基于父元素的宽度的百分比的外边距。
inherit：从父元素中继承。