Css 简明教程

CSS - Box Model

CSS 盒模型是 CSS（层叠样式表）中的一个基本概念，它定义了如何构建和显示 Web 页面上的元素。它定义了元素的 * content* 、 * padding* 、 * borders* 和 * margins* 的属性和行为。在本文中，你将了解有关 CSS 盒模型的所有信息。

What is CSS box model?

CSS 盒模型是一个容器，用于构造网页中的元素，这样元素就可以很好地视觉显示。它包含四个基本组件 content, padding, border, 和 margin ，如下所示。

CSS Box Model Components

我们详细了解每个组件。

Content: 这是该框的最内层部分，它指的是元素的实际内容，例如文本、图像或其他媒体。你可以使用诸如 * inline size* 和 * block-size* 的属性来设置其大小，它们也称为 width 和 height 。
Padding: 表示内容与元素边框之间的空间。可以将其分别应用于元素的每一侧（顶部、右侧、底部和左侧）。此框的大小使用 * padding* 及其他相关属性设置。
Border: 定义元素的填充和内容周围的一条线或边界。此框的大小、样式和颜色使用 * border* 及其他相关属性设置。
Margin: 表示元素边框外部的空间。与填充类似，页边距也可以针对每一侧分别设置，并且通常用于在网页上的元素之间创建空间。此框的大小使用 * margin* 及其他相关属性设置。

元素在网页中占据的总空间是其内容宽度、内边距、边框和外边距的总和。了解 CSS 盒模型对于在网页上设计和定位元素至关重要，因为它允许您控制间距、布局和整体设计。

Types of Box-Model

以下列出了两种类型的盒子模型。

Standard Box Model (Content-Box)
Alternative Box Model (Border-Box)

浏览器默认使用标准盒子模型。让我们在以下部分中研究这两种类型的盒子模型。

Standard CSS Box Model

在标准盒模型中，高度和宽度属性仅包括元素的内容区域。内边距、边框和外边距被添加到内容区域之外。

考虑以下样式框。让我们计算方框实际占据的空间：

.box {
   width: 300px;
   height: 100px;
   margin: 20px;
   padding: 15px;
   border: 5px solid green;
}

Standard Box Model Dimension Calculation

框区域仅限于外边距，因此外边距区域不会增加到框最后占据的空间。

总宽度 = 300（宽度）+ 15（左内边距）+ 15（右内边距）+ 5（左边界）+ 5（右边界）= 340px
总高度 = 100（高度）+ 15（上内边距）+ 15（下内边距）+ 5（上边界）+ 5（下边界）= 140px

Standard Box-Model Example

以下示例演示如何在 HTML 中定义标准盒子模型。这里我们在 box-sizing 属性中给出了默认值 content-box 。我们这里可以注意到内边距和边框的宽度包括在元素的偏移宽度中。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 300px;
            height: 100px;
            padding: 20px;
            border: 10px solid black;
            margin: 30px;
            /* This is the default value */
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="box" id="myBox">
      Total Width = 300 (content) + 20 (padding
      left) + 20 (padding right) + 10 (border
      left) + 10(border right) = 360 px
    </div>
    <p id="dis"></p>

    <script>
        // Get the div element
        var box = document.getElementById('myBox');
        // Get total width of element
        var totalWidth = box.offsetWidth;

        document.getElementById('dis').innerText =
        'Width of the div using offsetWidth property: '
        + totalWidth + 'px';
    </script>
</body>
</html>

Alternative Box Model

对于备选盒子模型，元素的实际宽度是传递给它的 width 的值，高度也是如此。在计算框的实际大小时无需添加内边距和边框。要为元素启用或启用备选盒子模型，您需要在其上设置 box-sizing: border-box 。

.box {
    box-sizing: border-box;
}

让我们考虑在标准盒子模型示例中提到的相同盒子尺寸，并计算盒子占据的实际空间：

.box {
   width: 300px;
   height: 100px;
   margin: 20px;
   padding: 15px;
   border: 5px solid green;
   box-sizing: border-box;
}

Alternate Box Model Dimension Calculation

盒子的空间尺寸为：

总宽度 = 宽度 = 300px
总高度 = 高度 = 100px

Alternative Box-Model Example

这里有一个备选盒子模型示例。我们在这里将 box-sizing 属性更改为 border-box ，因此元素的总宽度不包括边框和内边距的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 300px;
            height: 150px;
            padding: 20px;
            border: 10px solid black;
            margin: 30px;
            /* Change this property to see difference */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box" id="myBox">
        Total Width = 300 px <br>
        Total Height = 150 px

    </div>
    <p id="dis"></p>

    <script>
        // Get the div element
        var box = document.getElementById('myBox');
        // Get the total width of element
        var totalWidth = box.offsetWidth;

        document.getElementById('dis').innerText =
        'Total width of div using offsetWidth property: '
        + totalWidth + 'px';
    </script>
</body>
</html>

Significance of Box-Model

Visual Representation: 盒子模型允许开发者可视化并理解元素如何构建以及它们将在网页上如何显示。
Layout and Positioning: 盒子模型影响网页上元素的布局和定位。
Size Calculations: 盒子模型允许精确计算元素尺寸，包括宽度和高度。
Control and Customization: 使用盒子模型，开发者可以精细控制元素的显示。
Responsive Design: 盒模型在响应式网页设计中发挥着至关重要的作用，需要元素适应和响应不同的屏幕尺寸和设备。

Box Model & Inline Boxes

内联元素周围也有盒子。它们也像其他任何盒子一样具有外边距、内边距和边框。

Example

下面是一个解释了内联元素周围的盒模型 <p> 的示例。参阅图表以获取详细信息。

<html>
<head>
<style>
   p {
      padding: 1em 2em;
      margin: 5px 10px;
      border: 5px solid red;
      width: 200px;
   }
</style>
</head>
<body>
   <h1>Box model</h1>
   <p>Example for a box model.</p>
</body>
</html>

Display as Inline Block

具有 display: inline-block 的元素需要遵守 * width* and * * height 值。 padding, border, 和 margin 的值会将其他元素从盒子中移开。

此功能在需要为元素提供更大区域时很有用，例如链接 <a> 。您可以在该元素上使用 display: inline-block ，以及 padding 和其他相关属性。

Example 1

<html>
<head>
<style>
   a {
      padding: 1em 2em;
      margin: 5px 10px;
      border: 5px solid red;
      width: 50px;
      display: inline-block;
      background-color: beige;
      font-size: 1em;
   }
</style>
</head>
<body>
   <h1>display: inline-block</h1>
   <a href="">First</a>
   <a href="">Second</a>
   <a href="">Third</a>
</body>
</html>

Example 2

在此代码中尝试减小外边距、内边距或边框，以查看内联元素中的偏移。

<html>
<head>
<style>
   a {
      padding: 0em 2em;
      margin: 10px 10px;
      border: 5px solid red;
      width: 50px;
      background-color: beige;
      font-size: 1em;
   }
</style>
</head>
<body>
   <p>
      The display:inline-block respects the
      width of the element. Here it is applied
      on the link <a href="">First</a>.
      As you change the value of padding, margin
      or/and border you can see the change.
    </p>
</body>
</html>

Block and Inline Boxes

CSS 提供了不同类型的盒子，它们可以是 block boxes 或 inline boxes 。根据显示这些盒子的方式，可以将其分为 inner display type 和 outer display type 。

可以使用 CSS 的 display 属性设置盒子的显示方式，该属性具有各种值。显示方式可以基于这些值确定。

参阅图表以更好地理解 'display: block | inline' 。

有关 CSS 中 display 属性的详细信息和示例，请访问 * CSS display property article.*