手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

HTML div嵌套 margin不起作用

时间:2024-10-13 00:57:22

1、div嵌套的HTML代码

HTML div嵌套 margin不起作用

2、浏览器运行结果

HTML div嵌套 margin不起作用

3、有两个嵌套关系的div,如果外层div的父元素pad蟠校盯昂ding值为0,那么内层div的margin-top或荨层吒椋者margin-bottom的值会“转移”给外层div。解决该问题我们需要先了解ie特有的一个属性haslayout。下图中haslayout解释

HTML div嵌套 margin不起作用

4、下图是要实现的效果图解决辙清惨遂办法1、让父元素生成一个 block formating context,以下属性可以实现 float: left/right pos足毂忍珩ition: absolute display: inline-block overflow: hidden/auto2、给父元素添加border或者padding

HTML div嵌套 margin不起作用

5、以overflow:hidden方法为例代码如下图

HTML div嵌套 margin不起作用

6、以上方法逐一实验,均可实现下图效果

HTML div嵌套 margin不起作用

7、以上是本篇记录的全部内容,end

© 手抄报圈