div的疑惑

知乎上的一个原题

<style>
    div{position: absolute;}
    #main{position: relative;}
    img{ display: block; width:100%; height:100%}
</style>

<body>
    <div id="main">
        <div id="box1">
            <div><img src="CTA.png" alt=""></div>
            <div><img src="CTAOver.png" alt=""></div>
        </div>
        <div id="box2">
            <img src="logo.png" alt="">
        </div>
    </div>
</body>

上面的这段代码中出现的效果是box2中的logo 显示了，box1中的两张图片都没显示，如果将img的样式width:100%; height:100%;去掉就能都显示了，为什么会出现这种不一致的情况呢？

阅读 3.1k

原因两点：
* 跟绝对定位有关系！
* 图片的宽高值。

首先看两个定义：

网页中的<img>元素它是replaced element，也就是可替换元素。在W3C的说明中已经说的很清楚，如果你不给他设定宽高度，他会以根据src属性生成的图片自身宽高度来作为他的宽高；如果你给他设置了宽高，那么他会以你设置的宽高作为他在页面上展示的宽高。

还有一个定义，BFC。#box1是绝对定位，所以他生成了一个BFC，在BFC元素中的元素会自动从左到右依次排列。但是它下面的子元素div由于又设定了绝对定位，所以他又会生成一个BFC，这个里面的div大小会根据他下面的img给撑起来。

继续看这个问题，一开始设定图片的宽高为100%，这个100%的作用肯定是用来让图片全部铺满父元素的；只可惜他的父元素是一个没有宽高的空的，所以图片的展示效果也就是看不到了。

当你把图片的宽高100%去掉之后，这个可替换元素的宽高会自动变成图片自身的宽高，也就会出现了。

div的疑惑

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

css布局怎么保证右边一直在可视范围内？