css3笔记——盒模型解析模式,box-sizing属性

css3规范中新增了UI(User-Interface)模块,用来控制互用界面的呈现方式。符合标准的现代浏览器中盒子的width和height属性代表的是盒子的content区域,而在ie7以下的浏览器中对元素的呈现方式中border和padding都包含在width和height中,这样就造成了混乱,因此css3中新增了box-sizing属性来定义盒模型的尺寸解析方式,其值有:

  • content-box:该属性维持css3以前盒模型的组成模式,即元素width/height=border+padding+content。
  • border-box:标准值,即元素width/height=content。

首先css的代码为:

.box { width:250px; height:250px; border:5px solid #690; padding:10px; background-image:url(http://hiwcc.b0.upaiyun.com/placeholder250.jpg); background-repeat:no-repeat; float:left; margin:20px; } #box1 { box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; } #box2 { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

由上述代码可知,盒子的width和height为250px,背景图的长宽也是250opx设置了10px的padding,由下图配合demo可知,左一和左二位标准呈现方式,也是现代浏览器的默认呈现方式,而左三即为content-box方式,将width/height呈现为border+padding+content。

[![css3-box-sizing](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/css3-box-sizing3.png "css3-box-sizing3")](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/css3-box-sizing3.png)css3-box-sizing

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus