#margin 负值的最佳实践

# margin 负值的最佳实践 TIP

margin 负值是面试中必问的一个核心知识点 ！因此，大家必需要掌握

# 一、margin 负值特性 TIP

margin-left 设置负值，元素自身向左移动，后面的元素也向左移 margin-right 设置负值，自身不受影响，右边元素向左移动 margin-top 设置负值，元素自身向上移动 ，下面的元素也向上移 margin-bottom 设置负值，自身不受影响，下方元素向上移动 # 1、margin-left 负值 TIP

margin-left设置负值，元素自身向左移动，后面的元素也向左移

.box1 未加负值时效果 .box1 添加 margin-left:-50px 时效果 # 2、margin-right 负值 TIP

margin-right 设置负值，自身不受影响，右边元素向左移动

.box1 未加负值时效果 .box1 添加 margin-right:-50px 时效果 # 3、margin-top 负值 TIP

设置负值，元素自身向上移动 ，下面的元素也向上移

.box1 未加 margin 负值时效果 .box1 添加 margin-top:-50px 时效果 # 4、margin-bottom 负值 TIP

margin-bottom 设置负值，自身不受影响，下方元素向上移动

.box1 未加 margin 负值时效果 .box1 添加 margin-bottom:-50px 时效果 # 二、margin 塌陷时合并规则 TIP

margin 重叠也叫：外间距重叠 、或外边距合并、或外边距穿透、或外边距塌陷。 margin 重叠只针对垂直方向，不针对水平方向。 发生的情况的情况：

1、兄弟元素之间- 上下外边距合并（重叠） 2、父子元素之间-上外边距合并（穿透）（父元没有设置内边距和边框时才会发生合并） 外边距重叠计算规则

1、全部都为正值，取两 最大者（在前面盒子模型时讲过） 2、不全是正值，则两者相加，得到的结果为最终移动距离 3、都为负值，则都取绝对值最大的那个 # 1、兄弟元素间合并，都为负值 TIP

margin-bottom 与 margin-top 都为负值时，都两者取绝对值中最大的那个

.box1 与.box2 都未设置 margin 属性时 .box1 中 margin-bottom:-50x; .box2 中 margin-top:-80px 时效果 注：

margin 上外边距与下外边距都是负值时，取两者中绝对值中最大的那一个，则最终以 margin-top: -80px; 为主，.box2 蓝色盒子向上移动 80px

# 2、兄弟元素间合并，一正一负 TIP

margin-top 与 margin-bottom 之间有一个负值时，两者相加，得到的结果，为最终移动距离。

注：

当 .box1 中设置 margin-bottom: 50px; 时，其中 .box2 中的 margin 属性分别设置以下不同值时的效果如下

.box2 中未设置 margin 属性 .box2 mrgin-top:-30px 时效果 .box2 margin-top:-80px 时效果 只给.box1 加了 margin-bottom:50px,则下面的元素向下移动 50px 的间距 兄弟元素间的上下外边距发生合并，两者中有一个为负值时，两值相加，得到的最终结果为合并后的外边距大小：50+（-30)=20 则两者间距为 20px 兄弟元素间的上下外边距发生合并，两者中有一个为负值时，两值相加，得到的最终结果为合并后的外边距大小：50+(-80)=-30 则下面元素向上移动 30px # 3、父子元素之间合并，都为负值 TIP

margin-top 与 margin-bottom 之间都为负值时，两者合并时，取绝对值最大的那个

正常情况，.box 与.box1 都未设置 margin 时 .box 的 margin-top:-50px 和.box1 的 margin-top:-100px; .box 的 margin-top:-50px 和.box1 的 margin-top:-40px; 子元素外边距穿透父元素与父元素的外边距合并，两都为负值，取绝对值中的最大值，则为-100px 子元素外边距穿透父元素与父元素的外边距合并，两都为负值，取绝对值中的最大值，则为-50px # 4、父子元素之间合并，一正一负 TIP

margin-top 与 margin-bottom 之间有一个为负值时,两者相加，得到的值为最终移动距离

正常情况，.box 与.box1 都未设置 margin 时 .box 的 margin-top:-50px 与.box1 的 margin-top:20px .box 的 margin-top:-50px 与.box1 的 margin-top:80px 子元素外边距穿透父元素与父元素外边距合并，两者只有一个值是负数数，两者相加，相加后的结果为最终合并的外边距，则为-30px 子元素外边距穿透父元素与父元素外边距合并，两者只有一个值是负数数，两者相加，相加后的结果为最终合并的外边距，则为 30px # 三、margin 负值应用场景和最佳实践 TIP

margin 负值的经典布局应用场景和最佳实践

# 1、等高布局 TIP

不管左边蓝色盒子中内容多少，其高度都会随着右边的粉色盒子变高的效果。

点击查看完整源代码

注：

等高布局也可以用我们前面学过的绝对定位来实现。左侧元素相对于父元素绝对定位，然后利用 top 和 bottom 来设置元素的高。

# 2、一行多列网格布局

点击查看完整源代码

# 3、头像叠加效果

点击查看完整源代码

• 
• 
• 
• 

# 4、元素水平垂直居中 TIP

margin 负值与 position 定位，实现元素水平垂直居中效果

/*

先利用绝对定位

让元素的顶部和左侧分别与父元素垂直和水平中间对齐

然后再利用margin负值，让元素向上和向左移动自身宽度的一半

这样就实现了水平和垂直居中

*/

/* 绝对定位 */

position: absolute;

top: 50%;

left: 50%;

/* 向上移动自身宽度一半 */

margin-top: -50px;

/* 向左移动自身宽度一半 */

margin-left: -50px;

点击查看完整源代码

# 5、圣杯布局 与 双飞翼布局 TIP

这两种布局的优点：

中间一栏内容最重要，最先加载和渲染，同时对搜索引擎优化最利。 两边内容固定，中间内容自适应 # 圣杯布局

注：margin 属性值为百分比，则相对父元素的 width 属性而言（标准盒子模型下）

点击查看完整源代码

# 双飞翼布局

点击查看完整源代码