布局相关的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属性。它决定元素以何种格式呈现，如块级、行内、弹性盒、网格或隐藏。
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将把元素显示为弹性盒容器。 - 它用于灵活排列和对齐子元素（弹性项目）。
- 使用弹性盒可以让子元素以行内方式显示，并自动调整边距和对齐。
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：将元素移动到相对于最近的设置了position为relative、absolute或fixed的祖先元素的位置。fixed：将元素固定在相对于视口（整个屏幕）的指定位置。即使在滚动时，它仍保持在该位置。sticky：元素保持在其正常位置，直到在滚动过程中到达指定位置，此时它会“粘”在该位置上。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。