2.看簡介理解的不夠深刻，偶屬於剛看完轉眼就能忘記的人。出於對自己的不放心，還是老老實實把例子拿到線下看看：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> .container { width:30em; border:1em solid; } .box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; border:1em solid red; float:left; } </style></head><body><p class="container"> <p class="box">這個 p 佔據了左邊的一半。.</p> <p class="box" style="border:1em solid #888;">這個 p 佔據了右邊的一半。</p></p></body></html>
用Firefox瀏覽器的firebug看看布局，更改box-sizing的屬性為content-box（或者說去掉box-sizing，預設box-sizing:content-box）後，如所示。
對比後發現：
當類名為.container的父元素的box-sizing沒有設定，即為預設值content-box時或者box-sizing:border-box時，分以下兩種情況：
（最外層的父元素）
1）當兩個子項目的box-sizing:border-box時，width為208px，算上設定的border-left-width與border-right-width（都是16px）才是240px，即為父元素width的一半，如所示（左邊為布局圖，右邊為頁面實際效果）：（即為父元素width+border-left-width+border-right-width的一半）
2）當兩個子項目的box-sizing:content-box時，width為240px，padding與margin均被排除在外，如所示（左邊為布局圖，右邊為頁面實際效果）：
3.當給一個元素設定box-sizing:border-box時，實際就是令其 width = padding-left + padding-right + border-left-width + border-right-width，但是不包含margin-left與margin-right。
好了，總算明白些了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
