学科分类
目录
HTML5+CSS3

元素类型的转换

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

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

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

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

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

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

使用display属性可以对元素的类型进行转换,使元素以不同的方式显示。

示例代码如下:

 1 <title>元素的转换</title>

 2 <style type="text/css">

 3 div,span{          /*同时设置div和span的样式*/   

 4 width:200px;      /*宽度*/

 5 height:50px;      /*高度*/

 6 background:#FCC;    /*背景颜色*/

 7 margin:10px;      /*外边距*/

 8 }

 9 .d_one,.d_two{display:inline;}   /*将前两个div转换为行内元素*/

 10 .s_one{display:inline-block;}    /*将第一个span转换为行内块元素*/

 11 .s_three{display:block;}      /*将第三个span转换为块元素*/

</style>

在上面的例子中,定义了三对<div>和三对<span>标签,为它们设置相同的宽度、高度、背景颜色和外边距。同时,对前两个<div>应用“display:inline;”样式,使它们从块元素转换为行内元素,对第一个和第三个<span>分别应用“display: inline-block;”和“display:inline;”样式,使它们分别转换为行内块元素和行内元素。示例代码运行效果如图1所示。

img

图1 元素的转换

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

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

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

保存HTML页面,刷新网页,效果如图2所示。

img

图2 定义display为none后的效果

从图2可以看出,当定义元素的display属性为none时,该元素将从页面消失,不再占用页面空间。

注意:

行内元素只可以定义左右外边距,当定义上下外边距时无效。

点击此处
隐藏目录