本篇主要是 div嵌套时margin不起作用的解决方案。本人新手,用于学习记录,有错误请指出,只有这样才能共同进步,谢谢。顺便科普下margin的定义和用法。
工具/原料
1
WebStorm
2
Chrome浏览器
方法/步骤
1
div嵌套的HTML代码
2
浏览器运行结果
3
有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。解决该问题我们需要先了解ie特有的一个属性haslayout。下图中haslayout解释
4
下图是要实现的效果图解决办法1、让父元素生成一个 block formating context,以下属性可以实现 float: left/right position: absolute display: inline-block overflow: hidden/auto2、给父元素添加border或者padding
5
1.以overflow:hidden方法为例代码如下图
6
以上方法逐一实验,均可实现下图效果
7
以上是本篇记录的全部内容,end