深入理解之margin

理解可视尺寸 和 占据尺寸

• 可视尺寸理解元素的可见大小，也就是不包含margin的盒模型。

  
  image.png

• 占据尺寸为元素在文档流中的占用大小，也就是占用了多少地方，后面的元素会尽可能的挨着他。
  谨记元素在文档流中的排版是按照他的占据尺寸。
  谨记元素在文档流中的排版是按照他的占据尺寸。
  出现怪异排版要清楚元素的占据尺寸是哪一块，因为有可能占据尺寸比可视尺寸要小。

.parent {
  background: #edf1f5;
  border: 1px solid;
  width: 300px;
  margin: 0 auto;
  font-size: 0;
}
.child1 {
  display: inline-block;
  background: yellow;
  height: 100px;
  width:100px;
  margin-bottom: -50px;
}

image.png

一、margin 和可视尺寸

• margin满足以下情况下会影响宽度的尺寸

没有设定width的 普通block元素 。不包括以下元素， 也就是元素会占满父元素宽度的情况下。
float元素， absolute绝对定位元素, fixed固定定位元素, inline内嵌元素, table-cell单元格元素

.child {
  background: yellow;
  margin-left: -50px;
  margin-right: -50px;
  height: 50px;
}

image.png

二、margin和百分比单位

一、margin的四个方向的%单位，都是相对于元素的宽度的。
二 、如果元素是绝对定位元素，那么他是相对于带有定位属性的父级的宽度。

三、margin的重叠

• margin的重叠只会发生在垂直方向上，会有以下几种情况

• 子元素与父元素之间的重叠
• 相邻元素的重叠

• 子元素与父元素之间清除margin

1、父元素设置为块级格式化上下文(BFC)，比如说设置父元素为overflow: hidden float display: inline-block position: absolute 等...
2、父元素设置上边框或下边框 border-bottom / padding-top
3、父元素设置上填充或下填充 padding-bottom / padding-top

四、 margin的auto （自动填充值）

默认一个块级元素的宽度是会自动填充它父级元素的宽度，但是当我们设置了元素的宽度以后，那么元素的就会按照我们设置的宽度来显示，如果说设置的宽度比父级元素的宽度要大，那么是没什么问题的，要是设置的宽度比父级元素的宽度小，那么这时候空白的多余的放就会是margin来填充的。

image.png

就是你强制设置他的margin-right属性，也是没用的，就是这么霸道。。。

• 我们可以利用这些个自动填充的特性来做一些事情^.

比如让元素右对齐，只需要设置 margin-left:auto 就可了

image.png
比如我们都知道的居中对齐 margin: 0 auto
image.png
再比如我们的垂直居中
注意这里使用css3的 writing-mode: vertical-lr 这个属性是使元素内部的流动是从上到下流动的所以他跟左右使用auto一样，会垂直居中了。

.parent {
  background: #edf1f5;
  height: 150px;
  writing-mode: vertical-lr;
  width: 100%;
}
.child {
  background: yellow;
  height: 50px;
  width: 300px;
  margin: auto;
}

image.png

还可以利用position: absolute 实现绝对居中。

.parent {
  background: #edf1f5;
  height: 150px;
  position: relative;
}
.child1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: yellow;
  height: 50px;
  width: 300px;
  margin: auto;
}

image.png

五、margin的负值

负值的margin会拉伸 没有设置 宽度值的block元素的宽度，高度不起作用。

image.png

设置了宽高的元素设置负值的margin，它的占据尺寸会坍塌,会影响后续元素的布局

image.png

六、margin的实用技巧

• 解决列表宽度问题。

  
  image.png

给ul加上margin-right: -20px会增加ul20的宽度，解决两端对齐的子列表宽度不够用的情况。

• 是现等高布局

利用margin负值会坍塌的的机制，给他设置一个很大的margin-bottom坍塌值，然后再利用padding-bottom填补会来，再设置父元素的overflow:hidden, 这是后父元素的高度会是最高一个元素的高度，就实现等高布局（＾∀＾●）

.container {
  overflow: hidden;
}
.left, .right {
  margin-bottom: -600px;
  padding-bottom: 600px;
  float: left;
  width: 50%;
}
.left {
  background: yellow;
}
.right {
  background: green;
}

• 利用负值实现左边自适应，又变固定宽度。

- html
  <div class="box">
    <p class="p">这是很多文字文字这是很多文字文字这是很多文字文字这是很多文字文字这是很多文字文字这是很多文字文字</p>
  </div>
  <img  class="img" src="https://img3.mukewang.com/549beab90001be9037445616-200-200.jpg" alt="">

.box {
  float: left;
  background: #e7ecec;
  width: 100%;
}
.box .p {
  padding-right: 170px;
}
.img {
  float: left;
  width: 150px;
  margin-left: -150px;
}