css新属性box-sizing应用

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         #content{width:440px;height:200px;border:1px solid #f45}
         #nei{width:100px;background:#f45;border:20px solid #f0f;height:100px;padding:30px;
         margin:20px;
             box-sizing: border-box;}
         .h{width:10px;height: 10px;background:#00f;}
         .content{width:100%;height:20px;background:#00f;}
         .tip{width:50%;padding:10px;box-sizing: border-box;background:#f0f;float:left;border:3px solid #ff0}
     </style>
 </head>
 <body>
 <div id="content">
     <div id="nei">
         <div class="h"></div>
     </div>
 </div>s
 <div class="content">
     <div class="tip"></div>
     <div class="tip"></div>
 </div>
 <!--order-box,含义是将盒子的border和padding计算到设置的width中，而不是实际宽度中。所以，
 如果你设置width为100px，而border为1px的时候，盒子的实际大小仍旧是100px而不是102px。用这个属性，-->
 </body>
 </html>

学习内容源自：http://www.cnblogs.com/constantince/p/4896419.html