本文為學習《CSS世界》第 3 章后所作筆記。
思考一種情況，如果要在一個寬 100px 的盒子里排列幾個盒子，這幾個盒子的大小定了，現(xiàn)在要改變其中一個盒子的 padding，怎么做到改變它的 padding 之后它的大小不變 ？
給設置 padding、border，又不讓盒子大小改變，有 3 種方式：
1. 設置 box-sizing 屬性值 border-box。
2. 寬度不分離。在同一個聲明塊里設置 width、padding、border 這些屬性，當要重新設置 padding 或 border 時，重新計算寬度。
3. 寬度分離。
設置寬度時，最好的設置方式是寬度分離。
本文不討論第一種方式，設置 box-sizing 屬性值 border-box。
先來看一個例子，設置同等大小的、有內(nèi)邊距、邊框的盒子，通過寬度不分離與寬度分離的方式分別是怎么設置的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body>div{ margin: 10px; } .noSeparate{ width: 60px; padding: 10px; border: 10px solid red; } .father{ width: 100px; } .son{ padding: 10px; border: 10px solid red; } </style> </head> <body> <div class="noSeparate">寬度不分離</div> <div class="father"> <div class="son"> 寬度分離 </div> </div> </body> </html>
說明：
1. 寬度不分離
如果要設置 padding、border 為 10 px，整體寬度為 100 px，則需設置 width 為 60px。
如果此時想要改變 padding 為 20px 并且整體寬度仍為 100 px，則需要通過計算將 width 改為 40 px。
2. 寬度分離
寬度分離的做法是，在父元素里面設置整體寬度，在子元素里面設置 padding、border。
給父元素設置 width 為整體寬度 100 px，子元素的 width 默認屬性值是 auto，子元素就像水一樣流入父元素子元素的內(nèi)容寬度就是 100 px，給子元素設置 padding 為 10 px 后，子元素內(nèi)容寬度自適應變成 80 px，給子元素設置 border 為 10px 后，子元素內(nèi)容寬度自適應變成 60 px。
如果此時想要改變 padding 為 20px 并且整體寬度仍為 100 px，則只需要直接將 padding 改為 20px。
對比寬度不分離與寬度分離的做法，很明顯，寬度分離的做法更不易出錯。
浙公網(wǎng)安備 33010602011771號