margin百分比，重叠和auto

最新推荐文章于 2024-04-15 19:17:28 发布

转载最新推荐文章于 2024-04-15 19:17:28 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mengff/p/6083058.html

本文详细解析了CSS中Margin的百分比计算方式、Margin重叠的三种情况及其解决办法，并介绍了如何利用marginauto实现元素的居中和对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. margin百分比

1. 普通元素的百分比margin都是相对于容器的宽度计算
2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算

这是在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，
若书写模式变成纵向的时候，其参照将会变成包含块的高度。

二. margin重叠

1. 通常特性
　　block水平元素（不包括float和absolute元素）
　　不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）

2. 重叠的3种情境

A.相邻的兄弟元素

B. 父级和第一个/最后一个子元素

　　子元素的margin-top相当于父元素的margin-top
a.margin-top重叠
　　父元素非块状格式化上下文元素
　　父元素没有border-top设置
　　父元素没有padding-top值
　　父元素和第一个子元素之间没有inline元素分隔

b.margin-bottom重叠
　　父元素非块状格式化上下文设置
　　父元素没有border-bottom设置
　　父元素没有padding-bottom值
　　父元素和第一个子元素之间没有inline元素分隔
　　父元素没有height，min-height，max-height

C.空的block元素

　　元素没有border设置
　　元素没有padding值
　　里面没有inline元素
　　没有height或者min-height

3. 计算规则
　　正正取大值
　　正负值相加
　　负负最负值

4. margin重叠的解决方法

4.1 相邻兄弟元素的重叠

最简单的方法是，使用同方向的margin，即A盒子margin-bottom: 50px，B盒子margin-top: 100px，直接用B盒子margin:150px就行了，不用使用两个方向的margin。

4.2 父子元素的重叠

4.2.1 给父元素添加一个before伪元素，.father:bofore{content:' ';display:table;}，content中有个空格

4.2.2 将父元素做成BFC，例如overflow:hidden

4.2.3 对父元素使用padding-top，不使用margin

4.2.4 将父元素定位，例如，position:fixed

三. margin auto

margin的值为auto，是自动占据包含块的剩余空间，例如

<div id="demo">
    <p>恩，我就是那个p。</p>
</div>

#demo{
　　width: 500px;
}
#demo p{
　　width: 100px;
　　margin-left: auto;
}

则p的实际margin-left为500-100=400px，p元素右对齐

当margin-left和margin-right同为auto时,左右平分剩余空间，元素居中

参考：https://segmentfault.com/a/1190000006212076
http://www.ituring.com.cn/article/64580
http://www.ituring.com.cn/article/64581 https://blog.youkuaiyun.com/shi_1204/article/details/80180224
https://tech.youzan.com/css-margin-collapse/

转载于:https://www.cnblogs.com/mengff/p/6083058.html