CSS盒模型

CSS盒模型概述：所有 HTML 元素可以看作盒子，在 CSS 中，"box model "这一术语是用来设计和布局时使用。CSS盒模型(Box Model)规定了元素处理元素内容（content）、内边距（padding）、边框（border）、外边距（margin）的方式。下面的图片说明了盒子模型 (Box Model):

                                        

 

盒模型各部分说明：

1、content（内容）：盒子的内容，显示文本和图像。

2、padding（内边距）：内容区与边框之间的填充部分，内边距是透明的。

3、margin（外边距）：盒子与邻元素的间距，外边距是透明的。

4、border（边框）：盒子的边框，可以设置边框的宽度、样式、颜色。

盒模型我们可以将它看做是浏览器为页面中的每个HTML元素生成的透明矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。

一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是：上(top)右(right)下(bottom)左(left)

边框相关属性：border-top(上边框)、border-right(右边框)  

border-bottom(下边框)、border-left(左边框)

内边距相关属性：padding-top(上内边距)、padding-right(右内边距)

padding-bottom(下内边距)、padding-left(左内边距)

外边距相关属性：margin-top(上外边距)、 margin -right(右外边距)

margin -bottom(下外边距)、margin -left(左外边距)

简写样式：CSS为margin,border,padding分别规定了简写属性，通过一条声明就可完成设定。在每个声明中，属性值得顺序都是上右下左的顺序，想象一下顺时针旋转就可以了。

例如给某个元素设置上外边距5px、右外边距4px、下外边距6px、左外边距4px。全写形式如图下：

                                                

 

简写形式如图下：

                                    

 

有时不需要将4个值全部写出，哪一边没写，就用对边的值。例如：

{margin:3px 4px 5px;} 表示上右下左外边距分别为：3px 4px 5px 4px，

{margin:3px 4px;} 表示上右下左外边距分别为：3px 4px 3px 4px，

{margin:3px;} 表示上右下左外边距分别为：3px 3px 3px 3px。