與盒模型相關的CSS屬性

Articles

CSS 簡介

與盒模型相關的CSS屬性

這篇文章解釋了與盒模型相關的CSS屬性。

您將學習關於width、height和margin等屬性的使用場景和語法。

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 一樣，您可以設置一到四個值。

一個值：應用於所有邊。
兩個值：第一個值應用於上下，第二個值應用於左右。
三個值：按順序應用於上、左右、下。
四個值：按順序應用於上、右、下、左。

`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屬性

與盒模型相關的CSS屬性

YouTube Video

預覽的HTML

框模型相關

width 和 height 屬性

可指定的值

指定最小值和最大值

margin 和 padding 屬性

margin 屬性

簡寫表示法：

padding 屬性

功能：

簡寫表示法：

box-sizing 屬性

box-sizing 的取值

content-box

border-box

box-sizing 差異的摘要

box-sizing 的優點

如何全局應用 border-box

總結

visibility 屬性

基本語法

值的類型

visible

hidden

collapse

inherit

visibility 和 display 的區別

YouTube Video

`width` 和 `height` 屬性

`margin` 和 `padding` 屬性

`margin` 屬性

`padding` 屬性

`box-sizing` 屬性

`box-sizing` 的取值

`content-box`

`border-box`

`box-sizing` 差異的摘要

`box-sizing` 的優點

如何全局應用 `border-box`

`visibility` 屬性

`visible`

`hidden`

`collapse`

`inherit`

`visibility` 和 `display` 的區別