很多朋友們可能會疑惑，不知道box-sizing屬性是有什么作用，自己也很少會用到，但是想必不少人在做網頁布局的時候經常遇到一個問題就是我明明設置了父元素設置了假如是寬高500px，5個子元素左浮動設置寬高均是100px都設置有邊框。為什么第五個元素被擠下到第二排呢？
例子1：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>加邊框的</title> 6 <style> 7 .box{ 8 width: 300px; 9 height: 300px; 10 border: 1px solid black; 11 margin: 0 auto; 12 } 13 .first { 14 width: 150px; 15 height: 100px; 16 float: left; 17 background: pink; 18 border: 1px solid red; /*增加了邊框*/ /*解決方法在這里增加box-sizing:border-box*/ 19 } 20 .second { 21 width: 100px; 22 height: 100px; 23 background: blue; 24 float: left; 25 } 26 .third{ 27 width: 50px; 28 height: 100px; 29 float: left; 30 background: green; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div class="box"> 37 <div class="first">123</div> 38 <div class="second">456</div> 39 <div class="third">789</div> 40 </div> 41 </body> 42 </html>
效果如下：
此時你可能會疑惑，我明明設置了子元素總寬度跟父元素相等了，為什么子元素沒有合並到一行呢，請看代碼的第18行多個了邊框，邊框設置了1px，css默認情況下不會將邊框也計算在寬度內的所以你可以這樣計算字元素寬度：
子元素150px+100+2+50=302px；超出父元素300px，所以第三個元素才不會合並在一行內。寬度左右邊框共占用2px。
解決的方法：
1.父元素設置為302px。
2.在設置了邊框的子元素中增加：box-sizing:border-box;
box-sizing:border-box;的作用是將第三個子元素設置的寬度（包含邊框）一起算在width:100px里面。
box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。
content-box，border和padding不計算入width之內
padding-box，padding計算入width內
border-box，border和padding計算入width之內，其實就是怪異模式了~