当给一个display: inline的元素设置position: absolute 或者 float: left | right后,该元素的display的计算值会变味display: block,表现出块级元素的特性,可以为其设置width、height等属性。
下面验证一下:
html代码:
<span>我是一个span元素,display的原始值为inline</span>
1.设置position: absolute
css代码:
span {
position: absolute;
width: 400px;
height: 80px;
background-color: red;
}
在chrome中的渲染结果如下:
2.设置float: left
css代码:
span {
float: left;
width: 400px;
height: 80px;
background-color: red;
}
在chrome中的渲染结果如下: