Articles
CSS简介
与盒模型相关的CSS属性

与盒模型相关的CSS属性

本文讲解了与盒模型相关的CSS属性。

您可以学习诸如宽度、高度和边距等属性的用法和语法。

YouTube Video

预览的HTML

css-box.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

与盒模型相关

width 和 height 属性 

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

width和height属性是用于指定元素宽度和高度的CSS属性。这些属性尤其用于设置块状元素、图片、视频等的大小。

  • 在width-height-fixed类中，宽度和高度被设置为固定值。
  • 在width-height-percent类中，宽度和高度被设置为百分比值。

可以指定的值

width和height属性可以设置以下值。

  • auto：默认大小。根据父元素自动调整大小。
  • 固定值：以像素、百分比或相对单位指定固定宽度。(ex: 100px, 50%, 10rem)
    • 例如，250px将元素大小设置为250像素，50%则将其设置为父元素大小的50%。
  • min-content：适应内容的最小尺寸。
  • max-content：适应内容的最大尺寸。
  • fit-content：根据内容的大小适当调整元素的尺寸。

指定最小值和最大值

min-width、max-width、min-height和max-height是用于设置元素宽度和高度尺寸限制的CSS属性。使用这些属性可以确保元素保持在特定的尺寸范围内。

margin 和 padding 属性 

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

margin和padding是用于控制盒模型中元素的外部间距和内部间距的CSS属性。它们用于调整元素之间的间距以使外观整洁。

  • 在 margin-padding 类中，同时指定了 margin 和 padding。在实线边框的外部有 margin 空间，在实线边框的内部有 padding 空间。
  • 在 margin-only 类中，仅指定了 margin。可以看到，与 margin-padding 类相比，蓝色区域更小，因为实线边框内没有 padding 空间。
  • 在 no-margin 类中，margin 和 padding 都被设置为 0。可以看到，蓝色区域被完全推到左边，因为实线边框的外部没有 margin 空间。

通过这种方式，margin 属性设置元素的外部空间，调整元素之间的距离。另一方面，padding 属性设置元素的内部空间，调整内容与边框之间的距离。

margin 属性

  • margin 属性设置元素的外部空间（边距）。它用于创建相邻元素之间的空间。可以指定以下值：。

  • 固定值：可以用像素、相对单位（em、rem）或百分比来指定边距的大小。(ex: 10px, 1em, 5%)

  • auto：用于使块级元素居中。当指定宽度时，会自动调整左右边距。

  • 正值和负值：正值扩大空间，负值则拉近元素之间的距离。

速记法： 

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

margin 属性可以接受 1 到 4 个值。

  • 一个值：适用于所有边。
  • 两个值：第一个值适用于上下，第二个值适用于左右。
  • 三个值：按顺序应用于上、左右、下。
  • 四个值：按顺序应用于上、右、下、左。

padding 属性

功能：

  • padding属性设置元素的内部空间（内边距）。用于在元素的内容与边框之间创建空间。可以指定以下值：。

  • 固定值：指定内边距的大小。(ex: 10px, 1em, 5%)

  • 不能使用负值。内边距的值只能定义为正数。

速记法： 

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

与margin类似，可以指定1到4个值。

  • 一个值：适用于所有边。
  • 两个值：第一个值适用于上下，第二个值适用于左右。
  • 三个值：按顺序应用于上、左右、下。
  • 四个值：按顺序应用于上、右、下、左。

box-sizing属性 

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing是一个CSS属性，用于控制元素宽度和高度的计算方式。

  • 在content-box类中，元素的宽度是360px。width为300px，加上左右padding共计40px，以及左右border共计20px，总宽度为360px。
  • 在border-box中，元素的宽度是300px。padding和border包含在指定的width中。

box-sizing的取值

box-sizing主要有两个取值：content-box和border-box，其中content-box是默认值。

content-box 
 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

当指定为content-box时，width和height仅设置内容的宽度和高度。添加padding和border后决定最终大小。换句话说，width和height只指内容区域。

在此示例中，指定的width为200px，但加入左右padding和border的宽度后，元素的最终实际宽度为260px。

border-box 
1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

当指定为border-box时，width和height包含padding和border在内进行计算。换句话说，指定的width和height成为内容、padding和border的总大小。

在这种情况下，指定的width为200px，由于padding和border也包含在内，元素的最终实际宽度仍然是200px。padding和border在其中被调整。

box-sizing差异总结

属性 计算方法 实际宽度计算
content-box（默认） width 仅指内容。添加了padding和border。 width + padding + border
border-box width 包含所有内容（包括内容、padding、border） 使用指定的 width 值。

box-sizing 的优点

  • 使用 border-box 可以稳定布局。添加 padding 或 border 不会改变指定的大小，使计算变得简单。

  • 在创建灵活布局时非常有用。在响应式设计或复杂布局中，通常使用 border-box 来避免意外的尺寸波动。

如何全局应用 border-box 

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

通过这种方式设置 CSS，可以将 border-box 应用于所有元素，避免意外的尺寸变化。

总结

  • box-sizing 控制元素的 padding 和 border 是否包含在其 width 和 height 中。
  • 使用 border-box 使尺寸计算更简单，适用于响应式设计。

visibility 属性 

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

visibility 属性用于显示或隐藏元素，但与 display 属性不同，即使元素被隐藏，它仍然会影响布局。它只是隐藏元素，保留其原始位置和大小，不影响其他元素的布局。

基本语法 

1element {
2    visibility: value;
3}
  • value：用来指定元素可见性的值。

值的类型

  • visibility 属性可以设置为以下值：。
visible
  • 指定 visible 将显示元素。这是默认值。
hidden
  • 指定 hidden 将隐藏元素，但其布局空间会被保留。
collapse
  • collapse 主要用于表格的行或列。元素变得不可见，并且其空间也会被忽略。当应用于表格的行或列时，隐藏的行或列将完全从布局中移除。
  • 然而，当在常规块级或内联元素（表格元素除外）上使用时，其表现类似于 hidden，并且保留布局空间。
inherit
  • 指定 inherit 将从父元素继承 visibility 属性的值。

visibility 与 display 的区别

visibility 与 display 之间有以下区别。

  • visibility: hidden 会隐藏元素，但保留其空间和布局。
  • display: none 会完全从布局中移除该元素，允许其他元素填充该空间。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

与代码显示和引号相关的CSS属性背景相关的CSS属性