CSS盒模型精讲

盒子模型是网页设计中经常使用的一种思维模型，它由四个部分组成，从内到外：内容、内边距、边框、边距 CSS 是与这四个部分相关的一组盒子，可以丰富盒子。通过提供属性并设置这些属性。

网页的每个元素都可以被视为一个盒子模型，如下图所示。

[标题id =“attachment_576”对齐=“aligncenter”宽度=“365”]

图：盒子模型[/标题]

内容区

内容区域是整个盒子模型的中心，包含盒子的主要内容，即文本、图像等资源。内容区域具有三个属性：宽度、高度和溢出。宽度和高度属性用于指定框内容区域的宽度和高度。内容区域具有三个属性：宽度、高度和溢出属性。设置溢出如果超过配置的范围内容如何处理。溢出属性有四个可选值。

hidden：表示隐藏溢出部分。
可见：表示悬垂可见（悬垂显示在框外）。
scroll：表示在内容区域添加滚动条。您可以滑动滚动条查看内容区的全部内容。
auto：表示浏览器决定如何处理溢出。

下面的代码显示了一个盒模型的内容区域。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">ボックスモデル</div>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_578”对齐=“aligncenter”宽度=“731”]

图：内容区演示[/caption]

上左图的盒模型示意图在浏览器的调试工具中看到，可以通过按快捷键F12或者右键单击页面并在弹出的菜单中选择“Inspect”选项来打开.

填充

padding 是内容区域和边框之间的空间，使用 padding-top、padding-right、padding-bottom、padding-left 及其简写属性 padding 可以填充内容区域和边框之间的所有空间。距离。设置盒模型的背景属性时，背景属性可以覆盖填充区域。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">ボックスモデル</div>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_579”对齐=“aligncenter”宽度=“982”]

图：填充演示[/caption]

边界

边框是内容区域和填充周围的边界。您可以使用 border-style、border-width、border-color 及其缩写属性 border 设置边框样式。其中，border-style属性是边框中最重要的属性，如果不设置该属性，其他边框属性也会被忽略。

注意：在IE浏览器中，背景属性不会覆盖边框区域，但在其他主流浏览器中，如果边框设置为点线，则背景属性可以覆盖边框区域。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid black;
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            border: 10px dashed red;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">ボックスモデル</div>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_580”对齐=“aligncenter”宽度=“1024”]

图：填充演示[/caption]

利润

外边距位于盒子模型的最外边缘，是边框之外的空间，通过外边距，盒子之间不能紧密相连，是CSS布局的重要手段，可以使用margin-top、margin。 -bottom、margin-left、margin-right 及其简写属性 margin 用于设置每个方向的边距宽度。

对于两个相邻（水平或垂直）的边距框，它们之间的距离是它们边距中的较大者，而不是它们边距的总和。还可以将外边距值设置为负值。如果外边距值为负值，则整个盒子将向相反方向移动，一旦达到一定程度，盒子就会重叠。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid black;
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            border: 10px dashed red;
            padding: 20px;
            margin: 15px;
            background: #CCC;
        }
        div.box-two {
            width: 50px;
            height: 50px;
            border: 10px dotted black;
            padding: 20px;
            margin: 20px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">ボックスモデル</div>
        <div class="box-two"></div>
    </div>
</body>
</html>

执行结果如下图所示。

当您使用 CSS 中的 width 和 height 属性设置元素的宽度和高度时，您实际上只是设置了元素内容区域的宽度和高度；您还设置了元素的实际宽度和高度。其他因素：

总宽度：宽度+左内边距+右内边距+左边框+右边框+左外边距+右外边距
总高度：高度 + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

JSON

盒子模型是网页设计中经常使用的一种思维模型，它由四个部分组成，从内到外：内容、内边距、边框、边距 CSS 是与这四个部分相关的一组盒子，可以丰富盒子。通过提供属性并设置这些属性。

网页的每个元素都可以被视为一个盒子模型，如下图所示。

[标题id =“attachment_576”对齐=“aligncenter”宽度=“365”]

图：盒子模型[/标题]

内容区

内容区域是整个盒子模型的中心，包含盒子的主要内容，即文本、图像等资源。内容区域具有三个属性：宽度、高度和溢出。宽度和高度属性用于指定框内容区域的宽度和高度。内容区域具有三个属性：宽度、高度和溢出属性。设置溢出如果超过配置的范围内容如何处理。溢出属性有四个可选值。

hidden：表示隐藏溢出部分。
可见：表示悬垂可见（悬垂显示在框外）。
scroll：表示在内容区域添加滚动条。您可以滑动滚动条查看内容区的全部内容。
auto：表示浏览器决定如何处理溢出。

下面的代码显示了一个盒模型的内容区域。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">ボックスモデル</div>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_578”对齐=“aligncenter”宽度=“731”]

图：内容区演示[/caption]

上左图的盒模型示意图在浏览器的调试工具中看到，可以通过按快捷键F12或者右键单击页面并在弹出的菜单中选择“Inspect”选项来打开.

填充

padding 是内容区域和边框之间的空间，使用 padding-top、padding-right、padding-bottom、padding-left 及其简写属性 padding 可以填充内容区域和边框之间的所有空间。距离。设置盒模型的背景属性时，背景属性可以覆盖填充区域。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">ボックスモデル</div>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_579”对齐=“aligncenter”宽度=“982”]

图：填充演示[/caption]

边界

边框是内容区域和填充周围的边界。您可以使用 border-style、border-width、border-color 及其缩写属性 border 设置边框样式。其中，border-style属性是边框中最重要的属性，如果不设置该属性，其他边框属性也会被忽略。

注意：在IE浏览器中，背景属性不会覆盖边框区域，但在其他主流浏览器中，如果边框设置为点线，则背景属性可以覆盖边框区域。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid black;
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            border: 10px dashed red;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">ボックスモデル</div>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_580”对齐=“aligncenter”宽度=“1024”]

图：填充演示[/caption]

利润

外边距位于盒子模型的最外边缘，是边框之外的空间，通过外边距，盒子之间不能紧密相连，是CSS布局的重要手段，可以使用margin-top、margin。 -bottom、margin-left、margin-right 及其简写属性 margin 用于设置每个方向的边距宽度。

对于两个相邻（水平或垂直）的边距框，它们之间的距离是它们边距中的较大者，而不是它们边距的总和。还可以将外边距值设置为负值。如果外边距值为负值，则整个盒子将向相反方向移动，一旦达到一定程度，盒子就会重叠。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid black;
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            border: 10px dashed red;
            padding: 20px;
            margin: 15px;
            background: #CCC;
        }
        div.box-two {
            width: 50px;
            height: 50px;
            border: 10px dotted black;
            padding: 20px;
            margin: 20px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">ボックスモデル</div>
        <div class="box-two"></div>
    </div>
</body>
</html>

执行结果如下图所示。

当您使用 CSS 中的 width 和 height 属性设置元素的宽度和高度时，您实际上只是设置了元素内容区域的宽度和高度；您还设置了元素的实际宽度和高度。其他因素：