宽度分离

本文为学习《CSS世界》第 3 章后所作笔记。

思考一种情况，如果要在一个宽 100px 的盒子里排列几个盒子，这几个盒子的大小定了，现在要改变其中一个盒子的 padding，怎么做到改变它的 padding 之后它的大小不变？

给设置 padding、border，又不让盒子大小改变，有 3 种方式：

　　1. 设置 box-sizing 属性值 border-box。

　　2. 宽度不分离。在同一个声明块里设置 width、padding、border 这些属性，当要重新设置 padding 或 border 时，重新计算宽度。

　　3. 宽度分离。

设置宽度时，最好的设置方式是宽度分离。

本文不讨论第一种方式，设置 box-sizing 属性值 border-box。

先来看一个例子，设置同等大小的、有内边距、边框的盒子，通过宽度不分离与宽度分离的方式分别是怎么设置的。

<!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>

View Code

说明：

1. 宽度不分离

　　如果要设置 padding、border 为 10 px，整体宽度为 100 px，则需设置 width 为 60px。

　　如果此时想要改变 padding 为 20px 并且整体宽度仍为 100 px，则需要通过计算将 width 改为 40 px。

2. 宽度分离

　　宽度分离的做法是，在父元素里面设置整体宽度，在子元素里面设置 padding、border。

　　给父元素设置 width 为整体宽度 100 px，子元素的 width 默认属性值是 auto，子元素就像水一样流入父元素子元素的内容宽度就是 100 px，给子元素设置 padding 为 10 px 后，子元素内容宽度自适应变成 80 px，给子元素设置 border 为 10px 后，子元素内容宽度自适应变成 60 px。

　　如果此时想要改变 padding 为 20px 并且整体宽度仍为 100 px，则只需要直接将 padding 改为 20px。

对比宽度不分离与宽度分离的做法，很明显，宽度分离的做法更不易出错。