"margin塌陷现象"div盒子嵌套盒子外边距合并现象
问题描述：原型大概是“一个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;
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>
解决方案：
1、在父级加入overflow：hidden；
2、在父级用padding-top
3、在父级加position：absolute；
在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
"margin塌陷现象"div盒子嵌套盒子外边距合并现象的更多相关文章
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- 为什么margin-top不是作用于父元素【margin外边距合并问题】
coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...
- CSS外边距合并&块格式上下文
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...
- CSS 基础 例子 盒子模型及外边距塌陷
我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...
- CSS外边距合并（塌陷/margin越界）
原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...
- css盒子模型、垂直外边距合并
css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
- css的外边距合并或者外边距塌陷问题
第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...
- margin 外边距合并问题
一.兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二.嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框 ...
随机推荐
- Python标准库：内置函数classmethod(function)
把类函数当作类的一个方法返回. 类方法第一个參数是指明类,跟类中函数一样,第一个參数是指明类实例. 类方法修饰符採用以下的格式来使用: class C: @classmethod def f(cls, ...
- error: ‘for’ loop initial declarations are only allowed in
使用gcc,出现如下错误: thread_join.c:7:5: error: 'for' loop initial declarations are only allowed in C99 mode ...
- vmware tools 安装
转到虚拟机 > 安装 VMware Tools(或 VM > 安装 VMware Tools).注意:如果您运行的是轻量版的 Fusion.不带 VMware Tools 的 Workst ...
- 开始我的.NET的学习旅程
今天开始了我的.NET学习之旅,终于弄懂了.NET与C#的关系,一开始还以为它们就是一个东西,原来不是那样的,C#只是基于.NET平台环境下运行的一种语言,.NET不止可以运行C#语言,更可以运行其他 ...
- HTML之学习笔记（二）颜色体系
html页面的颜色表示法有三种:英文表示,16进制表示和10进制表示.颜色通过三原色即红.绿.蓝三种按比例混合而成,如红色的10进制表示为255,0,0,即按照红色.绿色.蓝色的格式,权值取0~255 ...
- PDO扩展使用方法
pdo扩展为php访问数据库提供了一个轻量级的一致接口,pdo提供了一个数据访问抽象层,这意味着不管使用哪种数据库,都可以使用相同的函数来查询和获取数据. $dbms='mysql'; //数据库类型 ...
- HDU 2157 - How many ways??
给图,图中任意可达的两点间步数为1 问从图中A点走到B点步数为k的有几条路 祭出离散数学图论那章中的 邻接矩阵A. 设S=Ak 则 S[a][b] 为 a到b,步数为k的不同路的条数 剩下的就是矩阵快 ...
- P - A + B（第二季水）
Description 读入两个小于100的正整数A和B,计算A+B. 需要注意的是:A和B的每一位数字由对应的英文单词给出. ...
- CDZSC_2015寒假新人（1）——基础 c
Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the wareho ...
- 在Yii框架中使用PHPExcel
PHPExcel是一个比较好用的php读取excel文件的类库,今天遇到了在yii中如何加载PHPExcel类文件的问题,因为Yii的autoload机制是安装类名去找文件,即文件名就是相应的类名,而 ...