首页 > 代码库 > CSS中定位和浮动对行内元素的宽高的影响

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height。行内元素也会忽略宽高的设置。

但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用。

因为在以上三种情况下,行内元素的display从inline变为block

<style>span{    background-color:red;    width:100px;    height:100px;    float:left;}</style><span id=‘mySpan‘>AAAAA</span>    <script type="text/javascript">        var mySpan = document.getElementById(‘mySpan‘);        console.log(window.getComputedStyle(mySpan).getPropertyValue("display"));</script>

结果为:block

CSS中定位和浮动对行内元素的宽高的影响