盒子模型

盒子模型

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

不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

所得出的结论：
1.网页设计就是多个盒子嵌套排列的结果。
2.其中，内边距出现在内容区域的周围，当给元素添加背景色或背景图象时，该元素的背景色或背景图像也将出现在内边距中
3.外边距是该元素与相邻元素之间的距离
4.如果给元素定义边框属性，边框将出现在内边据和外边距之间。
【注意：虽然盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。】

盒子模型相关的属性

1.边框属性
在css中边框属性包括边框样式属性（border-style)、边框宽度属性（border-width)、边框颜色属性（border-color)、单侧边框的属性、边框的综合属性。

设置内容	样式属性	常用属性值
上边框	border-top-style:样式；
	border -top-width:宽度；
	border-top-color:颜色；
	bordet-top:宽度 样式 颜色 ；
下边框	border-bottom-style:样式；
	border-bottom-width:宽度；
	border-bottom-color:颜色；
	border-bottom:宽度 样式 颜色；
左边框	border-left-style:样式；
	border-left-width:宽度；
	border-left-color:颜色；
	border-left:宽度 样式 颜色；
右边框	border-right-style:样式；
	border-right-width:宽度；
	border-right-color:颜色；
	border-right:宽度 样式 颜色；
样式综合设置	border-style:上边 [右边 下边 左边] ；	none(无）、solid 单实线、dashed 虚线、dotted 点线、double 双实线
宽度综合设置	border-width:上边 [右边 下边 左边] ；	像素值
颜色综合设置	border-color:上边 [右边 下边 左边] ；	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度 四边样式 四边颜色；

1.使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
2. 使用border-width属性综合设置四边宽度时，必须按上右下左的顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
3. 使用border-color属性综合设置四边颜色时，必须按顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none,则其他的边框属性无效。
4.当每一侧的边框都不同，或者只需要单独定义某一侧的边框时，可以使用单侧边框的综合设置属性border-top、border-bottom、border-left、或border-right。

2.内边距属性
为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容与编剧之间的距离，也常常成为内填充。在css中，padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置如下：
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding：上内边距（右内边距、下内边距、左内边距）
在上面的设置中，padding相关属性的取值可为auto自动（默认值）、不同单位的数值相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值px，不允许使用负值。
同边框相关属性一样，使用复合属性padding定义内边距时，必须按照顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，3个值为上/左右/下。

3.外边距属性
在css中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法相似，设置外边距的方法如下：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin：上外边距（右外边距、下外边距、左外边距）
margin相关属性的值，以及复合属性margin取1~4个值的情况与padding相同。但是外边距可以使用负值，使用相邻元素重叠。

4.背景属性
1.设置背景颜色
在css中，网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb（r,g,b)。background-color的默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。

2.设置背景图像

body{
          background-color:#CCC;             /*设置网页的背景颜色*/
          background-image:url(img/jianbian.jpg);          /*设置网页的背景图像*/
        }

3.设置背景图像平铺
默认情况下，背景图像会自动向水平方向和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性的取值如下：
repeat：沿水平和数值两个方向平铺（默认值）
no-repeat:不平铺（图像位于元素的左上角，只显示一次）
repeat-x：只沿水平方向平铺
4.设置背景图像的位置
如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将显示在元素的左上角
如果希望背景图像出现在其他位置，就需要另一个css属性background-position，设置背景图像的位置。
例如代码：

body{
    background-image:url(img/wdjl.jpg);         /*设置网页的背景图像*/
     background-repeat：no-repeat           /*设置背景图像不平铺*/
     background-position：right bottom        /*设置背景图像的位置*/
     }

5.设置背景图像固定
在网页上设置背景图像时，随着页面滚动条的移动，背景图像也会跟着一起移动
如果希望背景图像固定在屏幕上，不随着页面滚动，可以使用background-attachment属性来设置。其属性值如下：
scroll:图像随页面元素一起滚动（默认值）
fixed：图像固定在屏幕上，不随页面滚动
下面控制背景图像，使其固定在屏幕上，body元素的CSS样式代码如下：

body{
    background-image:url(img/wdjl.jpg);         /*设置网页的背景图像*/
     background-repeat：no-repeat           /*设置背景图像不平铺*/
     background-position：right bottom        /*设置背景图像的位置*/
     background-attachment：fixed；           /*设置背景图像的位置固定*/
     }

6.综合设置元素的背景
同边框属性一样，在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式如下：
background：背景色 url(“图像”)、平铺 定位 固定；
5.盒子的宽与高
盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度=height+上下内边距之和+上下内边框宽度之和+上下外边距之和【注意：1.宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（标记和除外）2.计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况】