CSS盒模型

标准CSS盒模型规定width和height样式属于给定内容区域的尺寸,并且不包含boder和padding,可以称此盒子为“内容盒模型"。在老版的IE里和新版的CSS中都有一些例外,在IE6之前和IE6~8“怪异模式”下显示一个页面时(页面中缺少<IDOCTYPE>或有一个不够严格的doctype时),width和height属性确是包含boder和padding的。

IE的行为是一个bug,但是IE的非标准盒模型通常也很有用。所以CSS3引进了box-sizing属性,默认值是content-box,它指定了上面描述的标准的盒模型。如果替换为box-sizing:border-box,浏览器将会为那个元素应用IE的盒模型,即width和height属性将包括border和padding,当想以百分比形式为元素是指总体尺寸,又想以像素单位指定border和padding时,边框盒模型特别有用

div {
  box-sizing: border-box;
  width: 50%
  padding: 10px;
  border: solid black 2px;
}

box-sizing属性再当今所有浏览器中都支持,但是还没有不带前缀通用的实现。再Chrome和Safari中,使用-webkit-box-sizing.在Firefox中,使用-moz-box-sizing.在Opera和IE8及其更高的版本中,可以使用不带前缀的box-sizing.

边框盒模型在未来CSS3中的一个可选方案是使用盒子尺寸计算值;

div {
  width: calc(50%-12px);
  padding: 10px;
  border: solid black 2px;
}

在IE9中支持使用cale()计算CSS的值,在Firefox为-moz-cale()

你可能感兴趣的:(CSS盒模型)