100字范文 > 阿ken的HTML CSS的学习笔记_浮动与定位（笔记六）

阿ken的HTML CSS的学习笔记_浮动与定位（笔记六）

时间：2024-03-06 08:43:01

欢迎光临

你好

我是阿ken

文章目录

6.1_元素的浮动6.1.1_元素的浮动属性 float6.1.2_清除浮动 clear6.2_overflow 属性6.3_元素的定位6.3.1_元素的定位属性1. 定位模式2. 边偏移6.3.2_静态定位 static6.3.3_相对定位 relative6.3.4_绝对定位 absolute6.3.5_固定定位 fixed6.3.6_z-index 层叠等级属性？？？6.4_元素的类型与转换6.4.1_元素的类型1. 块元素2. 行内元素6.4.2_< span> 标记6.4.3_元素的转换 display6.5_阶段案例——制作网页焦点图6.5.1_分析效果图

做事情要讲究条理

要有效率

不要因为懒惰降低做事的速度

而且更要让自己忙碌一点

6.1_元素的浮动

布局看起来呆板、不美观，那么，如何对页面重新排版，这就需要为元素设置浮动。本节将对元素的浮动进行详细讲解。

6.1.1_元素的浮动属性 float

在 CSS 中，通过 float 属性来定义浮动，所谓元素的浮动是指设置了移动属性的元素会脱离标准文档流的控制。移动到其父元素中指定位置的过程。

其基本语法格式为:

选择器 {float: 属性值;}

float 的常用属性值：

案例：学习 float 属性的用法，

<!doctype html><html><head><meta charset="utf-8"><title>元素的浮动</title><style type="text/css">.father {background: #ccc; /*定义父元素的样式*/border: 1px dashed #999;}.box01, .box02, .box03 {/*定义 box01、 box02、 box03 三个盒子的样式*/height: 50px;width: 50px;background: #FF9;border: 1px solid #F33;margin: 15px;padding: 0px 10px;}p {/*定义段落文本的样式*/background: #FCF;border: 1px dashed #F33;padding: 0px 10px;}</style></head><body><div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div></div><p>12</p></body></html>

运行后，box01、box02、box03 及段落文本从上到下一一罗列。可见如果不对元素设置浮动，则该元素及其内部的子元素将按照标准文档流的样式显示，即块元素占据页面整行。

接下来以 box01 为设置对象，对其应用左浮动样式，具体CSS代码如下：

.box01 {/*定义box01左浮动*/float: left;}

运行后容易看出，设置左浮动的 box01 不再受文档流控制，出现在了一个新的层次上。

在上述案例的基础上，继续为 box02 设置左浮动，具体CSS代码如下。

.box01, .box02 {/*定义 box01、box02 左浮动*/float: left;}

上述代码运行后，box01、box02、box03 三个盒子整齐地排列在同一行，可见通过应用 " float: left " 样式可以使 box01 和 box02 同时脱离标准文档流的控制向左漂浮。

在上述案例的基础上，继续为box03设置左浮动，具体 CSS 代码如下：

.box01, .box02, .box03 {/*定义box01、box02、box03左浮动*/float: left;}

上述代码运行后，box01、 box02、 box03 三个盒子排列在同一行，同时，周围的段落文本将环绕盒子，出现了图文混排的网页效果。

需要说明的是，float 的另一个属性值 " right " 在网页布局时也会经常用到，它与 " Ieft " 属性值的用法相同但方向相反。应用了 " float: right; " 样式的元素将向右侧浮动，读者要学会举一反三。

注意:
对元素同时定义 float 和 margin-left 或 margin-right 属性时，在 IE6 浏览器中，出现的左外边距或右外边距将是所设置的 margin-left 或 margin-right 值的两倍，这就是网页中经常出现的 " IE6 双倍边距 " 问题。

6.1.2_清除浮动 clear

在网页中，由于浮动元素不再占用原文档流的位置，使用浮动时会影响后面相邻的固定元素。

例如上述刚才那个案例中定义完 box03 ，受到其周围元素浮动的影响，产生了位置上的变化。这时如果要避免浮动对其他元素的影响，就需要清除浮动。在 CSS 中，使用 clear 属性清除浮动，其基本语法格式如下。

选择器 {clear: 属性值; }

clear 的常用属性值：

案例：< p>标记应用 clear 属性来清除浮动元素对段落文本的影响，

<!doctype html><html><head><meta charset="utf-8"><title>清除元素的左浮动</title><style type="text/css">.father {/*定义父元素的样式*/background: #ccc;border: 1px dashed #999;}.box01, .box02, .box03 {/*定义box01、box02、box03三个盒子的样式*/height: 50px;line-height: 50px;background: #FF9;border: 1px solid #F33;margin: 15px;padding: 0px 10px;float: left; /*定义box01、box02、box03 左浮动*/}p {/*定义段落文本的样式*/background: #FCF;border: 1px dashed #F33;margin: 15px;padding: 0px 10px;clear: left; /*清除左浮动*//*上一行代码用于清除段落文本左侧浮动元素的影响*/}</style></head><body><div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</d1v><p>111</p></div></body></html>

运行后可以看出，清除段落文本左侧的浮动后，段落文本不再受到浮动元素的影响，而是按照元素自身的默认排列方式，独占一行，排列在浮动元素 box01、 box02、box03的下面。

**需要注意的是， clear 属性只能清除元素左右两侧浮动的影响。**然而在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，

案例：演示上述例子，

<!doctype html><html><head><meta charset="utf-8"><title>清除浮动</title><style type="text/css">.father {/*没有给父元素定义高度*/background: #ccc;border: 1px dashed #999;}.box01, .box02, .box03 {height: 50px;line-height: 50px;background: #f9c;border: 1px dashed #999;margin: 15px;padding: 0px 10px;float: left;/*定义box01、box02、box03三个盒子左浮动*/}</style></head><body><div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div></div></body></html>

上述代码为 box01、box02、box03 三个子盒子定义左浮动，同时，不给其父元素设置高度。

运行后，由于受到子元素浮动的影响，没有设置高度的父元素变成了一条直线，即父元素不能自适应子元素的高度了。

我们知道子元素和父元素为嵌套关系，不存在左右位置，所以使用 clear 属性并不能清除子元素浮动对父元素的影响。对于这种情况该如何清除浮动呢?具体介绍如下。

方法一: 使用空标记清除浮动

在浮动元素之后添加空标记，并对该标记应用 " clear:both " 样式，可清除元素浮动所产生的影响，这个空标记可以为 < div>、< p>、 < hr /> 等任何标记。

案例：演示使用空标记清除浮动的方法，

<!doctype html><html><head><meta charset="utf-8"><title>空标记清除浮动</title><style type="text/css">.father {/*没有给父元素定义高度*/background: #ccc;border: lpx dashed #999;}.box01, .box02, .box03 {height: 50px;line-height: 50px;background: #f9c;border:1px dashed 999;margin: 15px;padding: 0px 10px;float: left;/*定义box01、box02、box03三个盒子左浮动*/}.box04 {clear: both;}/*对空标记应用clear:both;*/</style></head><body><div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div><div class="box04"></div></div></body></html>

在浮动元素 box01、box02、box03 之后添加 class 为 box04 的空 div ，然后对 box04 应用 " clear: both; " 样式。

父元素被其子元素撑开了，即子元素的浮动对父元素的影响已经不存在。

需要注意的是，上述方法虽然可以清除浮动，但是在无形中增加了毫无意义的结构元素(空标记)，因此在实际工作中不建议使用。

(空标记)因此在实际工作中不建议使用。

方法二:使用 overflow 属性清除浮动

对元素应用 " overflow: hidden; " 也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。

案例：演示使用 overflow 属性清除浮动的方法，

<!doctype html><html><head><meta charset="utf-8"><title>overflow属性清除浮动</title><style type="text/css">/*没有给父元素定义高度*/.father {background: #ccc;border: 1px dashed #999;overflow: hidden; /*对父元素应用overflow:hidden;*/}.box01, .box02, .box03 {height: 50px;line-height: 50px;background: #f9c;border: 1px dashed #999;margin: 15px;padding: 0px 10px;float: left;/*定义box01、box02、box03三个盒子左浮动*/}</style></head><body><div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div></div></body></html>

对父元素应用 " overflow: hidden; " 样式来清除子元素浮动对父元素的影响。

父元素又被其子元素撑开了，即子元素浮动对父元素的影响已经不存在。

方法三: 使用 after 伪对象清除浮动

使用 after 伪对象也可以清除浮动，但是该方法只适用于 IE8 及以上版本浏览器和其他非 IE 浏览器。

另外，使用 after 伪对象清除浮动时需要注意：

(1) 必须为需要清除浮动的元素伪对象设置 " height: (); " 样式，否则该元素会比其实际高度高出若干像素。

(2) 必须在伪对象中设置 content 属性，属性值可以为空，如 " content：" " ; 。

案例：演示使用 after 伪对象清楚浮动的方法。

<!doctype html><htm1><head><meta charset="utf-8"><title>使用after伪对象清除浮动</title><style type="text/css">.father {/*没有给父元素定义高度*/background: #ccc;border: 1px dashed #999;}.father:after {/*对父元素应用after伪对象样式*/display: block;clear: both;content:"";visibility: hidden;height: 0;}.box01, .box02, .box03 {height: 50px;line-height: 50px;background: #f9c;border: 1px dashed #999;margin: 15px;padding: 0px 10px;float: left; /*定义box01、box02、box03三个盒子左浮动*/}</style></head><body><div class="father"><div class="box01">box01</d1v><div class="box02">box02</d1v><div class="box03">box03</div></div></body></html>

第 11 ~ 17 行代码用于为父元素应用 after 伪对象样式来清除浮动。

父元素又被其子元素撑开了，即子元素浮动对父元素的影响已经不存在。

6.2_overflow 属性

overflow 属性是 CSS 中的重要属性。当盒子内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要使用 overflow 属性，其基本语法格式如下。

选择器 {overflow: 属性值;}

overflow 的常用属性值：

案例：演示 overflow 属性的用法和效果，

<!doctype html><html><head><meta charset="utf-8"><title>overflow属性</title><sty1e type="text/css">div {width: 100px;height: 140px;background: #F99;overflow: visible; /*溢出内容呈现在元素框之外*/}</style></head><body><div>当盒子内的元素超出盒子自身的大小时，内容就会滥出，如果想要规范後出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式。</div></body></html>

第11行代码通过 " overflow：visible; " 样式，定义溢出的内容不会被修剪，而呈现在元素框之外。一般而言，并没有必要设定 overflow 的属性为 visible , 除非你想覆盖它在其他地方设定的值。

运行后可知，溢出的内容不会被修剪，而呈现在元素框之外。

如果希望溢出的内容被修剪，且不可见，可将 overflow 的属性值定义为 hidden 接下来，将第 11 行代码更改如下即可，

overflow: hidden;/*溢出内容被修剪，且不可见*/

运行后可以看出，使用 " overflow: hidden " 可以将溢出内容修剪，并且被修剪的内容不可见。

另外，如果希望元素框能够多自适应其内容的多少，在内容溢出时，产生滚动条，否则，则不产生滚动条，可以将 overflow 的属性值定义为 auto 。将第 11 行代码更改如下即可，

overflow: auto;/*根据需要产生活动条*/

运行后可发现，元素框的右侧产生了滚动条，拖动滚动条即可查看溢出的内容。当盒子中的内容减少时，滚动条就会消失。

值得一提的是，当定义 overflow 的属性值为 scroll 时，元素框中也会产生滚动条。将第 11 行代码更改如下即可，

overflow: scroll; /*始终显示滚动条*/

运行后可发现，元素框中出现了水平和竖直方向的滚动条。与 " overflow: auto; " 不同，当定义 " overflow: scroll; "时，不论元素是否溢出，元素框中的水平和竖直方向的滚动条都始终存在。

6.3_元素的定位

浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在 CSS 中，通过定位属性可以实现网页中元素的精确定位。下面，我们将对元素的定位属性及常用的几种定位方式进行详细讲解。

6.3.1_元素的定位属性

制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。元素的定位就是将元素放置在页面的指定位置，主要包括定位模式和边偏移两部分。

1. 定位模式

在 CSS 中，position 属性用于定义元素的定位模式，其基本语法格式如下。

选择器 {position: 属性值;}

position 属性的常用值：

从上表可以看出，定位的方法有多种，分别为静态定位 (static)、相对定位 (relative)、绝对定位 (absolute) 及固定定位 (fixed)，后面我们将对它们进行详细讲解。

2. 边偏移

定位模式 ( position ) 仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在 CSS 中，通过边偏移属性 top、bottom、left 或 right 来精确定义定位元素的位置。

边偏移设置方式：

从上表可以看出，边偏移可以通过 top、bottom、left、 right 进行设置，其取值为不同单位的数值或百分比，示例如下。

position: relative; /*相对定位*/left: 50px; /*距左边线50px*/top: 10px; /*距顶部边线10px*/

6.3.2_静态定位 static

静态定位是元素的默认定位方式，当 position 属性的取值为 static 时，可以将元素定位于静态位置。所谓静态位置就是各个元素在 HTML 文档流中默认的位置。

任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义 position 属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性 ( top、bottom、left 或 right ) 来改变元素的位置。

6.3.3_相对定位 relative

相对定位是将元素相对于它在标准文档流中的位置进行定位，当 position 属性的取值为 relative 时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

案例：演示对元素设置相对定位的方法和效果，

<!doctype html><html><head><meta charset="utf-8"><title>元素的定位</title><style type="text/css">body {margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; }.father {margin: 10px auto;width: 300px;height: 300px;padding: 10px;background: #ccc;border: 1px solid #000;}.child01, .child02, .child03 {width: 100px;height: 50px;line-height: 50px;background: #ff0;border: 1px solid #000;margin: 10px 0px;text-align: center;}.child02 {position: relative; /*相对定位*/left: 150px; /*距左边线150px*/top: 100px; /*距顶部边线100px*/}</style></head><body><div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div></body></html>

上述第 25 ~ 29 代码对 child02 设置相对定位模式，并通过边偏移属性 left 和 top 改变它的位置。

运行后不难看出，对 child02 设置相对定位后，它会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。

6.3.4_绝对定位 absolute

绝对定位是将元素依据最近的已经定位 ( 绝对、固定或相对定位 ) 的父元素进行定位，若所有父元素都没有定位，则依据 body 根元素 ( 浏览器窗口 ) 进行定位。当 position 属性的取值为 absolute 时，可以将元素的定位模式设置为绝对定位。

将 child02 的定位模式设置为绝对定位，即将第 25 ~ 29 行代码更改如下：

.child02 {position: absolute; /*绝对定位*/left: 150px; /*距左边线150px*/top: 100px; /*距项部边线100px*/}

上述代码中，设置为绝对定位的元素 child02 ，依据浏览器窗口进行定位。并且，这时 child03 占据了 child02 的位置，即 child02 脱离了标准文档流的控制，不再占据标准文档流中的空间。

在上面的案例中，对 child02 设置了绝对定位，当浏览器窗口放大或缩小时，child02 相对于其直接父元素的位置都将发生变化。当缩小浏览器窗口时，很明显 child02 相对于其直接父元素的位置发生了变化。

然而在网页中，一般需要子元素相对于其直接父元素的位置保持不变，即子元素依据其直接父元素绝对定位，如果直接父元素不需要定位，该怎么办呢?

对于上述情况，可将直接父元素设置为相对定位，但不对其设置偏移量，然后再对子元素应用绝对定位，并通过偏移属性对其进行精确定位。这样父元素既不会失去其空间，同时还能保证子元素依据直接父元素准确定位。

案例：演示子元素依据其直接父元素准确定位的方法，

<!doctype html><html><head><meta charset="utf-8"><title>子元素相对于直接父元素定位</title><style type="text/css">.father {margin: 10px auto;width: 300px;height: 300px;padding: 10px;background: #ccc;border: 1px solid #000;position: relative; /*相对定位，但不设置偏移量。*/}.child01, .child02, .child03 {width: 100px;height: 50px;line-height: 50px;background: #ff0;border: 1px solid #000;margin: 10px 0px;text-align: center;}.child02 {position: absolute; /*绝对定位*/left: 150px; /*距左边线150px*/top: 100px; /*距顶部边线100px*/}</style></head><body><div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div></div></body></html>

在上述代码中，代码用于对父元素设置相对定位，但不对其设置偏移量。同时，代码用于对子元素 child02 设置绝对定位，并通过偏移属性对其进行精确定位。

运行后，子元素相对于父元素进行偏移。这时，无论如何缩放浏览器的窗口，子元素相对于其直接父元素的位置都将保持不变。

注意:

(1) 如果仅设置绝对定位，不设置边偏移，则元素的位置不变，但其不再占用标准文档中的空间，与上移的后续元素重叠。

(2) 定义多个边偏移属性时，如果 left 和 right 冲突，以 left 为准，top 和 bottom 冲突，以 top 为准。

6.3.5_固定定位 fixed

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当 position 属性的取值为 fixed 时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。但是，由于 IE6 不支持固定定位，因此，在实际工作中较少使用，我们在这里暂不做详细介绍。

6.3.6_z-index 层叠等级属性

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在 CSS 中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用 z-index 层叠等级属性，其取值可为正整数、负整数和0。z-index 的默认属性值是 0 ，取值越大，定位元素在层叠元素中越居上。

注意:

z-index 属性仅对定位元素生效。

？？？

6.4_元素的类型与转换

接下来，我们将对元素的类型与转换进行详细讲解。

6.4.1_元素的类型

HTML 标记语言提供丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML 标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。了解它们的特性可以为使用 CSS 设置样式和布局打下基础，具体如下：

1. 块元素

块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有 < h1> ~ < h6>、< p>、 < div>、< ul>、< ol>、< li> 等，其中< div>标记是最典型的块元素。

2. 行内元素

行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有 < strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< a>、 < span> 等，其中 < span> 标记是最典型的行内元素。

案例：进一步认识块元素与行内元素，

<!doctype html><html><head><meta charset="utf-8"><title>块元素和行内元素</title><style type="text/css">h2 {/*定义h2的背景颜色、宽度、高度、文本水平对齐方式*/background: #FCC;width: 350px;height: 50px;text-align: center;}p {background: #090; } /*定义P的背景颜色*/strong {/*定义strong的背景颜色、宽度、高度、文本水平对齐方式*/background: #FCC;width: 360px;height: 50px;text-align: center;}em {background: #FFO; } /*定义em的背景颜色*/del {background: #CCC; } /*定义del的背景颜色*/</style></head><body><h2>h2 标记定义的文本。</h2><p>p 标记定义的文本。 </P><strong>strong 标记定义的文本。</strong><em>em 标记定义的文本。 </em><del>del 标记定义的文本。</del></body></html>

在上述案例中，首先使用块标记 < h2>、< p> 和行内标记 < strong>、< em>、< del>定义文本，然后对它们应用不同的背景颜色，同时，对 < h2> 和 < strong> 应用相同的宽度、高度和对齐属性。

运行后可以看出，不同类型的元素在页面中所占的区域不同。块元素 < h2> 和 < p> 各自占据一个矩形的区域，虽然 < h2> 和 < p> 相邻，但是它们不会排在同一行中，而是依次竖直排列，其中，设置了宽高和对齐属性的 < h2> 按设置的样式显示，未设置宽高和对齐属性的 < p> 则左右撑满页面。然而行内元素 < strong>、< em> 和 < del> 排列在同一行，遇到边界则自动换行，虽然对 < strong> 设置了和 < h2> 相同的宽高和对齐属性，但是在实际的显示效果中并不会生效。

值得一提的是，行内元素通常嵌套在块元素中使用，而块元素却不能嵌套在行内元素中。例如，可以将上述案例中的 < strong>、< em> 和 < del> 嵌套在 < p> 标记中，代码如下。

<p><strong>strong 标记定义的文本。</strong><em>em 标记定义的文本。</em><del>del 标记定义的文本。</del></p>

运行后可以看出，当行内元素嵌套在块元素中时，就会在块元素上占据一定的范围，成为块元素的一部分。

总结：块元素通常独占一行 ( 逻辑行 )。可以设置宽高和对齐属性，而行内元素通常不独占一行，不可以设置宽高和对齐属性。行内元素可以嵌套在块元素中，而块元素不可以嵌套在行内元素中。

注意:

在行内元素中有几个特殊的标记 ——— < img /> 和 < input />，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

6.4.2_< span> 标记

与 < div> 一样， < span> 也作为容器标记被广泛应用在 HTML 语言中。和< div > 标记不同的是 < span> 是行内元素，< span> 与 < /span>之间只能包含文本和各种行内标记，如加粗标记 < strong>、倾斜标记 < em> 等，< span> 中还可以嵌套多层 < span> 。

< span> 标记常用于定义网页中某些特殊显示的文本，配合 class 属性使用。它本身没有固定的格式表现，只有应用样式时，才会产生视觉上的变化。当其他行内标记都不合适时，就可以使用 < span> 标记。

案例：演示 < span> 标记的使用，

<!doctype html><html><head><meta charset="utf-8"><title>span 标记</title><style type="text/css">#header {/*设置当前div中文本的通用样式*/font-family: "黑体";font-size: 14px;color: #FFA500;}.huanzhi {/*控制第1个span中的特殊文本*/color: #515151;font-size: 20px;padding-right: 20px;}.course {/*控制第2个span中的特殊文本*/font-size: 18px;color: #87CEEB;}</style></head><body><div id="header"><span class="huanzhi">阿ken的CSDN</span>欢迎光临<span class="course">点击进入</span>，欢迎光临!</div></body></html>

上述代码中使用 < div> 标记定义一些文本，并且在 < div> 中嵌套两对 < span>，用于控制某些特殊显示的文本，然后使用 CSS 分别设置它们的样式。

运行后特殊显示的文本都是通过 CSS 控制 < span> 标记设置的。

运行后可以看出，< span> 标记可以嵌套于 < div> 标记中，成为它的子元素，但是反过来则不成立，即 < span> 标记中不能嵌套 < div> 标记。从 < div> 和 < span> 之间的区别和联系，可以更深刻地理解块元素和行内元素。

6.4.3_元素的转换 display

网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，如可以设置宽高，或者需要块元素具有行内元素的某些特性，如不独占一行排列，可以使用 display 属性对元素的类型进行转换。

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

inline: 此元素将显示为行内元素 ( 行内元素默认的 display 属性值 )。

block: 此元素将显示为块元素 ( 块元素默认的 display 属性值 )。

inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。

none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

案例：演示 display 属性的用法和效果，

<!doctype html><html><head><meta charset="utf-8"><title>元素的转换</title><style type="text/css">div, span {/*同时设置div和span的样式*/width: 200px; /*宽度*/height:50px; /*高度*/background: #FCC; /*背景颜色*/margin: 10px; /*外边距*/}.d_one, .d_two {display: inline; } /*将前两个div转换为行内元素*/.s_one {display: inline-block; } /*将第一个span转换为行内块元素*/.s_three {display: block; } /*将第三个span转换为块元素*/</style></head><body><div class="d_one">第一个 div 中的文本</div><div class="d_two">第二个 div 中的文本</div><div class="d_three">第三个 div 中的文本</div><span class="s_one">第一个 span 中的文本</span><span class="s_two">第二个 span 中的文本</span><span class="s_three">第三个 span 中的文本</span></body></html>

上述代码中，定义了三对 < div> 和三对 < span> 标记，为它们设置相同的宽度、高度、背景颜色和外边距。同时，对前两个 < div> 应用 " display:inline; " 样式，使它们从块元素转换为行内元素，对第一个和第三个 < span> 分别应用 " display：inline-block; " 和 " display:inline; " 样式，使它们分别转换为行内块元素和行内元素。

运行后可以看出，前两个 < div> 排列在了同一行，靠自身的文本内容支撑其宽高，这是因为它们被转换成了行内元素。而第一个和第三个< span> 则按固定的宽高显示，不同的是前者不会独占一行，后者独占一行，这是因为它们分别被转换成了行内块元素和块元素。

在上面的案例中，使用 display 的相关属性值，可以实现块元素、行内元素和行内块元素之间的转换。如果希望某个元素不被显示，还可以使用 " display: none; " 进行控制。例如，希望上面案例中的第三个 < div> 不被显示，可以在 CSS 代码中增加如下样式。

.d_three {display: none; } /*隐藏第三个div*/

运行代码后可以看出，当定义元素的 display 属性为 none 时，该元素将从页面消失，不再占用页面空间。

注意:

根据上述案例运行结果可以发现，前两个 < div> 与第三个 < div> 之间的垂直外边距，并不等于前两个 < div> 的 margin-bottom 与第三个 < div> 的 margin-top 之和。这是因为前两个 < div> 被转换成了行内元素，而行内元素只可以定义左右外边距，定义上下外边距时无效。

6.5_阶段案例——制作网页焦点图

为了使读者更好地运用浮动与定位组织页面，本节将通过案例的形式分步骤制作一个网页焦点图。

6.5.1_分析效果图

下面这个因为一些原因回头重新整理一下

结构分析
观察效果图6-26不难看出，焦点图模
块整体上可以分为3部分:焦点图、切换图
际、切换按钮。焦点图可以使用标记:
切换图标由6个小图标组成，可以使用无序
列表
、搭建结构; 焦点图切换按钮
<由>概套心标记
可以使用两个标记定义。效果图6-26
对应的结构如图6-28所示。
图6-28焦点图页面结构图
2.样式分析
控制效果图6- 26的样式主要分为4个部分，具体如下。
(1)通过
对整个页面进行整体控制，需要设置相对定位方式。
(2)通过标记控制左右两侧的切换按钮样式及其位置，并设置左浮动样式。(3)通过
>整体控制切换图标模块，需要设置绝对定位方式。
(4)通过
控制每一个切换小图标，需要设置每个小图标的显示效果。6.5.2制作页面结构
根据上面的分析，使用相应的HTML标记搭建网页结构，如例6-13 所示。例6-13example 13.html
1
<!doctype html>
2
3
4
5车载音乐页面
6
7
<imgsrc-=“images/11.1Pg” alt=“车救音乐”><ahref="#"class=“ieft”>
11
<a href="#""class=“right”>
12
13
<1 class= “max”</112
我就是天花板 19:59:44
14
<1i></11>
15
<1i></1i>
16
<1i></11>
06
17
<1i></11>
<1i></11>
20
21
22
在例6-13中，通过最外层的
对车载音乐页面进进行整体控制，并使用标记插入焦点图片。同时，定义das为let和nghrt的两对<2>标记，来搭建焦点图左右两侧切换按钮的结构。另外，使用<u2、搭建切换图标模块的。个小图标。
运行例6-13，效果如图6-29 所示。
口月页焦点杰页面
★三
歌卓推荐
好歌
一路相伴Music witn YOU础1选1车1载1音1乐
s2
图6-29 HTML 结构页面效果
EnaR
6.5.3定义CSS样式
搭建完页面的结构，接下来为页面添加CSS样式。本节采用从整体到局部的方式实现图6- 26和图6-27所示的效果，具体如下。
1.定义基础样式
首先定义页面的统一样式，具体CSS代码如下。
/重置浏览器的默认样式/
*(margin:O; padding:0; border:0; list-style:none;}
/全局控制/
altext-decoration:none; font-size:30px; colo:ff;1
2.控制整体大盒子
制作页面结构时，我们定义了对/小米对网页焦点图模块进行整体控制，设置其宽度和高度固定。由于切换按钮和切换图标需要依据大盒子进行定位，所以需要对其设做
我就是天花板 20:00:26
相对定位方式。另外，为了使页面在浏览器中居中，可以对其应用外边距属性margin,具体CSS代码如下。
divl
width:580px;
/整体控制页面/
height:200px;
20
margin:50px auto;
position:relative;
/设置相对定位/
3.整体控制左右两边的切换按钮
通过效果8图-27可以看出，当鼠标移上租人图时，图片两侧会添加售点图切协校钮，萧交为心小元表应用Rox风性，并设置宽高、背景色。另外，切换按钮显示为圆角、华送明改果，需要对其设置圆角边框样式，
并设置背最的不透明度。同时，设置切换按钮中的又不杆式。最后，通过“ispaynone,"设置按钮隐藏，具体Css代码如下。
al
/整体控制左右两边的切换按钮/
float:left;
width:25px;
height:90px;
line-height:90px;
background:#333;
opacity:0. 7;
/设置元素的不透明度/
border-radius:4px;
text-align:center;
display:none;
/把a元素隐藏起来/
cursor :pointer;
/把鼠标指针变成小手的形状/
4.控制左右两侧切换按钮的位置和状态
由于左右两侧的切换按钮位置不同，需要分别对其进行绝对定位，并设置不同的偏移量。另外，当鼠标移上焦点图时，图片两侧的切换按钮将会显示，需要对其应用"display,block,"样式，具体CSs代码如下。
. left{
/控制左边切换按钮的位置/
position:absolute;
left:-12p%;
top:60px;
.right{
/控制右边切换按钮的位置/
position:absolute;
right:-12px;
top:60px;

胜利的天平并不会因此格外向他倾斜，但人心会。

再见

我是阿ken

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。