笔记--CSS的“宽度分离原则”

css宽度分离原则

1、“宽度分离原则”是什么？

所谓的宽度分离原则，指的是css中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存，不能出现下列组合：

.box {
    width: 100px;
    border: 1px solid;
}

不这么写，该怎么写呢？很简单，分离，width独立占用一层标签，padding、border和margin则利用流动性在内部自适应呈现：

.father {
    width: 180px;
}
.son {
    margin: 0 20px;
    padding: 20px;
    border: 1px solid;
}

 

2、为什么要宽度分离？

•  在前端领域，提到分离，作用一定是便于维护。比方说。样式和行为分离、前后端分离等；
•  由于盒尺寸的4个盒子都能影响宽度，使得页面元素的最终宽度就很容易发生变化而导致意想不到的布局发生。如下css：

box {
    width: 100px;
    border: 1px solid red;
}

此时，盒子的宽度为102px,如果元素边框内有20px的留白，这时，我们会设置：

.box {
    padding: 20px;
    width: 100px;
    border: 1px solid red;
}

结果此时的宽度变为了142px,比原来大了40px,这就很容易导致布局出现问题。为了不影响之前的布局，我们需要通过计算减去40px的padding大小才行：

.box {
    padding: 20px;
    width: 60px;            // 通过计算减去40px
    border: 1px solid red;
}

但是，如果我们使用了宽度分离，就简单了许多：

.box-father {
    width: 100px;
}
.box {
    padding: 20px;
    border: 1px solid red;
}

嵌套一层标签，给父元素设置宽度，子元素因为width使用的是默认值auto，所以会自动填满容器。因此子元素的content box的宽度就是58px。我们发现，我们没有进行任何计算，宽度却变化了，就是这么智能。