box-sizing的初步认识

盒子模型


W3C 的标准 Box Model:
1
2
3
4
5
6
/*外盒尺寸计算（元素空间尺寸）*/
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 传统 Box Model:

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

语法


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

说明：
1、content-box:此值为其默认值，其让元素维持 W3C 的标准 Box Model，也就是说元素的宽度/高度

（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）

即：Element Width/Height = border + padding + content width/height

2、border-box:此值让元素维持 IE 传统的 Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。

（从上面 Box Model 介绍可知，我们这里的 content width/height 包含了元素的 border,padding, 内容的 width/height

【 此处的内容宽度/高度 = width/height-border-padding 】 ）。


box-sizing 现代浏览器都支持，但IE家族只有 IE8 版本以上才支持，虽然现代浏览器支持 box-sizing，但有些浏览器还是需要加上自己的前

缀，Mozilla 需要加上-moz-，Webkit 内核需要加上-webkit-，Presto 内核-o-,IE8-ms-，所以 box-sizing 兼容浏览器时需要加上各自的前缀:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*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标准语法)*/
  }

实例


HTML code
1
2
<div class="imgBox" id="contentBox"><img src="/images/header.jpeg" alt="" /></div>
<div class="imgBox" id="borderBox"><img src="/images/header.jpeg" alt="" /></div>

css code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.imgBox img{
   width: 140px;
   height: 140px;
   padding: 20px;
   border: 20px solid orange;
   margin: 10px;
}
#contentBox img{
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   -o-box-sizing: content-box;
   -ms-box-sizing: content-box;
   box-sizing: content-box; 
}
#borderBox img{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}

效果：

Layout 分析图证明了 box-sizing:content-box 是维持了 W3C 的标准 Box Model，而 box-sizing:border-box 是维持了IE传统（IE怪异模式）下的 Box Model。

一般应用于拯救排版布局和统一表单格式。