本文為學習《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號