[toc] ## pre 在前端领域，一提到分离，作用一定是便于维护。比方说，样式和行为分离、前后端分离或则这里的"宽度分离"。 当一件事情的发展可以被多个因素所左右的时候，这个事情最终的结果就会变数很大不可预期。宽度在这里也是类似，由于盒尺寸中的4个盒子都能影响宽度，自然页面的最终宽度就很容易发生变化而导致意想不到的布局发生。 ## 什么是宽度分离原则 宽度分离，分离，分离，是将`width`与`padding/border/margin`进行分离。 ``` .father{ width:102px; } .son{ border:1px solid; padding:20px; } ```