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

最新推荐文章于 2016-11-24 11:12:35 发布

原创最新推荐文章于 2016-11-24 11:12:35 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #border #firefox #class #safari #div

css3.0 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS3中的box-sizing属性改变div元素的传统盒状模型布局方式，通过实例展示了如何将边框和填充置于内容区域之内。

文章来自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