CSS 入门教程(3)：盒子模型

css 评论

CSS 盒子模型

在 CSS 中，术语“盒子模型”用于谈论设计和布局。

CSS 盒子模型本质上是一个包裹每个 HTML 元素的盒子。它由边距、边框、填充和实际内容组成。下图说明了盒子模型：

css-box.png

为了更好地理解这个概念，让我们举一个例子。创建一个 index.html 文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <div>This is a CSS box</div>
        <div>This is a CSS box</div>
        <div>This is a CSS box</div>
    </body>
</html>

这是一个经典的 html 文档，带有指向外部 css (main.css) 的链接和三个简单的 div

在 main.css 中插入以下行：

1
2
3
4
5
6
div {
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 0;
}

这个 css 为我们的 div 创建了一个样式
css-box-1.png

边距、边框、填充

现在让我们回顾一下这 3 个属性，并了解它们如何影响 CSS 框。

填充

填充是内容周围的空间。在我们的示例中，填充是 div 文本和 div 边框之间的空间。让我们将填充更改为零，看看会有什么附加内容。

1
2
3
4
5
6
div {
    width: 200px;
    padding: 0;
    border: 2px solid gray;
    margin: 0;
}

css-box-2.png

将填充设为零可消除边框和内容之间的空间。

边框

边框围绕填充和内容。边框可以是可见的，也可以是不可见的，并且可以具有不同的样式和高度。

边距

边距是边框外的空间。在我们的示例中，div 之间没有空间。让我们改变这一点。

1
2
3
4
5
6
div {
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}

将边距设置为 10px；在每个 div 周围设置 10px 的空间：

css-box-3.png

块与内联

CSS 框模型可以有两种显示样式：块或内联块。

块级元素始终从新行开始并占据整个可用宽度（尽可能向左和向右延伸）。

块元素示例：div、h1 和 form

内联

内联元素不从新行开始，只占用必要的宽度。

内联元素示例：span、a 和 img

让我们回顾一下我们之前的例子。如前所述，div 默认具有块显示样式。让我们将其更改为内联块样式。

1
2
3
4
5
6
7
div {
    display: inline;
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}

css-box-4.png

内联与内联块

与 display: inline 相比，主要区别在于内联块允许设置元素的宽度和高度。此外，使用 display: inline 时，顶部和底部边距和填充不受尊重，而使用 display: inline-block 时则受尊重。

让我们将示例更改为 display: inline-block

1
2
3
4
5
6
7
div {
    display: inline-block;
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}

css-box-5.png

与内联相比，宽度、顶部和底部边距和填充均受尊重。

边距和填充

到目前为止，我们使用一个边距和填充数字值，但很高兴知道我们可以单独应用边距和填充。

可用属性为：

  • margin-top | padding-top
  • margin-right | padding-right
  • margin-bottom | padding-bottom
  • margin-left | padding-left
1
2
3
4
div {
    margin-left: 10px;
    padding-top: 20px;
}

还可以使用简写属性设置边距和填充：

1
2
3
4
div {
    margin: 10px 0px 5px 20px;
    padding: 20px 10px;
}

这相当于：

1
2
3
4
5
6
7
8
9
10
11
12
div {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 20px;

    padding-top: 20px;
    padding-bottom: 20px;

    padding-right: 10px
    padding-left: 10px;
}

边框

CSS 边框属性允许你指定元素边框的宽度、样式和颜色。

border-style 属性指定要显示的边框类型。
border-style 的一些示例如下：

  • solid 实线
  • dotted 点线
  • dashed 虚线
  • double 双线
  • none 无

border:宽度 样式 颜色；

1
2
3
4
5
6
7
div {
    display: inline-block;
    width: 200px;
    padding: 10px;
    border: 2px dotted gray;
    margin: 10px;
}

我们还可以使用 border-radius 来设置圆形边框：

1
2
3
4
5
6
7
8
div {
    display: block;
    width: 200px;
    padding: 5px;
    border: 2px solid gray;
    margin: 10px;
    border-radius: 16px;
}

css-box-6.png

高度和宽度

CSS 高度和宽度属性用于设置元素的高度和宽度

高度和宽度属性不包括填充、边框或边距。它设置元素填充、边框和边距内区域的高度/宽度。

1
2
3
4
5
6
div {
    height: 100px;
    width: 50%;
    background-color: lightgray;
    margin: 5px;
}

因此在该示例中，元素的高度为 100px，宽度为包含块的 50%。

css-box-7.png

相关文章：

WilliamWeb Full Stack developer

致力于网站建设与Web开发。喜欢新事物，关注前后端动态，对新的技术有追求， 做一个优秀的web全栈工程师。