CSS进阶（四）margin

 margin

元素尺寸：border-box DOM属性里的offsetWidth 和offsetHeight

元素内部尺寸： padding-box DOM属性里的clientWidth 和 clientWidth

元素外部尺寸： margin-box 理解为元素占据的空间尺寸。-margin

元素设定了 width 值或者保持“包裹性”的时候，margin 对尺寸没有 影响，只有元素是“充分利用可用空间”状态的时候，margin 才可以改变元素的可视尺寸。

小技巧

实现背景色

（1）设置display:table-cell ,但最多三栏

（2）使用border边框模拟 border-bottom: 9999px solid transparent ie7+且不支持百分比

（3）使用margin-bottom和-margin-bottom设置-9999px 9999px配合父级的overflow:hidden

margin百分比值

不论水平方向还是垂直方向都是相对于宽度计算

--margin合并

（1）块级元素，不包括浮动和绝对定位元素

（2）不考虑writing-mode的情况下，只发生在和当前文档流垂直的方向上

发生的场景

（1）兄弟元素之间

（2）父元素包含的第一个子元素或最后一个子元素的margin-top和margin-bottom

（3）空块级元素的合并margin-top和Margin-bottom合并

计算规则

负负值相加取绝对值大的

对于margin:0的审视

对于绝大多数网站可以进行设置，但如果网站主要用来展示图文，则统一标签的margin,不要一股脑设置成0

大胆的使用：

.list{
  margin-top:15px;
  margin-bottom:15px;
}

而不是

.list{
  margin-top:15px;
}

这样设置能有有效的提升容错率

margin:auto

用来计算对应方向应该获得的剩余空间的大小

不仅仅可以居中，也可以通过设置margin-left:auto或者margin-right:auto来居左或者居右

触发的前提条件，auto或者height:auto,而height:auto元素不会自动的填充，因此无法触发垂直方向的居中

垂直居中的方式

父级元素设置position:relative 子元素设置：absolute width及height 在设置margin:auto