标记之间有什么不同

Question

我很困惑这个标记之间有什么不同。

<div class="pic">   
<img src="http://www.lorempixel.com/333/333" alt="">
</div>

CSS

.pic {
width: 600px;
background: red;
}

现在我可以看到我的背景，但是当我做了另一个像下面的标记时......我无法弄明白......

另一个标记：

<img class="pic" src="http://www.lorempixel.com/333/333" alt="">

相同的风格..

Answer 1

第一种情况：

.pic {
width: 600px;
background: red;
}

<div class="pic">   
<img src="http://www.lorempixel.com/333/333" alt="">
</div>

这里img元素在div标签内，你已经为div指定了一些css，即.pic，其中包含分配给div标签的宽度600px。

并且img标签在div标签内部加载，它需要一些大小。 这个图像大小超过600px，所以你可以看到背景颜色。如果它大于600px，它也会从那个div中出来。

第二种情况：

.pic {
width: 600px;
background: red;
}

<img class="pic" src="http://www.lorempixel.com/333/333" alt="">

这里你直接将css分配给img标签。所以img标签的宽度为600px。所以我们在这里看不到任何背景颜色。