css3.0抢先看(九)：box-sizing改变盒状模型结构

文章来自www.css3s.cn

纵所周知div的盒状模型包括margin,border,padding和content四个部分.这四者的关系就无需我在这里班门弄斧啦.但是和今天主题又关的还是得说一下,那就是border里面是padding,padding里面是content.然而我们可以在css3.0中打破这一结构.使之变成content里面是border,border里面是padding.要实现这一切得建立在一个条件之下:box-dizing:border-box;

以下引用了个例子,该例子是针对firefox的,因为目前只有firefox,Safari 3和opera支持.

 

文本内容

文本内容.

代码如下:


<style type="text/css">
div.container {
    width:400px;
    border:10px solid black;
    height:40px;
}

div.split {
    -moz-box-sizing:border-box;
     width:50%;
     height:40px;
     border:10px silver ridge;
     float:left;
     padding:5px;
}
</style>
<div class="container">
<div class="split">文本内容</div>
<div class="split">文本内容.</div>
</div>

有兴趣的朋友可以在firefox中用firebug检验一下.
文章来自www.css3s.cn