[2017-03-04]行内元素和块级元素使用浮动后的变化

最新推荐文章于 2022-09-28 21:36:17 发布

Helen嗨

最新推荐文章于 2022-09-28 21:36:17 发布

阅读量1.8k

点赞数 1

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/Cathy731946/article/details/60325243

版权

HTML/CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天做前端笔试题get到一个知识点，如下所示代码

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

实践了一下行内元素加浮动后的效果：

height=200px; width=0px;

【原因如下】

1. span标签不是块级元素，是不支持宽高的。但是style中有了 float:left; 使span变成块级元素支持宽高，height：100%，宽度由内容撑开

2. 但<i>是绝对定位，脱离了文档流，不占父级元素空间，所以span的width=0；