Css 简明教程

CSS - Box Model

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

CSS Box Model is a fundamental concept in CSS (Cascading Style Sheets) that define how an elements on a web page will be structured and displayed. It defines the properties and behavior of the content, padding, borders, and margins of an element. Here in this article you will learn all about the CSS Box Model.

What is CSS box model?

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

The CSS box model is a container that used to structure the elements in a webpage so the element can be displayed visually good. It consists of four essential components content, padding, border, and margin, as shown in the following diagram.

CSS Box Model Components

我们详细了解每个组件。

Lets understand each components in detail.

Content: This is the innermost part of the box and refers to the actual content of an element, such as text, images, or other media. You can set its size using the properties such as inline size and block-size, also known as width and height.
Padding: Represents the space between the content and the element’s border. It can be applied separately to each side of the element (top, right, bottom, and left). The size of this box is set using padding and other related properties.
Border: Defines a line or boundary around the padding and content of an element. The size, style and color of this box is set using border and other related properties.
Margin: Represents the space outside the border of an element. Like padding, margins can also be set separately for each side and are typically used to create space between elements on a webpage. The size of this box is set using margin and other related properties.

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

The total space of an element occupies on the web page is the sum of its content width, padding, border, and margin. Understanding the CSS Box Model is crucial for designing and positioning elements on a webpage, as it allows you to control spacing, layout, and overall design.

Types of Box-Model

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

There are two types of box models as listed below.

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

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

Browsers use the standard box model, by default. Let us look into both the types of box models in the following sections.

Standard CSS Box Model

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

In standard box-model, height and width properties include only the content area of element. Padding, borders, and margins are added outside the content area.

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

Consider the following styling box. Let us calculate the actual space taken by the box:

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

Standard Box Model Dimension Calculation

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

The box area is only upto the margin, and thus margin area does not add up to the final space taken by the box.

Total width = 300(width) + 15(left padding) + 15(right padding) + 5(left border) + 5(right border) = 340px
Total height = 100(height) + 15(top padding) + 15(bottom padding) + 5(top border) + 5(bottom border) = 140px

Standard Box-Model Example

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

The following example shows how to define a standard box model in HTML. Here we given the default value content-box for box-sizing property. Here we can notice that width of padding and border is included in offsetWidth of the element.

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

In case of an alternative box model, the actual width of an element is the value of width that is passed to it and same is the case with height. There is no need of adding the padding and border while calculating the actual size of the box. In order to enable or turn on the alternative box model for an element, you need to set box-sizing: border-box on it.

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

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

Let us consider the same dimensions of the box, as mentioned in standard box model example and calculate the actual space taken by the box:

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

Alternate Box Model Dimension Calculation

盒子的空间尺寸为：

The space taken by the box having dimensions listed up will be.

Total width = width = 300px
Total height = height = 100px

Alternative Box-Model Example

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

Here is an example alternative box models. Here we changed box-sizing property to border-box, hence total width of element not include width of border and padding.

<!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: The box model allows developers to visualize and understand how elements are structured and how they will appear on the web page.
Layout and Positioning: The box model affects the layout and positioning of elements on a web page.
Size Calculations: The box model allows for precise calculations of element dimensions, including the width and height.
Control and Customization: With the box model, developers have fine-grained control over the appearance of elements.
Responsive Design: The box model plays a crucial role in responsive web design, where elements need to adapt and respond to different screen sizes and devices.

Box Model & Inline Boxes

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

The inline elements also have boxes around them. They also have margin, padding, borders, just like any other box.

Example

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

Here is an example where the box model around an inline element <p> is explained. Refer the diagram for detail description.

<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 的值会将其他元素从盒子中移开。

An element with display: inline-block, respects the width* and *height values. And the values of padding, border, and margin will push away other elements, from the box.

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

This feature is useful in cases where you want to give a larger area for an element, for example, a link <a>. You can use the display: inline-block on that element along with padding and other related properties.

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

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

Here in the code try to reduce the margin, padding, or border, to see the shift in the inline elements.

<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 offers different types of boxes that are either block boxes or inline boxes. The way these boxes are displayed, it can be of two types: inner display type and outer display type.

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

Display of a box can be set using the display property of CSS, which have various values. Based on these values the display can be determined.

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

Refer the diagram for a better understanding of 'display: block | inline'.

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

For detailed information and examples of display property in CSS, visit CSS display property article.