网页由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元
素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例
如不独占一行排列，可以使用 display 属性对元素的类型进行转换。
display 属性常用的属性值及含义如下。
● inline：此元素将显示为行内元素（行内元素默认的 display 属性值）。
● block：此元素将显示为块元素（块元素默认的 display 属性值）。
● inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，
但该元素不会独占一行。
● none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。
使用 display 属性可以对元素的类型进行转换，使元素以不同的显示。
示例代码如下：
<title>元素的转换</title>
<styletype="text/css">
div,span{/*同时设置 div 和 span 的样式*/
width:200px;/*宽度*/
height:50px;/*高度*/
background:#FCC;/*背景颜色*/
margin:10px;/*外边距*/
}
.d_one,.d_two{display:inline;}/*将前两个 div 转换为行内元素*/
.s_one{display:inlineblock;}/* 将个 span 转换为行内块元素*/
.s_three{display:block;}/*将第三个 span 转换为块元素*/
</style>
在上面的例子中，定义了三对<div>和三对<span>标签，为它们设置相同的宽度、
高度、背景颜色和外边距。同时，对前两个<div>应用“display:inline;”样式，使它
们从块元素转换为行内元素，对个和第三个<span>分别应用“display:inline-block;”
和“display:inline;”样式，使它们分别转换为行内块元素和行内元素。示例代码运行
如图 1 所示。
1
评论0
最新资源