CSS盒子模型

页面上很多元素都可以看作是一个盒子，比如 <div></div> 、 <span></span> 、 <p></p> 等。

CSS的盒子模型（BoxModel），就是指盒子的外观，包括盒子的高度、宽度、边框、内边距、外边距等外观信息。

环境

• Ubuntu 20.04
• VSCode 1.67.2
• Firefox 100.0.2

块元素，行内元素，行内块元素

HTML元素可分为：

• 块元素：例如 div 、 p ，独占一行，可以设置宽高，默认占满宽度
• 行内元素：例如 span 、 a ，一行可有多个，不可设置宽高，默认本身内容宽度
• 行内块元素：例如 img 、 input ，一行可有多个，可以设置宽高，默认本身内容宽度

在css中可以转换显示模式：

• display: block ：转换为块元素；
• display: inline ：转换为行内元素；
• display: inline-block ：转换为行内块元素；

盒子模型简例

HTML元素在实际显示时，都可以看作是一个盒子。先看一个设置了宽高的盒子：

        .css1 {
            height: 300px;
            width: 300px;;
            background-color: blue;
        }
......
    <div class="css1">box1</div>

页面效果如下：

浏览器的 Web Developer Tools ，如下：

可见，左边是HTML代码，中间是选中的HTML元素的CSS，右边 Layout 显式了它的盒子模型信息。

本例中，div 设置了宽高和背景色。它的border、padding、margin都是0。

再看一个设置了border、margin、padding的盒子：

        .css2 {
            height: 300px;
            width: 300px;;
            background-color: blue;
            border: 10px solid;
            margin: 10px;
            padding: 10px;
        }
........
    <div class="css2">box2</div>

页面效果如下：

• border：宽度为10px的实线边框（默认是黑色）；
• padding：盒子里的内容 box2 距离内边距为10px；
• margin：盒子距离其它页面元素为10px（比如：距离左侧的页面边有了10px的距离）；

浏览器的 Web Developer Tools ，如下：

从Layout的盒子模型可见，border、padding、margin都是10。

注意：盒子的实际大小是 340 * 340 ，并不是设置的 300 * 300 。这是因为border和padding影响了盒子大小。已宽度为例，多出来 10 * 2 + 10 * 2 即40px，所以从300变成了340。margin虽然会影响页面布局，但属于盒子之外，并不影响盒子本身大小。

但是，如果盒子本身没有指定宽度（继承父亲的宽度），则padding不会撑开盒子宽度。但要注意，如果指定了 width: 100%; ，则padding也会撑开盒子宽度。

块级盒子水平居中

margin-left 和 margin-right 如果设置为 auto （同时盒子设置了宽度），则盒子会水平居中。

• margin-left: auto; margin-right: auto; ：显式指定；
• margin: auto; ：表示上下左右都是 auto ；
• margin: 0 auto; ：第1个参数值表示上下，第2个参数值表示左右；
• margin: 0 auto 0 auto; ：显式指定4个参数，顺序为上右下左；

例如：

        #div{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 0 auto;
        }
........
    <div id="div1"></div>

行内元素和行内块元素水平居中

只需给其父元素添加 text-align: center 样式。

例如：

        #div2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            text-align: center;
        }
........
    <div id="div2">
        <span>hello</span>
    </div>

效果如下：

如果希望垂直也居中，只需设置行高等于父元素行高：

        #span1 {
            line-height: 200px;
        }
........
    <span id="span1">hello</span>

效果如下：

padding和margin

很多情况下，用padding和margin可以达到差不多的效果，比如： A AA AAA AAAA AAAAA ，也就是各个盒子之间的距离相同，用padding或者margin都能做到。

        .css1 {
            padding: 20px;
        }

        .css2 {
            margin: 20px;
        }
........
    <span class="css1">A</span>
    <span class="css1">AA</span>
    <span class="css1">AAA</span>
    <span class="css1">AAAA</span>
    <span class="css1">AAAAA</span>

    <br>

    <span class="css2">A</span>
    <span class="css2">AA</span>
    <span class="css2">AAA</span>
    <span class="css2">AAAA</span>
    <span class="css2">AAAAA</span>

效果如下：

嵌套块元素塌陷

当嵌套块元素都指定了 margin-top 时，并不会达到预期效果。例如：

        .father {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 30px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-top: 50px;
        }
........
    <div class="father">
        <div class="son"></div>
    </div>

效果如下：

显然，父子元素的 margin-top 值虽然不一样，但是实际效果是一样的，都取了二者中较大值。本例中是子大于父，即使反过来也是一样的。

最简单的解决办法，是给父元素加上 overflow: hidden; 。效果如下：

圆角矩形

关键字： border-radius

例如：

        .css1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 30px;
        }

        .css2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 50%;
        }

        .css3 {
            width: 200px;
            height: 80px;
            background-color: blue;
            border-radius: 40px;
        }
........
    <div class="css1"></div>

    <p></p>

    <div class="css2"></div>
    
    <p></p>
    
    <div class="css3"></div>

效果如下：

盒子阴影

关键字： box-shadow

例如：

        div {
            height: 100px;
            width: 100px;
            background-color: blue;
        }

        div:hover {
            box-shadow: 10px 10px 10px -1px rgba(0, 0, 0, .5);
        }
........
    <div></div>
    <p></p>
    <div></div>

效果如下：

其中，第一个盒子没有鼠标hover，第二个盒子有鼠标hover。可见当鼠标hover时，盒子产生了阴影。

box-shadow 的参数分别为： h-shadow v-shadow blur spread color inset ，其具体含义，可以在浏览器工具里实时修改，查看效果（选中盒子，修改其css的属性值，页面会实时更新）。

注：rgba 里的 a 代表阿尔法，表示透明度，取值范围是从0到1。

注意：盒子阴影不占用空间。

文字阴影

关键字： text-shadow

例如：

        div {
            font-size: 50px;
            color: blue;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .5);
        }
........
    <div>Hello World!</div>

效果如下：