CSS3欲速则不达—box-sizing(盒模型)

box-sizing是css3的新属性,作用是控制box以哪种”盒模型”(box model)渲染的。

盒子模型

首先我们来介绍盒模型,有两种: W3C盒子模型quirks mode(混杂模式)盒模型

/*盒子需要占据的位置为*/ 
width  = margin + border + padding + content.width;
hright = margin + border + padding + content.height;
/*盒子的实际大小为*/
width  = border + padding + content.width;
hright = border + padding + content.height;
W3C盒模型
/*盒子需要占据的位置为*/
width  = margin + content.width;
hright = margin + content.height;
/*盒子的实际大小为*/
width  = content.width;
hright = content.height;
IE6之前的浏览器或者 quirks mode(混杂模式)下的盒模型
CSS3欲速则不达—box-sizing(盒模型)

如上图所示,如果我们想要在大的div里再加一个div,很明显将里面的div宽度和高设置为100%即可;接着如果想设置里面的div的padding,那就再计算实际实际值(假如内高度为500px,padding:20px;width:460px;,很麻烦)或者也可以包裹一个div(又增加了一个div,纠结)。是不是很麻烦?

但是如果你有 box-sizing,这些问题迎刃而解了。

像上面的那种情况只要将内div设置css属性box-sizing:border-box即可,这句话告诉浏览器你按照 混杂模式 下的盒计算模式来渲染:

width  = border + padding + content.width;

box-sizing API

box-sizing: content-box /*width= content.width */
border-box /*width=border + padding + content.width */
inherit:/*从父元素继承 */
box-sizing 句法
#browser {
-webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;     /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
box-sizing 各大浏览器的写法

box-sizing 应用

本页面所有box-sizing DEMO

  1. 统一一些元素的盒模型。
    譬如想要让form表单元素在各个浏览器下完全一致,且跟用户的操作系统风格一致,那么就可以用box-sizing来控制它们。form元素只有【type=”text”】和textarea是遵循 W3C盒模型 ,而其他几个都是还是遵循 quirks mode(混杂模式)下的盒模型,我们就可以用box-sizing来控制。当然IE6、7不支持box-sizing,还得给设置hack,(你如果直接用自定义的ui风格那就另当别论)。
  2. 利用box-sizing,灵活控制盒模型,减少亢余代码。

本文源链接:http://www.html5jscss.com/css3-box-sizing.html

转载请注明《CSS3欲速则不达—box-sizing(盒模型)》| html5jscss

评论关闭了.