CSS属性之box-sizing

发表于

在页面代码编写的过程中，box model一直是很重要的一块，理解好这块写起代码来也是水到渠成。box-sizing是CSS3的box属性之一。那么作为box的属性之一，它当然遵循css的box model原理，为了更好的理解box-sizing，先行了解box model也不无必要。

CSS中box model分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，相同之处在于都是对元素计算尺寸的模型，包含width，height，padding，border，margin以及实际尺寸的计算关系；不同之处嘛，下面详细为你介绍：

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（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）。

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包含了元素内容宽度、边框宽度、内距宽度)

可能上面的内容会让你感觉很懵逼，这样举个例子，可能你马上就能get到了：

1
2
3
4
5
6
7
8
9
.box{
    width:200px;
	height:200px;
	padding:10px;
	border:3px solid green;
	margin:10px;
	background:red;
    
}

  • 在chrome浏览器下，你会发现效果如下图：
    1

    box model


    • 紫色区域就是我们width+height定义出来的content区域，

    • 红色区域就是我们padding定义出来的内边距，

    • 绿色区域就是我们padding定义出来的边框，

    • 绿色边框距离页面边框的距离就是我们padding定义出来的外边距，

    这里注意:
    所有的边距和边框都不会影响我们定义content的大小，而是以附加的形式来增大我们的整个box的大小。

  • 在IE5下面（用box-sizing：border-box模仿），则是这样的：

    2

    box model


    • 紫色区域就是我们width*height-padding-border定义出来的content区域(注意)，

    • 红色区域就是我们padding定义出来的内边距，

    • 绿色区域就是我们padding定义出来的边框，

    • 绿色边框距离上一个box的距离就是我们padding定义出来的外边距，

    不难看出，其实差别就在于content的区域块，ie的传统model中由width和height定义的不再是content区域块了，而是padding+border+content组成的块，那么我们添加padding或者border都只会在这个区域块上划分，而不是在width*height区域的基础上向外扩张，个人感觉这更符合人的思维，这样我们写页面的时候就不需要考虑太多其他的事情，只需要着眼于当前的区域，不用太过担心牵一发而动全身。

很明显，content-box即content区域=widhtheight；而border-box即content区域=widthheight-padding-border，理解好这点就没问题了。

如何再box model模式间切换

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标准语法)*/
 }