題目:span標(biāo)簽的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元素之間會默認(rèn)產(chǎn)生空白符摩钙,而flaot之間沒有。雖然float脫離了文檔流追葡,但是div仍然是span的父元素腺律,因此
height:100%;
也就是繼承了父元素div的高度200px奕短。i設(shè)置了postion
宜肉,脫離了文檔流,并不影響父元素,所以span的width:0px;