關於css寬度分離

所謂寬度分離就是width 屬性不與影響寬度的 padding/border（有時候包括 margin）屬性共存

• 例如： .box{width:200px;padding:20px;border:1px solid;}

爲什麼要作寬度分離

• 一說到分離就是爲了好維護，好比常說的樣式和行爲分離、先後端分離、亦或者這裏說的寬度分離
• 因爲dom的佔位尺寸受margin、border、padding、content的影響，好比後期設計師說要將元素邊框內有20px的空白，則會致使佈局發生意想不到的錯亂，這時候就須要從新計算width；以下例子：

// 這是初始樣式，元素寬102px
.box{
width:100px;
border:1xp solid;
}
// 加20padding,元素就變成142px，佈局不符合預期
.box{
width:100px;
padding:20px;
border:1px solid;
}
// 這時候就須要從新計算width，來保證元素佔的大小
.box{
width:60px;
padding:20px;
border:1px solid;
}

如何作寬度分離

• 在子元素外嵌套一層標籤，父元素定寬，子元素由於 width 使用的是默認值 auto，因此會充分利用可用空間，充滿父元素，這裏的子元素特指display爲block、list-item、flex等的塊級元素（不包括替換元素）

.father {
width: 102px;
}
.son {
border: 1px solid;
}
// 加padding 20px,佈局依舊不會亂，大小仍是102px,,不須要燒腦子去計算了，並且頁面結構反而更穩固
.father {
width: 102px;
}
.son {
padding:20px;
border: 1px solid;
}

box-sizing在沒有水平margin的時候能夠解決這樣的問題，實現真正無計算，而「寬度分離」策略則能夠完全解全部的寬度計算的問題