《HTML5+CSS3网页制作教程》课件_第12章.pptx

模块12CSS实现页面布局;

12.1盒子模型

;

图12-1展示了W3C标准的盒子模型。;

12.1.1?内容区

内容区(content)是盒子的中心部分，呈现了盒子的主要信息内容，这些内容可以是文本、图片、视频等多媒体。

内容区有3个相关属性：width、height和overflow。width和height属性用于指定盒子内容区的宽度和高度，注意这里的宽与高不包含内边距padding部分。但是如果设置了盒子的box-sizing属性为“border-box”，此时的width与height值会包括内容区、内边距和边框。;

1.width和height属性

width和height属性默认情况下是指内容区的宽与高，它们的语法格式如下：;

【例12-1】设置元素的宽与高。;

;

上述代码在浏览器中的预览效果如图12-2所示。;

2.overflow属性

在CSS中，可以使用overflow属性来控制元素内容溢出内容区时的显示方式，其语法格式如下：

overflow:关键字;

说明：overflow的属性取值如表12-1所示。;

;

【例12-2】内容溢出处理。

;

;

上述代码在浏览器中的预览效果如图12-3所示。

;

12.1.2?内边距

内边距padding又被称为“填充”，它是指内容区边界到边框之间的部分。padding是内边距的简写属性。内边距有4个方向的属性：padding-top、padding-right、padding_x0002_bottom、padding-left，它们的语法格式如下：

;

说明：padding的取值可以是1～4个，代表的含义如下：

(1)1个值(如：padding:20px)，表示所有的填充都是20px。

(2)2个值(如：padding:20px5px;)，表示上下填充为20px，左右填充为5px。

(3)3个值(如：padding:5px10px7px;)，表示上填充为5px，左右填充为10px，下填充为7px。

(4)4个值(如：padding:2px5px7px10px;)，表示上填充为2px，右填充为5px，下填充为7px，左填充为10px。按顺时针顺序从上到左。

;

【例12-3】设置内边距。;

;

上述代码在浏览器中的预览效果如图12-4所示。;

12.1.3?外边距

外边距margin是指盒子边框以外的空间，是与其他盒子之间的距离。margin是外边距的简写属性。外边距也有4个方向的属性：margin-top、margin-right、margin-bottom、

margin-left，它们的语法格式如下：;

【例12-4】设置外边距。

;

;

上述代码在浏览器中的预览效果如图12-5所示。;

本例中，设置了盒子的外边距为：上下10px，左右30px。可以看出，“盒子1”与“盒子2”之间的间距并不是“盒子1”的下边距加“盒子2”的上边距，而是只有10px，这是因为块级元素的垂直相邻外边距会合并。;

12.2HTML标准流;

例如，下面这段HTML代码：;

在浏览器中的显示效果如图12-6所示，为了能看清楚它们的轮廓，为它们统一设置了边框样式。;

从图12-6中可以看出，这些元素按照定义的先后顺序显示在页面中，块状元素独占一行，行内元素在一行中从左往右排列。列表元素、p元素在标准流中自带边距，这些都

是在布局中需要考虑到的因素。;

12.3结构元素;

2.行内元素

行内元素也称内联元素，不占有独立的一行区域。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们仅靠自身的字体大小和图像尺寸来决定自身的宽高，一

般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有span、strong、em、a、img、input等，其中span是最典型的行内元素。;

12.3.1?元素类型的转换

如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，可以使用display属性对元素的类型进行转换。;

display属性常用的属性值及含义如下：

(1)inline：元素将显示为行内元素；

(2)block：元素将显示为块元素；

(3)inline-block：元素将显示为行内块元