盒模型

认识盒模型

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型"

margin

margin特性之塌陷

出现在竖直方向，小margin塌陷到大margin中，即margin不叠加以大值为准

margin应用之盒子居中

谁要居中	水平	竖直
文本	text-align:center;	line-height=盒子高height
盒子	margin:0 auto;	（如下代码）

父亲{
position:relative;
}
元素{
position: absolute;
top: 50%;
margin-top: -自己高度一半;
}

默认值清除（margin/padding）

一些元素（比如body、ul、p等）有默认的margin
在开始制作网页的时候，要清除

  /* 通配符选择器表示选择所有元素 */
  * {
      margin: 0;
      padding: 0;
  }
  /* 通配符有效率问题，应使用并集选择器 */
  body,
  ul,
  p {
      margin: 0;
      padding: 0;
  }

盒模型

W3C标准模型box-sizing: content-box;

元素实际大小（内盒）

内盒=width

元素空间尺寸（外盒）

外盒=内盒+padding+border+margin

IE传统/怪异模型box-sizing: border-box;

元素实际大小（内盒）

内盒=width+padding+border

元素空间尺寸（外盒）

外盒=内盒+margin

.box {
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid #000;
    padding: 10px;
       }

多用于移动网页，结合百分比布局、弹性布局等，PC页面使用较少
兼容到IE9