margin塌陷问题

magin塌陷现象：在垂直方向，父子关系两个盒子中margin大的覆盖margin小的，导致两个盒子有同一个margin.

<style>

.div1{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
.div2{
width: 50px;
height: 50px;
background-color: green;

margin-top:70px;

}
</style>
<body>

</body>

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.

但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.

结果：本应该是子元素的margin-top=70px(子元素的margin是相对于父元素的),父元素的等于50px,但最后结果子元素和父元素的margin-top都为70px.

解决办法：

1.父元素加border,注意加border时一定要有solid(不管写不写颜色)，没写solid仅仅有个border:1px,浏览器实际上是没渲染border的。(不建议使用)

2.父元素加padding(不建议使用)

3.改变bfc(块级格式上下文)

改变父级的渲染规则有以下四种方法,给父级盒子添加

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷

bfc:

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

特殊情况：下面这种也形成了margin塌陷，父级是body,子级div2没有相对body定位，而是和body一起用一个margin.div1脱离了文档流，不会相对body定位，但div2得相对body定位。

出现这种情况的条件是body有一个div脱离了标准流。

}
.box2{
width: 100px;
height: 100px;
background-color: gray;
margin-top: 100px;
}

</style>
<body>

</body>

解决办法：和上面同理，只是父级变成了body

转载于:https://www.cnblogs.com/shiyuzuxia/p/9729912.html

margin塌陷问题相关推荐

解决margin塌陷的问题_margin塌陷问题及解决
margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇,在浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值比较大的,边距小的塌陷到了边距值大的值内部. 1. 同级元素塌陷:上面的元 ...
margin塌陷与margin合并、浮动流
一.margin 塌陷父子嵌套元素,垂直方向的margin,父子会粘合在一起,取最大的值.子级不能根据父级定位,好像父级没有棚. 解决方案,触发bfc(block format context),使 ...
解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
【HTML/CSS】margin塌陷和合并问题
1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang="en"> <head><meta char ...
解决margin塌陷问题
一:什么是margin塌陷 ? 在标准文档流中,竖直方向(左右方向的不会出现塌陷现象)的margin会出现叠加现象,即较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的 ...
CSS高度塌陷问题（float塌陷margin塌陷）
目录一.float塌陷 1.问题 2.代码示例 3.解决方法 1.每个盒子设定固定的width和height 2.给外部的父盒子也添加浮动 3.给父盒子添加overflow属性. 4.父盒子里最下方 ...
margin设置规则与margin塌陷、合并
① margin 设置规则 margin 复合属性,可以设置一个值.两个值.三个值.四个值,规则如下: margin: 10px; /*设置 4 个方向的外边距*/ margin: 10px 20px ...
margin塌陷和margin合并
一.margin塌陷父子嵌套元素垂直方向的 margin ,父子元素是结合在一起的,他们两个会取其中最大的值正常情况应该是父级相对于浏览器进行定位,子级应该相对于父级定位的 , 但是 margi ...
盒子塌陷和 margin塌陷
1,盒子塌陷产生的原因:当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父 ...

margin塌陷问题

margin塌陷问题相关推荐

最新文章

热门文章