关于css:关于两个图片相嵌显示出包含的效果存在外图片的边框

42次阅读

共计 484 个字符，预计需要花费 2 分钟才能阅读完成。

这是咱们这题的代码：
<style>

    #bg1 {background: url(./bg_border.jpg);
        height: 1000px;
    }

    #bg2 {background: url(./bg_poem.jpg);
        height: 1000px;
    }
</style>

<body>

<div id="bg1">
    <div id="bg2">  
    </div>
</div>

</body>

当两个 DIV 相嵌，我给两个 div 都引入了图片
会出先几种状况
①：
这是什么属性都没有增加，只会显示 #bg2 的引入图片
②: 当我给 #bg2 增加内边距时，会把整个盒子撑大，然而咱们还是看不到#bg1 的图片
③: 当我给 #bg2 增加外边距是，左右的可能显示出#bg1 的图片，高低不会显示（这点前面会给解释）
④: 当我 #bg1 增加外边距时, 盒子大小会产生扭转，因为是一般盒子，盒子被撑大了
解决：⑤: 当我给 #bg1 增加内边距时，达到了咱们想要的成果，如图显示:

这一点是 css 比拟常见的问题，两个容易互相嵌套时，咱们尽量去设置里面容器的内边距而后去扭转内容器的地位(内容器也相当于是盒子模型外面的文本 padding 就是文本到边框的间隔)

正文完