html盒子中的段落,网页设计与制作实践（HTML+CSS）第4章盒子模型.ppt

4.3 元素的类型与转换 4.3.2

与 标记 1、

标记

标记将网页分割为独立的、不同的部分，以实现网页的规划和布局。

与

之间相当于一个容器，可以容纳段落、标题、表格、图像等各种网页元素。

标记通过与id、class等属性配合，然后使用CSS设置样式，可以替代大多数的块级文本标记。 4.3 元素的类型与转换 4.3.2

与 标记 注意： 1、

标记最大的意义在于和浮动属性float配合，实现网页的布局，这就是常说的DIV+CSS网页布局。 2、

可以替代块级元素如、

等，但是他们在语义上有一定的区别。例如

和

的不同在于，

具有特殊的含义，语义较重，代表着标题，而

是一个通用的块级元素，主要用于布局。 4.3 元素的类型与转换 4.3.2

与 标记 2、标记 标记是行内元素，与之间只能包含文本和各种行内标记，如加粗标记、倾斜标记等，中还可以嵌套多层。 标记常用于定义网页中某些特殊显示的文本，配合class属性使用。 4.3 元素的类型与转换 4.3.3 元素的转换 使用display属性对块元素和行内元素进行转换。其属性值及含义如下： inline：此元素显示为行内元素(行内元素默认display属性值) block：此元素显示为块元素(块元素默认display属性值) inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行 none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在 4.3 元素的类型与转换 4.3.3 元素的转换 注意：

被转换成了行内元素，而行内元素只可以定义左右外边距，定义上下外边距时无效。 4.4块元素垂直外边距的合并 4.4.1 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。 4.4块元素垂直外边距的合并 4.4.2 嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。 如果希望外边距不合并，可以为父元素定义1像素的上边框或上内边距。这里以定义父元素的上边框为例，在父

的CSS样式中增加如下代码： border-top:1px solid #FCC; /*定义父div的上边框*/ 本章首先介绍了盒子模型的概念，与盒子模型相关的属性，然后讲解了块元素、行内元素，最常用的块元素

与行内元素，以及元素类型的转换，最后制作出了一个常见的盒子模型效果。 通过本章的学习，读者应该能够熟悉盒子模型的构成，熟练运用盒子模型相关属性控制网页中的元素，理解块元素与行内元素的区别，掌握

标记与标记的使用。 ? 本章小结 第四章 盒子模型 认识盒子模型 盒子模型相关属性 元素的类型与转换 4.1 认识盒子模型 盒子模型的概念 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。 4.1 认识盒子模型 以手机盒子为例，更形象地认识CSS盒子模型 如果把手机想象成HTML元素，那么手机盒子就是一个CSS盒子模型，其中手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模型的内边距，纸盒的厚度为CSS盒子模型的边框。 4.1 认识盒子模型 多个手机盒子放在一起时，它们之间的距离就是CSS盒子模型的外边距。 4.1 认识盒子模型 结论： 网页就是多个盒子嵌套排列的结果。 内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 如果给元素定义边框属性，边框将出现在内边距和外边距之间。 注意：虽然盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。 4.2 盒子模型相关属性 4.2.1 边框属性 设置内容 样式属性 常用属性值 ? 上边框 ? bor