也来谈css 盒子模型

概述

－内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性
－盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。

w3c标准盒子模型

/*外盒尺寸计算（元素空间尺寸）*/
 Element空间高度 = content height + padding + border + margin
 Element 空间宽度 = content width + padding + border + margin
 /*内盒尺寸计算（元素大小）*/
 Element Height = content height + padding + border （Height为内容高度）
 Element Width = content width + padding + border （Width为内容宽度）

ie盒子模型

/*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
  /*内盒尺寸计算（元素大小）*/
  Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

CSS3 box-sizing

box-sizing ： content-box || border-box || inherit

box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀

/*Content box*/
 Element {
    -moz-box-sizing: content-box;  /*Firefox3.5+*/
    -webkit-box-sizing: content-box; /*Safari3.2+*/
    -o-box-sizing: content-box; /*Opera9.6*/
    -ms-box-sizing: content-box; /*IE8*/
    box-sizing: content-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
       
 /*Border box*/
 Element {
    -moz-box-sizing: border-box;  /*Firefox3.5+*/
    -webkit-box-sizing: border-box; /*Safari3.2+*/
    -o-box-sizing: border-box; /*Opera9.6*/
    -ms-box-sizing: border-box; /*IE8*/
    box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }