一个例题:浮动引起元素变成行内块元素-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}

  • 所有元素经过浮动变为行内块元素 -- span不是块级元素,不支持宽高,浮动后支持宽高,height:100% 即是200px。i中绝对定位,脱离文档流,不占父级空间,所以span的width:0;
  • 上面解析:W3C中,float会使元素产生块级框,可以理解为inline-block;但是inline-block元素之间会默认产生空白符,而flaot之间没有。虽然float脱离了文档流,但是div仍然是span的父元素,因此height:100%;也就是继承了父元素div的高度200px。i设置了postion,脱离了文档流,并不影响父元素,所以span的width:0px;


作者:梁海杰_IRV
链接:https://www.jianshu.com/p/99a4e1434dd3
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM