1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #content{width:440px;height:200px;border:1px solid #f45} 8 #nei{width:100px;background:#f45;border:20px solid #f0f;height:100px;padding:30px; 9 margin:20px; 10 box-sizing: border-box;} 11 .h{width:10px;height: 10px;background:#00f;} 12 .content{width:100%;height:20px;background:#00f;} 13 .tip{width:50%;padding:10px;box-sizing: border-box;background:#f0f;float:left;border:3px solid #ff0} 14 </style> 15 </head> 16 <body> 17 <div id="content"> 18 <div id="nei"> 19 <div class="h"></div> 20 </div> 21 </div>s 22 <div class="content"> 23 <div class="tip"></div> 24 <div class="tip"></div> 25 </div> 26 <!--order-box,含义是将盒子的border和padding计算到设置的width中，而不是实际宽度中。所以， 27 如果你设置width为100px，而border为1px的时候，盒子的实际大小仍旧是100px而不是102px。用这个属性，--> 28 </body> 29 </html>
学习内容源自：http://www.cnblogs.com/constantince/p/4896419.html