CSS盒模型|极客教程

CSS盒模型

CSS盒模型是指在网页布局中，每个元素被看作是一个矩形的盒子，这个盒子由四部分组成：content（内容）、padding（内边距）、border（边框）和margin（外边距）。这些部分共同构成了元素的外观和排列方式。

盒模型的组成

内容（Content）

内容指的是盒子中实际包含的HTML元素内容，如文字、图片、视频等。内容的大小由元素本身的宽度（width）和高度（height）属性决定。

内边距（Padding）

内边距指的是内容与边框之间的距离，可以通过padding属性设置。padding可以分为上下左右四个方向的值，也可以使用缩写方式同时设置四个方向的值，例如padding: 10px 20px 30px 40px;，分别代表上、右、下、左四个方向的内边距。

边框（Border）

边框是包围在内容和内边距外部的一条线条，它分为边框宽度、边框样式和边框颜色三个部分。可以使用border属性设置边框的大小、样式和颜色。

外边距（Margin）

外边距指的是盒子与其他元素之间的距离，可以通过margin属性设置。与内边距类似，margin也可以分为上下左右四个方向的值，也可以使用缩写方式同时设置四个方向的值。

盒模型的排列方式

标准盒模型

在标准盒模型下，元素的大小是由内容的宽度和高度决定的，而内边距、边框和外边距会在内容框的外部。

怪异盒模型

在怪异盒模型下，元素的大小是由内容框加上内边距、边框和外边距的总和决定的。也就是说，内容框的大小会受到内边距、边框和外边距的影响。

CSS属性

box-sizing

box-sizing属性可以控制元素的盒模型类型，有两个可选值：

content-box：标准盒模型，元素的大小由内容框的宽度和高度决定。
border-box：怪异盒模型，元素的大小由内容框加上内边距、边框和外边距的总和决定。

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 20px;
    box-sizing: border-box;
}

padding

padding属性用来设置元素的内边距，可以设置四个方向的值，也可以使用缩写方式同时设置四个方向的值。

.box {
    padding: 10px; /* 上下左右内边距均为10px */
}

border

border属性用来设置元素的边框样式、宽度和颜色，分别对应三个子属性：border-width、border-style和border-color。

.box {
    border: 2px dotted red; /* 宽度为2px、样式为虚线、颜色为红色的边框 */
}

margin

margin属性用来设置元素的外边距，与padding类似可以设置四个方向的值，也可以使用缩写方式同时设置四个方向的值。

.box {
    margin: 20px; /* 上下左右外边距均为20px */
}

实例演示

下面通过一个简单的示例来演示CSS盒模型的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒模型</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 2px solid black;
            margin: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</body>
</html>

在这个示例中，我们定义了一个名为box的div元素，设置了宽度为200px、高度为100px，内边距为10px，边框宽度为2px，外边距为20px，盒模型类型为怪异盒模型。页面中的内容会被包裹在这个盒子中，并根据设置的属性进行展示。