<span>的宽高到底是多少?

<div style="width:400px;height:200px;">
   <span style="float:left;width:auto:height:100%">
    <i style="position:absolute;float:left;width:100px;height:50px;">hello</i>
   </span>
</div>

问题是span标签的width和height分别为多少?
第一次见时毫无解答思路,只瞎猜是宽100px、高200px。理由是宽由i元素撑开,高继承自父元素div200px。

先说答案,宽为0,高为200px,先看题目中考察了哪些点:

①span是行内元素,宽高的设置是无效的;
②float会使元素变成块级元素,此时span的宽高又有效了;
   应为宽0,高200px(宽度100%由内容撑开);

③再看i元素,它是绝对定位,不占用父元素空间,那就没有内容来撑起span的width,span宽度为0;
④在去除了i元素的绝对定位后,可以很清楚的看出i撑起了span的宽度,如下图一;
⑤在恢复i元素的绝对定位后,span的宽度为0,如下图二;

position: absolute;绝对定位,会脱离文档流,使用后span里都没有元素来撑起它了怎么可能还有宽度。如果想让span看起来有宽高,那么通过display:inline-block/block;把它变成块或者行内块元素吧。然后设置width属性。

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页