css新属性box-sizing应用 

 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

posted @ 2015-10-22 10:54  挥刀  阅读(173)  评论(0)  编辑  收藏  举报