浮動引起元素變成行內(nèi)塊元素-display:inline-block

題目:span標簽的width和height分別為多少?
A. width = 0px,height = 0px
B. width = 400px,height = 200px
C. width = 100px,height = 50px
D. width = 0px,height = 200px

<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>

效果:
div正常寬高
span{width:0;height:200px}
i{width:100px;height:50px}

  • 所有元素經(jīng)過浮動變?yōu)?strong>行內(nèi)塊元素 -- span不是塊級元素,不支持寬高,浮動后支持寬高,height:100% 即是200px。i中絕對定位,脫離文檔流,不占父級空間,所以span的width:0;
  • 上面解析:W3C中,float會使元素產(chǎn)生塊級框,可以理解為inline-block;但是inline-block元素之間會默認產(chǎn)生空白符,而flaot之間沒有。雖然float脫離了文檔流,但是div仍然是span的父元素,因此height:100%;也就是繼承了父元素div的高度200px。i設(shè)置了postion,脫離了文檔流,并不影響父元素,所以span的width:0px;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容