CSS-深入理解之margin

Bertha 。 2022-06-13 05:57 342阅读 0赞

# [CSS-深入理解之margin][CSS-_margin] #

标签： [css][]

![category_icon.jpg][]  分类：

CSS（7） ![arrow_triangle_20_down.jpg][]

目录[(?)][Link 1][\[+\]][Link 1]

在一次面试过程中，面试官问到margin的塌陷的问题，以及margin负值的问题。当时有点蒙，对这块知识点的理解一点都不深入。为了补充这方面的知识，特意去查了一下相关的资料，发现张鑫旭大神在慕课网上有视频讲解。在这里，梳理和总结一下其中的知识点。

# 1. margin可以改变容器的尺寸 #

## 1.1 margin能够改变可视区域的尺寸的条件 ##

*  适用于没有设定width/height的普通block水平的元素（float元素，absolute/flex元素，inline水平，table-cell元素）
 *  只适用于水平方向的尺寸

## 1.2 margin能够改变元素占据的空间 ##

*  block/inline-block元素均有效
 *  与有没有设置width/height无关
 *  水平和垂直方向均有效

# 2. 百分比margin的计算规则 #

一般的，在CSS中，尺寸除了使用px以外，还可以使用百分比，当使用百分比的时候，是相对于父元素的宽和高的。比如width: 10%是相对于父元素的width，   
height: 10%是相对于父元素的height。

*  但是margin的话，left，top等设置百分比的时候，都是相对于第一个父元素宽度的尺寸。
 *  如果是绝对定位了的话，则不一定是相对于第一个父元素的宽度的尺寸了，而是相对于第一个position为absolute，relative，fixed的父元素或者是html

# 3. magin重叠 #

## 3.1 margin重叠的特性 ##

*  只发生在block水平的元素（不包含float和absolute的元素）；
 *  只发生在垂直方向（margin-top，margin-bottom）；

## 3.2 margin重叠发生的三种情景 ##

*  相邻的兄弟元素；
 *  父级和第一个/最后一个子元素；
 *  空的block元素；

## 3.3 父子margin重叠的其他条件 ##

### 3.3.1 margin-top重叠 ###

1.父元素非BFC   
2.父元素没有border-top设置   
3.父元素没有padding-top设置   
4.父元素和第一个子元素之间没有inline元素隔开

### 3.3.2 margin-bottom重叠 ###

1.父元素非BFC   
2.父元素没有border-top设置   
3.父元素没有padding-top设置   
4.父元素和第一个子元素之间没有inline元素隔开   
5.父元素没有height，min-height，max-height设置

## 3.4 空block元素margin重叠的其他条件 ##

1.父元素没有border-top设置   
2.父元素没有padding-top设置   
3.父元素和第一个子元素之间没有inline元素隔开   
4.没有height，min-height，max-height设置

## 3.5 margin重叠的计算规则 ##

1.正正取大值   
2.正负值相加   
3.负负最负值

## 3.6 margin重叠的意义 ##

1.  连续段落或者列表之类，如果没有margin重叠的话，首尾项间距会和其他兄弟标签1:2关系，排版不自然。
2.  web中任何地方嵌套或者直接放入裸div，不会影响原来的布局。
3.  遗落的任意多个空p标签，不要影响原来的阅读排版。

## 3.7 善用margin ##

做列表的时候，虽然只设置margin-top也可以达到布局的目的，但是为了健壮性，可以设置margin-top和margin-bottom，比如最后一个元素被移除或者位置被置换了，都不会破坏原来的布局样式。

# 4. magin: auto #

## 4.1 margin: auto的作用机制 ##

原本应该自动填充的尺寸被width/height强制变更，而margin: auto就是为了填充这个变更的尺寸而设计的。

## 4.2 如果一侧是定值，一侧是auto，auto为剩余空间的大小； ##

例子：

div{ width: 500px; margin-right: 50px; margin-left: auto }
       
        
         1
        
       
        
         1

此时div距离右侧的为50px，而左侧是自适应的。

## 4.3 如果两侧都是auto，则会让元素水平居中 ##

## 4.4 margin: auto只对block元素有效，对于inline和inline-block水平的元素。并且只对水平方向有效而对垂直方向是无效的，因为水平方向会自动填充至父元素的宽度大小，而垂直方向不会。 ##

## 4.5 父元素设置writing-mode: vertical-lr，子元素设置margin: auto，子元素会垂直居中，但是不会水平居中。 ##

.father { wrting-mode: vertical-lr; }
    .son { margin: auto}
       
        
         1
         2
        
       
        
         1
         2

## 4.6 absolute与margin垂直居中 ##

.father { width: 100px; height: 100px; position: relative; }
    .son { width: 50px; height: 50px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }
       
        
         1
         2
        
       
        
         1
         2

这种方式适用于IE8+。这种方式之所以可以水平垂直居中，是因为绝对定位的元素，如果left, right, top, bottom都设置为0的话，是自动拉伸到父元素的宽和高的100%，当对子元素设置了宽和高之后，这时候auto就可以起作用了。

# 5. margin负值定位的实例 #

## 5.1 margin负值下的两端对齐 ##

这主要是用了margin改变元素尺寸大小的原理来实现的。   
比如说有一个两端对齐的列表需要实现，正常情况下是这么布局的。

HTML

<div class="box">
        <div class="ul">
            <div class="li">列表1</div>
            <div class="li">列表2</div>
            <div class="li">列表3</div>
        </div>
    </div>
       
        
         1
         2
         3
         4
         5
         6
         7
        
       
        
         1
         2
         3
         4
         5
         6
         7

CSS

.box { width: 660px; height: 200px; background-color: yellow; }
    .ul { overflow: hidden; }
    .li { width: 200px; height: 200px; margin-right: 20px; background-color: green; float: left; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15

![这里写图片描述][SouthEast]

这样出来的效果是，右侧有一个margin-right的20px，不太好去除掉。   
这时候可以给div.ul设置一个margin-left=-20px，将div.ul扩大到680px宽度。这时候再次计算一下每一个li应该设置的宽度就可以了。布局如下：

HTML

CSS

.box { width: 660px; height: 200px; background-color: yellow; }
    .ul { overflow: hidden; margin-right: -20px; }
    .li { width: 206.66px; height: 200px; margin-right: 20px; background-color: green; float: left; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16

![这里写图片描述][SouthEast 1]

## 5.2 margin负值下的两端对齐 ##

这种布局的原理是利用margin改变元素占据空间来实现的。   
比如有两列布局，需要实现的是，任意一列布局的高度改变后，另外一列的高度也跟着变化，实现二者是等高的。正常的布局如下：

HTML

<div class="box">
        <div class="child-orange">左侧</div>
        <div class="child-green">右侧</div>
    </div>
       
        
         1
         2
         3
         4
        
       
        
         1
         2
         3
         4

CSS

.box { width: 400px; overflow: hidden; }
    .child-orange { width: 200px; height: 100px; background-color: orange; float: left; }
    .child-green { width: 200px; height: 100px; background-color: green; float: left; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16

![这里写图片描述][SouthEast 2]

当改变左侧div的高度为200px的时候，则变为这样了：

![这里写图片描述][SouthEast 3]

这样的话，左右两侧的高度就不是等高了。为了实现等高的效果，则需要给这两个div设置margin-bottom负值，同时设置padding-bottom负值来让元素的实际高度显示出来。（ps：此处不明白是什么意思）   
CSS

.box { width: 400px; overflow: hidden; }
    .child-orange { width: 200px; height: 100px; background-color: orange; float: left; }
    .child-green { width: 200px; height: 100px; background-color: green; float: left; }
    .child-orange, .child-green { margin-bottom: -500px; padding-bottom: 500px; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20

![这里写图片描述][SouthEast 4]

可见，利用这种方法，就实现了等高的效果。这种方法兼容性可以，支持IE6+。但是有其副作用，会在overflow: hidden的文章里面细讲。

# 6. margin失效的情景 #

## 6.1 inline水平元素的垂直margin无效 ##

这里面有两个前提：

*  非替换元素，比如不是 img 元素
 *  正常书写模式，不是writing-mode: vertical-\*

## 6.2 display: table-cell的元素margin无效 ##

## 6.3 绝对定位元素的非定位方向的margin“无效” ##

所谓非定位方向指的是left, right, top, bottom中没有设置数值的方向。比如一个图片设置了绝对定位：

img { position: absolute; left: 10px; top: 10px;}
       
        
         1
        
       
        
         1

这样的话，right和 bottom是非定位方向。设置margin-right和margin-top是“无效”的。   
细心的同学可能观察到，“无效”这两个字一直都是打上了引号的，这是因为其实绝对定位的元素在各个方向的margin都是有效的，只是因为绝对定位的元素脱离了文档流，所以跟普通文档流中的元素不同，其margin对相邻元素的布局没有影响，所以看起来是无效的，但是如果margin足够大时，触碰到了所依靠定位的父元素的边缘，则margin的作用就显现出来了。

[CSS-_margin]: http://blog.csdn.net/zhq2005095/article/details/63739069
[css]: http://www.csdn.net/tag/css
[category_icon.jpg]: /images/20220613/3a53a5c480f54cbaa5201b5aa3b5e161.png
[arrow_triangle_20_down.jpg]: /images/20220613/61451d1c649a48f2a3acda6167eb13c2.png
[Link 1]: http://blog.csdn.net/zhq2005095/article/details/63739069#
[SouthEast]: /images/20220613/3e67673c09d24e628d7340c786d23dde.png
[SouthEast 1]: /images/20220613/e3e4db48cb0c4876894e9a5608f2aced.png
[SouthEast 2]: /images/20220613/dab4bc8b3cb44188a9d68da808187faf.png
[SouthEast 3]: /images/20220613/a17e3122f2ef46d49bc51ee061deb903.png
[SouthEast 4]: /images/20220613/e5101a50b6d3478eb2acd52174077d7b.png