怪异模型 和 标准模型
<!-- 以下实际内容宽高,不包括margin
标准:box-sizing:content-box; 搜狗:biaozhunmoxing,guaiyimoxing
1,标准盒模型:是有W3C组织指定的,除了IE低版本外,基本所有的浏览器都遵循这个标准。
实际宽度:width + padding + border;
实际高度:height + padding + border;
2,怪异:box-sizing:border-box;
怪异盒模型:只在IE6,7,8中使用。
当width给值就不会改变 ,而里面的内容宽度会随着padding 和 border 变大而改变
当height给值就不会改变 ,而里面的内容宽度会随着padding 和 border 变大而改变 -->
<!--使用怪异模型的好处:
把一个盒子四等分,且可以任意设置边框 -->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .one{ 8 width: 800px; 9 height: 400px; 10 margin: 20px auto; 11 /* background: #00f; */ 12 border: 1px solid red; 13 box-sizing: border-box;//怪异模型,可以随便设置border padding 14 } 15 .two{ 16 float: left; 17 width: 25%; 18 height: 100%; 19 box-sizing: border-box;//怪异模型,可以随便设置border padding 20 } 21 .one > div:nth-child(odd){ 22 background: #f0f; 23 border: 1px solid #0f0; 24 } 25 .one > div:nth-child(even){ 26 background: #00f; 27 border: 10px solid #f38383; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="one"> 33 <div class="two">1</div> 34 <div class="two">2</div> 35 <div class="two">3</div> 36 <div class="two">4</div> 37 </div> 38 </body> 39 </html>