网页设计与制作（五）

盒子模型

一、认识盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、边框和外边距组成。
1.网页就是多个盒子嵌套排列的结果。
2.内边距出现在内容区域的周围，当给元素添加背景或背景图像的时，该元素的背景色或背景图也将出现在内边剧中
3.外边距是该元素与相邻元素之间的距离
4.如果给元素定义边框属性，边框将出现在内边距和外边距之间
虽然盒子拥有内边距、边框、外边距、宽和高这些基本属性，但并不要求每个元素都必须定义这些属性。

二、盒子模型相关属性

设置内容 样式属性 常用属性值
上边框 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。

内边距属性
（1）padding-top:上内边距。
（2）padding-right:右内边距。
（3）padding-bottom:下内边距。
（4）padding-left:左内边距。
（5）padding:上内边距[右内边距 下内边距 左内边距]
1.在上面的设置中，padding相关属性的取值可为auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值px，不允许使用负值。
2.同边框相关属性一样，使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
3.如果设置内外边距为百分比，不论上下或左右的内外边距，都是相对于父元素宽度width的百分比，随父元素width的变化而变化，和高度height无关。

外边距属性
（1）margin-top:上内边距。
（2）margin-right:右内边距。
（3）margin-bottom:下内边距。
（4）margin-left:左内边距。
（5）margin:上内边距[右内边距 下内边距 左内边距]
margin相关属性的值，使复合属性margin取1~4个值的情况与padding相同。但是外边距可以使用负值，使相邻元素重叠。
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级元素水平居中。
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

背景属性
1.设置背景颜色
使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或 RGB代码rgb(r,g,b)。background-color的默认值为transparant,即背景透明，这是子元素会显示其父元素的背景。
2.设置背景图像
将图像作为网页元素的背景， 通过background-image属性实现。
3.设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺，可以通过background-repeat属性来控制，
（1）repeat:沿水平和竖直两个方向平铺（默认值）。
（2）no-repeat:不平铺（图像位于元素的左上角，只显示一次）。
（3）repeat-x：只沿水平方向平铺。
（4）repeat-y:只沿竖直方向平铺。
4.设置背景图像的位置
background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，background-position属性的默值为“00”或“top left”即背景图像位于元素的左上角。
（1）使用不同单位（最常用的是像素px）的数值，直接设置图像左上角在元素中的坐标。
（2）使用预定义的关键字，指定背景图像在元素中的对齐方式，
水平方向值: left、center、right。
垂直方向值: top、center、bottom。
两个关键字的顺序任意，若只有一个值则另一个默认为center。例如：
center:相当于center center (居中显示）。
top:相当于top center或center top (水平居中、上对齐）。
(3)使用百分比：按背景图像和元素的指定点对齐
0% 0%:表示图像左上角与元素的左上角对齐。
50% 50%:表示图像50% 50%中心点与元素50%50%的中心点对齐
20% 30% :表示图像20% 30%的点与元素20% 30%的点对齐。
100% 100% :表示图像右下角与元素的右下角对齐，而不是图像充满元素
如果只有一个百分数，将作为水平值，垂直值则默认为50%。
5.设置背景图像固定
可以使用background-attachment属性来设置。
（1）scroll:图像随页面元素一起滚动（默认值）。
（2）fixed:图像固定在屏幕上，不随页面元素滚动。
6.综合设置元素的背景
语法格式：

background:背景色 url("图像）平铺 定位 固定；
1
盒子的宽与高
1.盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和。
2.盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和。
3.宽度属性width和高度属性height 仅适用于块级元素，对行内元素无效（< img/>标记和< input/>除外）。
4.计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。