HTML+CSS+JavaScript项目4 “儿童摄影网”首页面制作_0615_连蕊.pptVIP

需求分析 在前面的章节中介绍CSS属性时，经常会提到“仅适用于块级元素”，那么究竟什么是块级元素，在HTML标记语言中元素又是如何分类的呢？下面将对元素的类型与转换进行详细讲解。 【任务4-3】元素的类型与转换 1 元素的类型 2 span标记 3 元素的转换 【任务4-3】知识储备 1、元素的类型 HTML标记一般分为块标记和行内标记两种类型，它们也称块元素和行内元素。具体如下： （1）块元素 块元素在页面中以区域块的形式出现，其特点是： 独自占据一整行或多行； 可对其设置宽度、高度、对齐等属性； 可以容纳行内元素和其他块元素。 常见的块元素有h1~h6、p、div、ul、ol、li等，其中div标记是最典型的块元素。 【任务4-3】知识点讲解 1、元素的类型 （2）行内元素 行内元素也称内联元素或内嵌元素，其特点是： 和其它行内元素都在同一行上显示，不会独自换行； 宽度就是它的文字或图片的宽度，默认不可改变； 设置高度height无效，可以通过line-height来设置； 设置margin只有左右margin有效，上下无效； 设置padding只有左右padding有效，上下则无效； 只能容纳文本或者其它行内元素。 【任务4-3】知识点讲解 1、元素的类型 在行内元素中有几个特殊的标记——img /、input /、td，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。 注意： 【任务4-3】知识点讲解 2、span标记 span在CSS定义中属于一个行内元素，span与/span之间只能包含文本和各种行内标记。span标记没有固定的表现形式，通常可配合class属性使用，当对它应用样式时，才会产生视觉上的变化。与div元素相比，通常可能通俗地理解为div为大容器，span为小容器，大容器内可以放置小容器。 【任务4-3】知识点讲解 3、元素的转换 使用display属性对块元素和行内元素进行转换。其属性值及含义如下表所示： 属性值 含义 inline 此元素显示为行内元素（行内元素默认display属性值）。 block 此元素显示为块元素（块元素默认display属性值）。 inline-block 此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。 none 此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。 【任务4-3】知识点讲解 1 块元素垂直外边距的合并 【任务4-3】知识拓展 1、块元素垂直外边距的合并 垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距等于两个发生合并的外边距中的较大者。垂直外边距的合并被分为两类，分别为相邻块元素垂直外边距的合并和嵌套块元素垂直外边距的合并，下面针对这两种情况做具体分析。 【任务4-3】知识拓展 1、块元素垂直外边距的合并 （1）相邻块元素垂直外边距的合并 当垂直方向两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距时，它们之间的垂直距离是较大的那个外边距，而不是两者之和。 【任务4-3】知识拓展 1、块元素垂直外边距的合并 （2）嵌套块元素垂直外边距的合并 对于父元素中嵌套子元素的情况，如果未对父元素设置上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。 【任务4-3】知识拓展 需求分析 在网页中，文档流是以默认的方向即从上到下、从左往右流动的，如果是行内元素，当创建完一个元素后，可在其右侧继续创建其它元素；对于块元素而言，在创建完一个元素后，会在其下方继续创建其它元素。通常，采用这种默认的文档流搭建的结构看起来死板、不美观，达不到预期的效果。通过引入CSS中的浮动样式可以进行更多样化的布局。 【任务4-4】元素的浮动 1 元素的浮动属性 2 清除浮动 【任务4-4】知识储备 1、元素的浮动属性 在CSS中，通过float属性来定义浮动，所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。其基本语法格式如下： 常用的float属性值及含义为： left：对象居左浮动，文本流向对象的右侧。 right：对象居右浮动，文本流向对象的左侧。 none：对象不浮动，该值为默认值。 选择器{float:属性值;} 【任务4-4】知识点讲解 2、清除浮动 在网页中，当一个元素被设为浮动后，就不再占用原文档流的位置，与该元素相邻的其他元素，会受浮动的影响，产生位置上的变化。这时，如果要避免浮动对其他元素的影响，就需要清除浮动。在CSS中，使用clear属性清除浮动，其基本语法格式如下： 常用的clear属性值及含义为： left：清除左侧浮动的影响。 right：清除右侧浮动的影响。