关于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的时候能够解决这样的问题，实现真正无计算，而“宽度分离”策略则能够完全解全部的宽度计算的问题