css盒模型

在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。

content-box

默认值，标准盒子模型。 width
与 height
只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

border-box（ie盒模型）

width
和 height
属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。

background-box

元素的background范围覆盖了content, padding和border，但不包括margin.

---

外边距合并（外边距塌陷）

发生margin合并的三种基本情况:

• 相邻的兄弟姐妹元素

• 块级父元素与其第一个/最后一个子元素
  如果块级父元素中，不存在上边框
  、上内边距
  、内联元素、清除浮动
  这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。

• 空块元素（仅设置margin元素）

解决方法

• 在父层div加上：overflow:hidden；
• 把margin-top外边距改成padding-top内边距;

---

关于让一个未知宽高的img在一个div中居中的问题

这是兼容ie8的解决方法

<!-- HTML结构 -->
<div>![](...)<span>here are test words</span></div>
<!-- 样式如下 -->
<style>
  img {
    vertical-align: middle;
  }
  div:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
  span {
    vertical-align: middle;
  }
</style>

• display:inline-block
  将图片既具有block的宽度高度特性又具有inline的同行特性。
  这里的img与一个height:100% 的span同行，使这一行的行高撑满div。

• vertical-align: middle;
  让行内元素垂直居中。

• text-align: center;
  页面内居中对齐，因为水平上有宽度的只有图片，所以图片水平也居中了。

• 关于为什么〈span〉也要加vertical-align：
  因为你如果不给span设置属性，css会给span一个默认属性：vertical-align:baseline;也就是span底部对齐父元素的基线（baseline），你在span里打个字就看出来了，基线被自动画在div的底部的话，<img>就跟着依据这条基线为轴垂直居中了。

如果不用兼容呢

• 方法一：绝对定位

  #container{
      position:relative;
  }
  
  #center{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
 }

• 方法二：flex布局

 #container{
     display:flex;
     // display: -webkit-flex; Safari需要使用特定的浏览器前缀
     justify-content:center;
     align-items: center;
 }

 #center{
 }