border-box笔记

为什么是这两个属性?

从IE7-盒模型 到 W3C标准盒模型  

转载: http://www.cnblogs.com/wenhandi/p/7778757.html

怎么用?

转载: https://www.cnblogs.com/jackzhoumine/p/CSS3.html

例子

                                            图1

例子代码

<style> 
.container{
    width:30em;
    border:1em solid;
}
.box{
    width:50%;
    border:1em solid red;
    float:left;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
.box2{
    width: 15em;
    background: #fc0;
}
.pink{border-color: #f9c;}
</style>

<div class="container">
	<div class="box pink">这个 div 占据了左边的一半。</div>
	<div class="box">这个 div 占据了右边的一半。</div>
	<div class="box2">这是15em的盒子(注意看宽度)(240px)</div>
</div>