盒模型

一个元素有内容, padding, border, margin 4 个属性,由这几个属性组成, 称为盒子

标准的盒模型(w3c标准)

W3C组织制定的标准中 padding, border 所设置的空间不在一个元素设置的Width / Height 里面

IE盒模型

与 W3C 相反, 一个元素的 padding, border 所占的空间在自身设置的 Width / Height 里面

ps : IE6 / 7 不支持 IE 盒模型


标准的盒模型


这是一个盒模型
这是一个盒模型
从效果中可以看到第二个 box 换行到第二行去

<style type="text/css">
    div.container{
        width:30em;
        border:1em solid;
    }
    div.box{
        box-sizing:content-box;
        width:50%;
        border:1em solid red;
        float:left;
    }
    div.box + .box{
        border-color:blue;
    }
</style>
<div class="container clearfix">
    <div class="box">这是一个标准模型</div>
    <div class="box">这是一个标准盒模型</div>
</div>

IE盒模型


这是一个盒模型
这是一个盒模型
从效果中可以看到第二个并没有换行到第二行去


<style type="text/css">
    div.container{
      width:30em;
      border:1em solid;
    }
    div.box{
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* webkit */
        -ms-sizing:border-box; /* IE */
        width:50%;
        border:1em solid red;
        float:left;
    }
    div.box + .box{
        border-color:blue;
    }
</style>
<div class="container clearfix">
    <div class="box">这是一个盒模型</div>
    <div class="box">这是一个盒模型</div>
</div>