第4章盒子模型.ppt

4.3 元素的类型与转换 4.3.1 元素的类型 行内元素 行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。 常见的行内元素有strong、b、em、i、del、s、ins、u、a、span等，其中span标记最典型的行内元素。 4.3 元素的类型与转换 4.3.1 元素的类型 在行内元素中有几个特殊的标记——img /、input /、td，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。 注意： 4.3 元素的类型与转换 4.3.2 div与span标记 1、div标记 div标记将网页分割为独立的、不同的部分，以实现网页的规划和布局。div与/div之间相当于一个容器，可以容纳段落、标题、表格、图像等各种网页元素。 div标记通过与id、class等属性配合，然后使用CSS设置样式，可以替代大多数的块级文本标记。 4.3 元素的类型与转换 4.3.2 div与span标记 注意： 1、div标记最大的意义在于和浮动属性float配合，实现网页的布局，这就是常说的DIV+CSS网页布局。 2、div可以替代块级元素如h、p等，但是他们在语义上有一定的区别。例如div和h2的不同在于，h2具有特殊的含义，语义较重，代表着标题，而div是一个通用的块级元素，主要用于布局。 4.3 元素的类型与转换 4.3.2 div与span标记 2、span标记 span标记是行内元素，span与/span之间只能包含文本和各种行内标记，如加粗标记strong、倾斜标记em等，span中还可以嵌套多层span。 span标记常用于定义网页中某些特殊显示的文本，配合class属性使用。 4.3 元素的类型与转换 4.3.3 元素的转换 使用display属性对块元素和行内元素进行转换。其属性值及含义如下： inline：此元素显示为行内元素（行内元素默认display属性值） block：此元素显示为块元素（块元素默认display属性值） inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行 none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在 4.3 元素的类型与转换 4.3.3 元素的转换 注意： div被转换成了行内元素，而行内元素只可以定义左右外边距，定义上下外边距时无效。 4.4块元素垂直外边距的合并 4.4.1 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 4.4块元素垂直外边距的合并 4.4.2 嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。 如果希望外边距不合并，可以为父元素定义1像素的上边框或上内边距。这里以定义父元素的上边框为例，在父div的CSS样式中增加如下代码： border-top:1px solid #FCC; /*定义父div的上边框*/ 4.5阶段案例-制作音乐盒 效果图如下 本章首先介绍了盒子模型的概念，与盒子模型相关的属性，然后讲解了块元素、行内元素，最常用的块元素div与行内元素span，以及元素类型的转换，最后制作出了一个常见的盒子模型效果。 通过本章的学习，读者应该能够熟悉盒子模型的构成，熟练运用盒子模型相关属性控制网页中的元素，理解块元素与行内元素的区别，掌握div标记与span标记的使用。 让IT教学更简单，让IT学习更有效 让IT教学更简单，让IT学习更有效 让IT教学更简单，让IT学习更有效 让IT教学更简单，让IT学习更有效 ? 目录 让IT教学更简单，让IT学习更有效 ? 本章小结 第四章 盒子模型 盒子模型的概念 元素的类型 盒子相关属性 元素的转换 4.1 认识盒子模型 4.2 盒子模型相关属性 4.3 元素的类型与转换 4.4 块元素垂直外边距的合并 4.5 阶段案例—制作音乐盒 4.1 认识盒子模型 盒子模型的概念 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 4.1 认识盒子模型 以手机盒子为例，更形象地认识CSS盒子模型 如