與布局相關的CSS屬性
本文解釋了與布局相關的CSS屬性。
您可以了解 display 和 position 屬性的使用方法和編寫方式。
YouTube Video
預覽的HTML
css-layout.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>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-layout.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>display: block</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26.block-element {
27 display: block;
28 width: 400px;
29 background-color: lightblue;
30 padding: 10px;
31 margin-bottom: 10px;
32}
33</pre>
34 <header><h4>HTML</h4></header>
35 <pre><div class="block-element">This is a block element.</div></pre>
36 <header><h4>HTML+CSS</h4></header>
37 <section class="sample-view">
38 <div class="block-element">This is a block element.</div>
39 </section>
40 </section>
41 </article>
42 <article>
43 <h3>display: inline</h3>
44 <section>
45 <header><h4>CSS</h4></header>
46<pre class="sample">
47span.inline-element {
48 background-color: lightgray;
49 padding: 10px;
50}
51
52div.inline-element {
53 display: inline;
54 background-color: lightblue;
55 padding: 10px;
56}
57</pre>
58 <header><h4>HTML</h4></header>
59<pre>
60<span class="inline-element">This is an inline element.</span>
61<div class="inline-element">div tag with "display: inline"</div>
62</pre>
63 <header><h4>HTML+CSS</h4></header>
64 <section class="sample-view">
65 <span class="inline-element">This is an inline element.</span>
66 <div class="inline-element">div tag with "display: inline"</div>
67 </section>
68 </section>
69 </article>
70 <article>
71 <h3>display: inline-block</h3>
72 <section>
73 <header><h4>CSS</h4></header>
74<pre class="sample">
75.inline-block-element {
76 display: inline-block;
77 width: 200px;
78 background-color: lightblue;
79 padding: 10px;
80}
81</pre>
82 <header><h4>HTML</h4></header>
83<pre>
84<span class="inline-element">This is an inline element.</span>
85<div class="inline-block-element">This is an inline-block element.</div>
86<span class="inline-element">Another inline element.</span>
87</pre>
88 <header><h4>HTML+CSS</h4></header>
89 <section class="sample-view">
90 <span class="inline-element">This is an inline element.</span>
91 <div class="inline-block-element">This is an inline-block element.</div>
92 <span class="inline-element">Another inline element.</span>
93 </section>
94 </section>
95 </article>
96 <article>
97 <h3>display: none</h3>
98 <section>
99 <header><h4>CSS</h4></header>
100<pre class="sample">
101div.none-element {
102 display: none;
103 background-color: lightblue;
104 padding: 10px;
105}
106</pre>
107 <header><h4>HTML</h4></header>
108 <pre><div class="none-element">This is a none element.</div></pre>
109 <header><h4>HTML+CSS</h4></header>
110 <section class="sample-view">
111 <div class="none-element">This is a none element.</div>
112 </section>
113 </section>
114 </article>
115 <article>
116 <h3>display: flex</h3>
117 <section>
118 <header><h4>CSS</h4></header>
119<pre class="sample">
120.flex-container {
121 display: flex;
122 justify-content: space-between;
123 background-color: lightgray;
124 padding: 10px;
125}
126
127.flex-container div {
128 width: 120px;
129 background-color: lightblue;
130}
131</pre>
132 <header><h4>HTML</h4></header>
133<pre>
134<div class="flex-container">
135 <div>Item 1</div>
136 <div>Item 2</div>
137</div>
138</pre>
139 <header><h4>HTML+CSS</h4></header>
140 <section class="sample-view">
141 <div class="flex-container">
142 <div>Flex item 1</div>
143 <div>Flex item 2</div>
144 </div>
145 </section>
146 </section>
147 </article>
148 <article>
149 <h3>display: inline-flex</h3>
150 <section>
151 <header><h4>CSS</h4></header>
152<pre class="sample">
153.inline-flex-container {
154 display: inline-flex;
155 width: 250px;
156 justify-content: space-between;
157 background-color: lightgray;
158 padding: 10px;
159}
160
161.inline-flex-container div {
162 width: 100px;
163 background-color: lightblue;
164}
165</pre>
166 <header><h4>HTML</h4></header>
167<pre>
168<span class="inline-element">Inline element</span>
169<div class="inline-flex-container">
170 <div>Inline Flex item 1</div>
171 <div>Inline Flex item 2</div>
172</div>
173</pre>
174 <header><h4>HTML+CSS</h4></header>
175 <section class="sample-view">
176 <span class="inline-element">Inline element</span>
177 <div class="inline-flex-container">
178 <div>Inline Flex item 1</div>
179 <div>Inline Flex item 2</div>
180 </div>
181 </section>
182 </section>
183 </article>
184 <article>
185 <h3>display: grid</h3>
186 <section>
187 <header><h4>CSS</h4></header>
188<pre class="sample">
189.grid-container {
190 display: grid;
191 grid-template-columns: repeat(2, 1fr);
192 gap: 10px;
193 background-color: #f3f3f3;
194 padding: 10px;
195 height: 200px;
196}
197.grid-container div {
198 background-color: lightblue;
199 border: 1px solid #aaa;
200 padding: 5px;
201 text-align: center;
202 width: 100px;
203}
204</pre>
205 <header><h4>HTML</h4></header>
206<pre>
207<div class="grid-container">
208 <div>Item 1</div>
209 <div>Item 2</div>
210 <div>Item 3</div>
211 <div>Item 4</div>
212</div>
213</pre>
214 <header><h4>HTML+CSS</h4></header>
215 <section class="sample-view">
216 <div class="grid-container">
217 <div>Item 1</div>
218 <div>Item 2</div>
219 <div>Item 3</div>
220 <div>Item 4</div>
221 </div>
222 </section>
223 </section>
224 </article>
225 <article>
226 <h3>display: inline-grid</h3>
227 <section>
228 <header><h4>CSS</h4></header>
229<pre class="sample">
230.inline-grid-element {
231 display: inline-grid;
232 grid-template-columns: 1fr 1fr;
233 gap: 5px;
234 background-color: lightblue;
235 padding: 5px;
236 width: 200px;
237 height: 150px;
238}
239.inline-grid-element div {
240 background-color: lightskyblue;
241 padding: 5px;
242 text-align: center;
243 border: 1px solid #ccc;
244 width: 80px;
245 height: 25px;
246}
247</pre>
248 <header><h4>HTML</h4></header>
249<pre>
250<span class="inline-element">This is an inline element.</span>
251<div class="inline-grid-element">
252 <div>Item 1</div>
253 <div>Item 2</div>
254 <div>Item 3</div>
255 <div>Item 4</div>
256</div>
257<span class="inline-element">Another inline element.</span>
258</pre>
259 <header><h4>HTML+CSS</h4></header>
260 <section class="sample-view">
261 <span class="inline-element">This is an inline element.</span>
262 <div class="inline-grid-element">
263 <div>Item 1</div>
264 <div>Item 2</div>
265 <div>Item 3</div>
266 <div>Item 4</div>
267 </div>
268 <span class="inline-element">Another inline element.</span>
269 </section>
270 </section>
271 </article>
272 <article>
273 <h3>display: table</h3>
274 <section>
275 <header><h4>CSS</h4></header>
276<pre class="sample">
277.table-container {
278 display: table;
279 border-collapse: collapse;
280 width: 100%;
281 height: 100%;
282}
283
284.table-row {
285 display: table-row;
286}
287
288.table-cell {
289 display: table-cell;
290 border: 1px solid #999;
291 padding: 8px;
292 text-align: center;
293 vertical-align: middle;
294 background-color: lightblue;
295}
296
297.header-row .table-cell {
298 font-weight: bold;
299 background-color: lightskyblue;
300}
301</pre>
302 <header><h4>HTML</h4></header>
303<pre>
304<section>
305 <div class="table-container">
306 <div class="table-row header-row">
307 <div class="table-cell">Header 1</div>
308 <div class="table-cell">Header 2</div>
309 </div>
310 <div class="table-row">
311 <div class="table-cell">Row 1, Cell 1</div>
312 <div class="table-cell">Row 1, Cell 2</div>
313 </div>
314 <div class="table-row">
315 <div class="table-cell">Row 2, Cell 1</div>
316 <div class="table-cell">Row 2, Cell 2</div>
317 </div>
318 </div>
319</section>
320</pre>
321 <header><h4>HTML+CSS</h4></header>
322 <section class="sample-view">
323 <div class="table-container">
324 <div class="table-row header-row">
325 <div class="table-cell">Header 1</div>
326 <div class="table-cell">Header 2</div>
327 </div>
328 <div class="table-row">
329 <div class="table-cell">Row 1, Cell 1</div>
330 <div class="table-cell">Row 1, Cell 2</div>
331 </div>
332 <div class="table-row">
333 <div class="table-cell">Row 2, Cell 1</div>
334 <div class="table-cell">Row 2, Cell 2</div>
335 </div>
336 </div>
337 </section>
338 </section>
339 </article>
340 <article>
341 <h3>display: list-item</h3>
342 <section>
343 <header><h4>CSS</h4></header>
344<pre class="sample">
345.list-item-element {
346 display: list-item;
347 list-style-position: inside;
348 list-style-type: disc;
349 margin-left: 20px;
350 background-color: lightblue;
351 padding: 10px;
352 height: min-content;
353}
354</pre>
355 <header><h4>HTML</h4></header>
356<pre>
357<div class="list-item-element">This is a list item element.</div>
358<div class="list-item-element">Another list item element.</div>
359<div class="list-item-element">Yet another list item element.</div>
360</pre>
361 <header><h4>HTML+CSS</h4></header>
362 <section class="sample-view">
363 <div class="list-item-element">This is a list item element.</div>
364 <div class="list-item-element">Another list item element.</div>
365 <div class="list-item-element">Yet another list item element.</div>
366 </section>
367 </section>
368 </article>
369 <article>
370 <h3>position</h3>
371 <section style="height: auto;">
372 <header><h4>position: static</h4></header>
373 <section class="sample-view">
374 <div class="static-element">This is a static element.</div>
375 </section>
376 <header><h4>position: relative; top: 10px; left: 20px;</h4></header>
377 <section class="sample-view">
378 <div class="relative-element">This is a relative element.</div>
379 </section>
380 <header><h4>position: absolute; top: 10px; left: 20px;</h4></header>
381 <section class="sample-view">
382 <div class="absolute-container">
383 <div class="absolute-element">This is an absolute element.</div>
384 </div>
385 </section>
386 <header><h4>position: fixed; bottom: 10px; right: 10px;</h4></header>
387 <section class="sample-view">
388 <div class="fixed-element">This is a fixed element.</div>
389 </section>
390 <header><h4>position: sticky; top: 0;</h4></header>
391 <section class="sample-view">
392 <div class="sticky-container">
393 <div style="width: 20px; height: 400px; background: linear-gradient(to top, red, blue);"></div>
394 <div class="sticky-element">This is a sticky element. Scroll down!</div>
395 </div>
396 </section>
397 </section>
398 </article>
399 </main>
400</body>
401</html>{^ i18n 配置・レイアウト ^}
display 屬性
display 屬性是用來定義元素如何顯示的CSS屬性。它決定了元素的呈現格式，例如區塊(block)、行內元素(inline)、彈性布局(flex)、網格布局(grid)或隱藏(hidden)。
display 屬性的值
block
1.block-element {
2 display: block;
3 width: 400px;
4 background-color: lightblue;
5 padding: 10px;
6 margin-bottom: 10px;
7}- 設置為
block，元素將作為區塊級元素顯示。 - 區塊元素會在頁面中另起新行，將其他元素推送到下一行。
- 常見的區塊元素包括
<div>、<p>、<h1>、<section>、<article>等。
inline
1span.inline-element {
2 background-color: lightgray;
3 padding: 10px;
4}
5
6div.inline-element {
7 display: inline;
8 background-color: lightblue;
9 padding: 10px;
10}- 設置為
inline，元素將作為行內元素顯示。 - 行內元素會和相鄰元素顯示在同一行，並水平排列。
- 常見的行內元素包括
<span>、<a>、<strong>等。 - 行內元素與其他行內元素位於同一行，並且會連續水平顯示，與區塊元素不同。
inline-block
1.inline-block-element {
2 display: inline-block;
3 width: 200px;
4 background-color: lightblue;
5 padding: 10px;
6}- 設置為
inline-block，元素將顯示為行內元素，但同時具有區塊元素的特性。 - 行內區塊元素與其他行內元素顯示在同一行，但您可以像區塊元素一樣設置高度和寬度。
<img>、<button>和<canvas>元素默認行為類似於inline-block。
none
1div.none-element {
2 display: none;
3 background-color: lightblue;
4 padding: 10px;
5}- 設置為
none，元素將不顯示。 - 元素將完全隱藏，並且從螢幕和布局中完全排除。
flex
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 background-color: lightgray;
5 padding: 10px;
6}
7
8.flex-container div {
9 width: 120px;
10 background-color: lightblue;
11}- 設置為
flex，元素將顯示為彈性盒容器(flexbox container)。 - 它用於靈活地排列和對齊子元素（彈性項目）。
- 使用彈性盒布局可以使子元素行內顯示，並自動調整間距和對齊方式。
inline-flex
1.inline-flex-container {
2 display: inline-flex;
3 width: 250px;
4 justify-content: space-between;
5 background-color: lightgray;
6 padding: 10px;
7}
8
9.inline-flex-container div {
10 width: 100px;
11 background-color: lightblue;
12}- 指定
inline-flex將元素顯示為內聯彈性容器。 - 雖然具有彈性盒子特性，但它會像內聯元素一樣處理，並與其他元素顯示在同一行。
grid
1.grid-container {
2 display: grid;
3 grid-template-columns: repeat(2, 1fr);
4 gap: 10px;
5 background-color: #f3f3f3;
6 padding: 10px;
7 height: 200px;
8}
9
10.grid-container div {
11 background-color: lightblue;
12 border: 1px solid #aaa;
13 padding: 5px;
14 text-align: center;
15 width: 100px;
16}- 指定
grid將元素顯示為網格容器。 - 可以應用網格佈局將子元素排列在行和列中。
- 網格容器內的子元素會沿著列和行整齊排列。
inline-grid
1.inline-grid-element {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6 padding: 5px;
7 width: 200px;
8 height: 150px;
9}
10.inline-grid-element div {
11 background-color: lightskyblue;
12 padding: 5px;
13 text-align: center;
14 border: 1px solid #ccc;
15 width: 80px;
16 height: 25px;
17}- 指定
inline-grid將元素顯示為內聯網格容器。 - 它使用網格佈局系統並被當作內聯元素處理。
table
1.table-container {
2 display: table;
3 border-collapse: collapse;
4 width: 100%;
5 height: 100%;
6}
7
8.table-row {
9 display: table-row;
10}
11
12.table-cell {
13 display: table-cell;
14 border: 1px solid #999;
15 padding: 8px;
16 text-align: center;
17 vertical-align: middle;
18 background-color: lightblue;
19}
20
21.header-row .table-cell {
22 font-weight: bold;
23 background-color: lightskyblue;
24}- 指定
table將元素顯示為表格。它具有類似於 HTML<table>的佈局，其子元素被視為表格單元格。 - 如本例所示，將子元素的
display屬性設置為table-row或table-cell。- 當指定為
table-row時，該元素的行為就像表格中的一行 (<tr>)。 - 當指定為
table-cell時，該元素的行為就像表格中的單元格 (<td>)。
- 當指定為
list-item
1.list-item-element {
2 display: list-item;
3 list-style-position: inside;
4 list-style-type: disc;
5 margin-left: 20px;
6 background-color: lightblue;
7 padding: 10px;
8 height: min-content;
9}- 指定
list-item將元素顯示為列表項目。它通常應用於<ul>或<ol>中的<li>元素。
position 屬性
1.static-element {
2 position: static;
3 background-color: lightblue;
4 padding: 10px;
5 margin-bottom: 20px;
6}
7
8.relative-element {
9 position: relative;
10 background-color: lightblue;
11 top: 10px;
12 left: 20px;
13 padding: 10px;
14 margin-bottom: 20px;
15}
16
17.absolute-container {
18 position: relative;
19 width: 500px;
20 height: 150px;
21 background-color: lightgray;
22 margin-bottom: 20px;
23}
24
25.absolute-element {
26 position: absolute;
27 top: 10px;
28 left: 20px;
29 background-color: lightblue;
30 padding: 10px;
31}
32
33.fixed-element {
34 position: fixed;
35 bottom: 10px;
36 right: 10px;
37 background-color: lightblue;
38 padding: 10px;
39}
40
41.sticky-container {
42 overflow: scroll;
43 height: 150px;
44 width: 500px;
45}
46
47.sticky-element {
48 position: sticky;
49 top: 0;
50 background-color: lightblue;
51 padding: 10px;
52}position 是一個控制元素在 CSS 中定位方式的屬性。該屬性可以用於將元素相對於父元素或其他元素進行相對或絕對定位，或將其固定在某個位置。
position 屬性的值
static
1.static-element {
2 position: static;
3}- 在
static-element類中，position被指定為static。該元素位於正常的文檔流中。 static是預設值。如果未指定position，則應用static。- 該元素根據正常的文件流進行定位。
top、right、bottom、left屬性無法使用。
relative
1.relative-element {
2 position: relative;
3 top: 10px;
4 left: 20px;
5}- 在
relative-element類中，position被設置為relative。該元素相對於其正常位置移動。在此範例中，該元素向下移動了 10px 並向右移動了 20px。 - 指定
relative會使元素相對定位。該元素從其原始位置移動到由top、right、bottom、left屬性指定的位置，並遵循正常的文檔流。 - 設定為相對定位的元素，即使移動後，其原始位置仍然留有空間。
- 在此例中，該元素從其原始位置向下移動10像素，向右移動20像素，但文檔流仍基於原始位置處理。
absolute
1.absolute-element {
2 position: absolute;
3 top: 10px;
4 left: 20px;
5}- 在
absolute-element類中，position被設置為absolute。在此範例中，該元素的位置距離父元素（或視窗）的左上角向下偏移10像素，向右偏移20像素。 - 當指定為
absolute時，該元素相對於其父元素絕對定位。如果父元素的position設為relative、absolute或fixed，則該元素會根據父元素通過top、right、bottom、left屬性移動。如果找不到父元素，則相對於整個頁面（視窗）定位。 - 設為絕對定位的元素將脫離正常文檔流，不會影響其他元素。
fixed
1.fixed-element {
2 position: fixed;
3 top: 0;
4 right: 0;
5}- 在
fixed-element類中，position被設置為fixed。指定fixed將元素定位於固定位置。該元素固定在視窗中，滾動時不會移動。 - 例如，它可用於使頁面標題或導航列始終可見。
- 在此範例中，該元素固定在螢幕的右下角，即使滾動頁面也不會發生變化。
sticky
1.sticky-element {
2 position: sticky;
3 top: 0;
4}- 在
sticky-element類中，position設定為sticky。 - 當指定
sticky時，元素會根據滾動動態地定位。它遵循正常文檔流，但當頁面滾動時，該元素會根據指定的top、right、bottom和left值固定在特定位置。 sticky在特定範圍內的行為類似於固定元素。- 在此例中，該元素顯示在其正常位置，但當頁面滾動到指定的
top位置時，它會固定於該位置並跟隨滾動。
top、left、bottom、right 屬性
「top」、「left」、「bottom」和「right」是用於控制 CSS 中元素位置的屬性。這些屬性與「position」屬性結合使用，用於指定相對於其位置在某個方向上的移動距離。
然而，只有當「position」屬性設置為「relative」、「absolute」、「fixed」或「sticky」時，這些屬性才會生效。在預設的「static」值下，這些屬性不起任何作用。
如何使用「top」、「left」、「bottom」和「right」
top
1.relative-element {
2 position: relative;
3 top: 20px; /* Positioned 20px from the top */
4}- 「top」屬性指定元素應該距離頂部的偏移距離。
- 在此範例中，元素從其正常位置向下移動 20px。
left
1.absolute-element {
2 position: absolute;
3 left: 50px; /* Positioned 50px from the left */
4}- 「left」屬性指定元素應該距離左側的偏移距離。
- 在此範例中，元素從左側移動 50px 到右側。
bottom
1.fixed-element {
2 position: fixed;
3 bottom: 10px; /* Positioned 10px from the bottom */
4}- 「bottom」屬性指定元素應該距離底部的偏移距離。
- 在此範例中，元素固定在距屏幕底部 10px 的位置。即使滾動時，它也會保持在該位置。
right
1.sticky-element {
2 position: sticky;
3 right: 20px; /* Positioned 20px from the right */
4}- 「right」屬性指定元素應該距離右側的偏移距離。
- 在此範例中，滾動期間，元素從右側向左移動 20px，並固定在該位置。
與「position」屬性的關係
relative：根據指定的「top」、「left」、「bottom」、「right」值，相對於其正常位置移動元素。absolute：根據指定的「top」、「left」、「bottom」、「right」值，相對於最近的設置了「position」為「relative」、「absolute」或「fixed」的父級定位元素。fixed：將元素固定在相對於視口（整個屏幕）的指定位置。即使滾動時，它也會保持在該位置。sticky：元素保持在其正常位置，直到在滾動過程中到達指定位置時，「附著」在該位置上。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。