第7章 盒子模型.pptxVIP

第7章盒子模型HTML5网页设计

回顾CSS3的颜色样式包括颜色属性和背景颜色属性，用于设置文字颜色，以及为标签的背景设置颜色。CSS3的图片样式包括背景图片属性、背景图像的平铺属性，这些属性用于设置标签的背景图像显示效果，并且可以设置背景图像是否随标签内容滚动，指定背景图像在页面中显示的位置，以及背景图像的显示大小等。其中，background属性可以使用连续的多个属性值在CSS3中新增加了标签的阴影显示效果，其中text-shadow属性用于创建文字的阴影，box-shadow属性可以创建div的阴影效果。

本章内容盒子模型原理标准文档流盒子的浮动盒子的定位制作手机销售排行榜制作公司网站首页制作盒子浮动效果制作盒子定位效果

7.1盒子模型原理盒子模型概述盒子的大小盒子之间的关系制作手机销售排行榜2025

7.1.1盒子模型概述盒子模型（BoxModel）是从CSS诞生之时便产生的一个概念，每一个标签都会在页面上生成一个盒子。因此，HTML页面实际上就是由一堆盒子组成的。默认情况下，每个盒子的边框不可见，背景也是透明的，所以我们不能直接看到页面中盒子的结构。

7.1.1盒子模型概述每个盒子都有边界（margin）、边框（border）、填充（padding）和内容（content）4个属性，其中填充、边框、边界属性分别由CSS3的padding、border、margin属性设定，而内容属性宽度和高度则由width属性和height属性设定。

7.1.1盒子模型概述在网页设计上，内容常指文本、图片等元素，但是也可以指嵌套的HTML元素；填充是指HTML元素的内容与其边框之间的填充厚度；边框是指盒子的外围；边界是指HTML元素与其他元素之间的距离。每个HTML元素均可以看作一个盒子，盒子存在4条边，因此边框、填充和边界属性均包含4个部分，分别是上（top）、右（right）、下（bottom）、左（left），这4个部分可以同时设置，也可以分别设置。

7.1.2盒子的大小在CSS中，可以通过设置width和height属性的值来控制内容content所占据的大小，但值得注意的是，盒子还有其他3个属性border、padding以及margin，这些属性的设置都将影响到盒子的实际尺寸以及所占据空间的大小。一个盒子实际的大小=内容+填充+边框所占据空间的大小=内容+填充+边框+边界内容宽度填充边界边框内容高度

7.1.2盒子的大小divid=t 宽度：200pxbr/高度：150pxbr/ 填充：上下10px左右20pxbr/ 边框：5pxbr/ 边界：10px/divstyletype=text/css *{padding:0px;margin:0px;} #t{ width:200px; height:150px; padding:10px20px; border:5pxsolidred; margin:10px; }/style计算盒子的实际大小如下：（1）盒子宽度=内容的宽度+左边距+右边距+左边框宽度+右边框宽度，其中内容宽度为200px、左右边距均为20px、左右边框宽度均为5px，因此盒子的实际宽度为250px。（2）盒子高度=内容的高度+上边距+下边距+上边框宽度+下边框宽度，其中内容高度为150px、上下边距均为10px、上下边框宽度均为5px，因此盒子的实际高度为180px。所以，盒子的实际大小为250px×180px。计算盒子所占据的空间大小如下：（1）盒子实际占据宽度=盒子实际宽度+左外边距+右外边距，其中盒子实际宽度为250px、左右外边距均为10px，因此盒子实际占据的宽度为270px。（2）盒子实际占据高度=盒子实际高度+上外边距+下外边距，其中盒子实际高度为180px、上下外边距均为10px，因此盒子实际占据的高度为200px。所以，盒子所占据的空间大小为270px×200px。

7.1.2盒子的大小灵活利用盒子的相关属性，我们才有能力应付各种各样的排版要求。例如经常会设置内容文本的居中，而文本的居中又分为水平方向居中和垂直方向居中。styletype=text/css#cat{ width:120px; height:20px; border:1pxsolidlightgray; color:red; font-size:12px; text-align:center; padding-top:10px;}/styled