Maison > interface Web > tutoriel HTML > "margin塌陷现象"div盒子嵌套盒子外边距合并现象_html/css_WEB-ITnose

"margin塌陷现象"div盒子嵌套盒子外边距合并现象_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:29:28
original
1029 Les gens l'ont consulté

问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” 。header2 设定background=“blue” ,同时给heder1 设定margin-top:10px; 预想的是内层 heder1div 的上边距 maindiv 上边有10px的距离 但事实上 出现一个问题 ,内层div 并没有出现他所预想的那种效果,实际效果是 maindiv 仍然紧贴内层div 整个maindiv 上边框距离浏览器上边 增加了10px 的外边距”

问题描述代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    *{margin: 0;padding: 0;}    .main{        width: 400px;        height: 400px;        background: pink;    }    .header1{        width: 150px;        height: 150px;        background-color: red;<br />        margin-top:10px;    }    .header2{        width: 150px;        height: 150px;        background-color: blue;    }    </style></head><body><div class="main"><div class="header1">    </div><div class="header2">    </div>    </div>    </body></html>
Copier après la connexion

解决方案:

1、在父级加入overflow:hidden;

2、在父级用padding-top

3、在父级加position:absolute;

在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠。最终的margin值计算方法如下:
a、全部都为正值,取最大者;
b、不全是正值,则都取绝对值,然后用正值减去最大值;
c、没有正值,则都取绝对值,然后用0减去最大值。
注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

 

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal