HTML中div嵌套div的margin不起浸染的办理要领
|
下面先容一下div嵌套div时margin不起浸染的办理方案。 趁便科普下margin的界说和用法。 div嵌套的HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background-color: dodgerblue; } .box{ width: 300px; height: 300px; margin: 30px; background-color: gray; } .box .child{ width: 200px; height: 200px; margin: 50px; background-color:darkturquoise; } </style> </head> <body> <div class="box"> <div class="child"> </div> </div> </body> </html> 现实结果： 这着实不是我们想要的结果，先来说下为什么会呈现这个题目： 有两个嵌套相关的div，假如外层div的父元素padding值为0，那么内层div的margin-top可能margin-bottom的值会“转移”给外层div。 办理该题目我们必要先相识ie特有的一个属性haslayout。 我们要实现的结果是这样的： 最后我们来说一下办理要领： 1、让父元素天生一个block formating context（块级名目化上下文，可自行百度相识），以部属性可以实现 float: left/right position: absolute display: inline-block overflow: hidden/auto 2、给父元素添加border可能padding 以要领一的overflow:hidden为例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background-color: dodgerblue; } .box{ width: 300px; height: 300px; margin: 30px; background-color: gray; overflow: hidden; } .box .child{ width: 200px; height: 200px; margin: 50px; background-color:darkturquoise; } </style> </head> <body> <div class="box"> <div class="child"> </div> </div> </body> </html> 最终结果： 到此这篇关于HTML中div嵌套div的margin不起浸染的办理要领的文章就先容到这了,更多相干html时div嵌套div的margin不起浸染内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
