-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDisplay.htm
More file actions
139 lines (136 loc) · 44.2 KB
/
Display.htm
File metadata and controls
139 lines (136 loc) · 44.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js"/><script src="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script><script src="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script><script src="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script><script src="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script><script src="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script><script src="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script><script src="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script><meta name="next-size-adjust"/><title>Tài liệu HTML,CSS,JS - Display</title><meta name="description" content="# Các Thuộc Tính CSS Liên Quan Đến `display`
Thuộc tính `display` trong CSS được sử dụng để xác định cách một phần tử được hiển thị trên trang web. Nó ảnh hưởn..."/><meta property="og:title" content="Tài liệu HTML,CSS,JS - Display"/><meta property="og:description" content="# Các Thuộc Tính CSS Liên Quan Đến `display`
Thuộc tính `display` trong CSS được sử dụng để xác định cách một phần tử được hiển thị trên trang web. Nó ảnh hưởn..."/><meta property="og:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta property="og:image:alt" content="Tài liệu HTML,CSS,JS - Display"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2024-12-10T08:03:54.058Z"/><meta property="article:author" content="zunohoang"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Tài liệu HTML,CSS,JS - Display"/><meta name="twitter:description" content="# Các Thuộc Tính CSS Liên Quan Đến `display`
Thuộc tính `display` trong CSS được sử dụng để xác định cách một phần tử được hiển thị trên trang web. Nó ảnh hưởn..."/><meta name="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta name="twitter:image:alt" content="Tài liệu HTML,CSS,JS - Display"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_1e4310 __variable_c3aa02 antialiased"><main class="container mx-auto px-4 pt-2 py-8"><header class="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between"><div><h1 class="text-3xl font-bold">Tài liệu HTML,CSS,JS - Display</h1><p class="text-gray-600">Đăng bởi <i>zunohoang</i> vào <time dateTime="2024-12-10T08:03:54.058Z">12/10/2024</time></p></div><p>👁️ <!-- -->5<!-- --> lượt xem</p></header><article><div class="markdown-body bg-white p-6 rounded-lg"><h1 class="text-3xl font-bold mb-4 pb-2 border-b">Các Thuộc Tính CSS Liên Quan Đến <code class="bg-gray-100 rounded px-1 py-0.5">display</code></h1>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">display</code> trong CSS được sử dụng để xác định cách một phần tử được hiển thị trên trang web. Nó ảnh hưởng đến cách phần tử chiếm không gian và cách các phần tử khác xung quanh nó được bố trí.</p>
<h2 class="text-2xl font-bold mt-6 mb-4">1. <code class="bg-gray-100 rounded px-1 py-0.5">display: block;</code></h2>
<p class="mb-4">Thuộc tính này khiến phần tử chiếm toàn bộ chiều rộng của phần tử chứa nó và bắt đầu trên một dòng mới.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> block</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ chiếm toàn bộ chiều rộng của phần tử chứa (kể cả margin, padding, border).</li>
<li class="mb-1">Mỗi phần tử có <code class="bg-gray-100 rounded px-1 py-0.5">display: block</code> sẽ tạo ra một ngắt dòng, nghĩa là nó không thể đứng cùng dòng với phần tử khác.</li>
<li class="mb-1">Các phần tử như <code class="bg-gray-100 rounded px-1 py-0.5"><div></code>, <code class="bg-gray-100 rounded px-1 py-0.5"><h1></code>, <code class="bg-gray-100 rounded px-1 py-0.5"><p></code> mặc định có <code class="bg-gray-100 rounded px-1 py-0.5">display: block</code>.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">2. <code class="bg-gray-100 rounded px-1 py-0.5">display: inline;</code></h2>
<p class="mb-4">Phần tử với <code class="bg-gray-100 rounded px-1 py-0.5">display: inline</code> chỉ chiếm không gian cần thiết cho nội dung của nó và không tạo ra một ngắt dòng.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">span</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> inline</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử chỉ chiếm không gian cần thiết cho nội dung của nó.</li>
<li class="mb-1">Không có ngắt dòng, phần tử có thể đứng cùng dòng với phần tử khác.</li>
<li class="mb-1">Các phần tử như <code class="bg-gray-100 rounded px-1 py-0.5"><span></code>, <code class="bg-gray-100 rounded px-1 py-0.5"><a></code>, <code class="bg-gray-100 rounded px-1 py-0.5"><strong></code> mặc định có <code class="bg-gray-100 rounded px-1 py-0.5">display: inline</code>.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">3. <code class="bg-gray-100 rounded px-1 py-0.5">display: inline-block;</code></h2>
<p class="mb-4">Phần tử với <code class="bg-gray-100 rounded px-1 py-0.5">display: inline-block</code> kết hợp đặc điểm của cả <code class="bg-gray-100 rounded px-1 py-0.5">block</code> và <code class="bg-gray-100 rounded px-1 py-0.5">inline</code>. Nó có thể đứng cùng dòng với các phần tử khác nhưng vẫn có thể định vị kích thước như một phần tử block.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> inline-block</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ đứng cùng dòng với phần tử khác nhưng có thể đặt kích thước cụ thể (chiều rộng và chiều cao).</li>
<li class="mb-1">Không tạo ra ngắt dòng như <code class="bg-gray-100 rounded px-1 py-0.5">block</code>, nhưng lại có khả năng thay đổi kích thước như <code class="bg-gray-100 rounded px-1 py-0.5">block</code>.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">4. <code class="bg-gray-100 rounded px-1 py-0.5">display: none;</code></h2>
<p class="mb-4">Phần tử với <code class="bg-gray-100 rounded px-1 py-0.5">display: none</code> sẽ không được hiển thị và không chiếm không gian trên trang web.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> none</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ không hiển thị trên trang web.</li>
<li class="mb-1">Phần tử sẽ không chiếm không gian trong bố cục trang, như thể nó không tồn tại trong tài liệu.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">5. <code class="bg-gray-100 rounded px-1 py-0.5">display: flex;</code></h2>
<p class="mb-4"><code class="bg-gray-100 rounded px-1 py-0.5">display: flex</code> kích hoạt chế độ bố cục <code class="bg-gray-100 rounded px-1 py-0.5">flexbox</code>, cho phép phần tử con trong phần tử chứa có thể được sắp xếp theo chiều ngang hoặc chiều dọc.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> flex</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử con sẽ tự động sắp xếp theo chiều ngang hoặc chiều dọc.</li>
<li class="mb-1">Các thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">justify-content</code>, <code class="bg-gray-100 rounded px-1 py-0.5">align-items</code>, <code class="bg-gray-100 rounded px-1 py-0.5">flex-direction</code> có thể được sử dụng để kiểm soát cách các phần tử con được bố trí.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">6. <code class="bg-gray-100 rounded px-1 py-0.5">display: inline-flex;</code></h2>
<p class="mb-4"><code class="bg-gray-100 rounded px-1 py-0.5">display: inline-flex</code> kết hợp chế độ <code class="bg-gray-100 rounded px-1 py-0.5">flexbox</code> với tính chất của <code class="bg-gray-100 rounded px-1 py-0.5">inline</code>. Phần tử này sẽ có các đặc điểm của <code class="bg-gray-100 rounded px-1 py-0.5">flex</code> nhưng sẽ không tạo ngắt dòng.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> inline-flex</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ có các đặc điểm của <code class="bg-gray-100 rounded px-1 py-0.5">flex</code> nhưng sẽ không chiếm toàn bộ chiều rộng và có thể đứng cùng dòng với các phần tử khác.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">7. <code class="bg-gray-100 rounded px-1 py-0.5">display: grid;</code></h2>
<p class="mb-4"><code class="bg-gray-100 rounded px-1 py-0.5">display: grid</code> kích hoạt chế độ bố cục <code class="bg-gray-100 rounded px-1 py-0.5">grid</code>, cho phép các phần tử con được sắp xếp theo một lưới (grid).</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> grid</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Các phần tử con có thể được sắp xếp theo một lưới (grid).</li>
<li class="mb-1">Các thuộc tính như <code class="bg-gray-100 rounded px-1 py-0.5">grid-template-columns</code>, <code class="bg-gray-100 rounded px-1 py-0.5">grid-template-rows</code>, và <code class="bg-gray-100 rounded px-1 py-0.5">grid-gap</code> được sử dụng để kiểm soát cấu trúc lưới.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">8. <code class="bg-gray-100 rounded px-1 py-0.5">display: inline-grid;</code></h2>
<p class="mb-4"><code class="bg-gray-100 rounded px-1 py-0.5">display: inline-grid</code> kết hợp chế độ <code class="bg-gray-100 rounded px-1 py-0.5">grid</code> với tính chất của <code class="bg-gray-100 rounded px-1 py-0.5">inline</code>. Phần tử này sẽ có các đặc điểm của <code class="bg-gray-100 rounded px-1 py-0.5">grid</code> nhưng không tạo ngắt dòng.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> inline-grid</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ có các đặc điểm của <code class="bg-gray-100 rounded px-1 py-0.5">grid</code> nhưng sẽ không chiếm toàn bộ chiều rộng và có thể đứng cùng dòng với các phần tử khác.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">9. <code class="bg-gray-100 rounded px-1 py-0.5">display: list-item;</code></h2>
<p class="mb-4">Phần tử với <code class="bg-gray-100 rounded px-1 py-0.5">display: list-item</code> sẽ được hiển thị dưới dạng một mục trong danh sách (giống như thẻ <code class="bg-gray-100 rounded px-1 py-0.5"><li></code>).</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> list-item</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ có kiểu dáng của một mục trong danh sách, bao gồm dấu đầu dòng hoặc số thứ tự.</li>
<li class="mb-1">Các phần tử thường sử dụng <code class="bg-gray-100 rounded px-1 py-0.5">display: list-item</code> là các phần tử <code class="bg-gray-100 rounded px-1 py-0.5"><li></code> trong danh sách.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">10. <code class="bg-gray-100 rounded px-1 py-0.5">display: table;</code></h2>
<p class="mb-4">Phần tử với <code class="bg-gray-100 rounded px-1 py-0.5">display: table</code> sẽ hiển thị giống như một bảng HTML (thẻ <code class="bg-gray-100 rounded px-1 py-0.5"><table></code>).</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> table</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ hiển thị giống như một bảng HTML, cho phép sử dụng các thuộc tính của bảng như <code class="bg-gray-100 rounded px-1 py-0.5">border-collapse</code>, <code class="bg-gray-100 rounded px-1 py-0.5">table-layout</code>, v.v.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">11. <code class="bg-gray-100 rounded px-1 py-0.5">display: table-row;</code></h2>
<p class="mb-4">Phần tử với <code class="bg-gray-100 rounded px-1 py-0.5">display: table-row</code> sẽ hiển thị như một hàng trong bảng.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> table-row</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ được hiển thị giống như một hàng trong bảng (<code class="bg-gray-100 rounded px-1 py-0.5"><tr></code>).</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">12. <code class="bg-gray-100 rounded px-1 py-0.5">display: table-cell;</code></h2>
<p class="mb-4">Phần tử với <code class="bg-gray-100 rounded px-1 py-0.5">display: table-cell</code> sẽ hiển thị như một ô trong bảng.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> table-cell</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Phần tử sẽ hiển thị giống như một ô trong bảng (<code class="bg-gray-100 rounded px-1 py-0.5"><td></code>).</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">Kết Luận</h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">display</code> là một trong những thuộc tính quan trọng trong CSS để kiểm soát cách phần tử được hiển thị trên trang web. Bằng cách sử dụng các giá trị khác nhau của <code class="bg-gray-100 rounded px-1 py-0.5">display</code>, bạn có thể điều chỉnh cách các phần tử hiển thị và bố trí chúng trên trang web một cách linh hoạt.</p></div></article><footer class="mt-8 border-t pt-4"><p class="text-center text-gray-500">© 2024 SFIT | <a target="_blank" rel="noopener noreferrer" href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p></footer></main><!--$--><!--/$--><script src="/_next/static/chunks/webpack-457dc077475af9ee.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n7:I[96641,[\"177\",\"static/chunks/app/layout-40e71d42d3ccdee8.js\"],\"Analytics\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[34835,[],\"\"]\n1:HL[\"/_next/static/media/4473ecc91f70f139-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n2:HL[\"/_next/static/media/463dafcda517f24f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n3:HL[\"/_next/static/css/e503160baa2cd0f0.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"wpuafLjPzZSt3xkV7rnb4\",\"p\":\"\",\"c\":[\"\",\"docs\",\"6757f5ea1233da8354bc08c7\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"id\",\"6757f5ea1233da8354bc08c7\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e503160baa2cd0f0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[null,[\"$\",\"body\",null,{\"className\":\"__variable_1e4310 __variable_c3aa02 antialiased\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L7\",null,{}]]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"6757f5ea1233da8354bc08c7\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"zjEk0Qvkxbeg_avTDaTGQ\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tài liệu HTML,CSS,JS - Display\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến `display`\\n\\nThuộc tính `display` trong CSS được sử dụng để xác định cách một phần tử được hiển thị trên trang web. Nó ảnh hưởn...\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Tài liệu HTML,CSS,JS - Display\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến `display`\\n\\nThuộc tính `display` trong CSS được sử dụng để xác định cách một phần tử được hiển thị trên trang web. Nó ảnh hưởn...\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Display\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2024-12-10T08:03:54.058Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"zunohoang\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Tài liệu HTML,CSS,JS - Display\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến `display`\\n\\nThuộc tính `display` trong CSS được sử dụng để xác định cách một phần tử được hiển thị trên trang web. Nó ảnh hưởn...\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Display\"}]]\na:null\n"])</script><script>self.__next_f.push([1,"10:I[48073,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"default\"]\n12:I[44839,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"\"]\n11:T183d,"])</script><script>self.__next_f.push([1,"# Các Thuộc Tính CSS Liên Quan Đến `display`\n\nThuộc tính `display` trong CSS được sử dụng để xác định cách một phần tử được hiển thị trên trang web. Nó ảnh hưởng đến cách phần tử chiếm không gian và cách các phần tử khác xung quanh nó được bố trí.\n\n## 1. `display: block;`\nThuộc tính này khiến phần tử chiếm toàn bộ chiều rộng của phần tử chứa nó và bắt đầu trên một dòng mới.\n\n### Ví dụ:\n```css\ndiv {\n display: block;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ chiếm toàn bộ chiều rộng của phần tử chứa (kể cả margin, padding, border).\n- Mỗi phần tử có `display: block` sẽ tạo ra một ngắt dòng, nghĩa là nó không thể đứng cùng dòng với phần tử khác.\n- Các phần tử như `\u003cdiv\u003e`, `\u003ch1\u003e`, `\u003cp\u003e` mặc định có `display: block`.\n\n## 2. `display: inline;`\nPhần tử với `display: inline` chỉ chiếm không gian cần thiết cho nội dung của nó và không tạo ra một ngắt dòng.\n\n### Ví dụ:\n```css\nspan {\n display: inline;\n}\n```\n\n### Các đặc điểm:\n- Phần tử chỉ chiếm không gian cần thiết cho nội dung của nó.\n- Không có ngắt dòng, phần tử có thể đứng cùng dòng với phần tử khác.\n- Các phần tử như `\u003cspan\u003e`, `\u003ca\u003e`, `\u003cstrong\u003e` mặc định có `display: inline`.\n\n## 3. `display: inline-block;`\nPhần tử với `display: inline-block` kết hợp đặc điểm của cả `block` và `inline`. Nó có thể đứng cùng dòng với các phần tử khác nhưng vẫn có thể định vị kích thước như một phần tử block.\n\n### Ví dụ:\n```css\ndiv {\n display: inline-block;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ đứng cùng dòng với phần tử khác nhưng có thể đặt kích thước cụ thể (chiều rộng và chiều cao).\n- Không tạo ra ngắt dòng như `block`, nhưng lại có khả năng thay đổi kích thước như `block`.\n\n## 4. `display: none;`\nPhần tử với `display: none` sẽ không được hiển thị và không chiếm không gian trên trang web.\n\n### Ví dụ:\n```css\ndiv {\n display: none;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ không hiển thị trên trang web.\n- Phần tử sẽ không chiếm không gian trong bố cục trang, như thể nó không tồn tại trong tài liệu.\n\n## 5. `display: flex;`\n`display: flex` kích hoạt chế độ bố cục `flexbox`, cho phép phần tử con trong phần tử chứa có thể được sắp xếp theo chiều ngang hoặc chiều dọc.\n\n### Ví dụ:\n```css\ndiv {\n display: flex;\n}\n```\n\n### Các đặc điểm:\n- Phần tử con sẽ tự động sắp xếp theo chiều ngang hoặc chiều dọc.\n- Các thuộc tính `justify-content`, `align-items`, `flex-direction` có thể được sử dụng để kiểm soát cách các phần tử con được bố trí.\n\n## 6. `display: inline-flex;`\n`display: inline-flex` kết hợp chế độ `flexbox` với tính chất của `inline`. Phần tử này sẽ có các đặc điểm của `flex` nhưng sẽ không tạo ngắt dòng.\n\n### Ví dụ:\n```css\ndiv {\n display: inline-flex;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ có các đặc điểm của `flex` nhưng sẽ không chiếm toàn bộ chiều rộng và có thể đứng cùng dòng với các phần tử khác.\n\n## 7. `display: grid;`\n`display: grid` kích hoạt chế độ bố cục `grid`, cho phép các phần tử con được sắp xếp theo một lưới (grid).\n\n### Ví dụ:\n```css\ndiv {\n display: grid;\n}\n```\n\n### Các đặc điểm:\n- Các phần tử con có thể được sắp xếp theo một lưới (grid).\n- Các thuộc tính như `grid-template-columns`, `grid-template-rows`, và `grid-gap` được sử dụng để kiểm soát cấu trúc lưới.\n\n## 8. `display: inline-grid;`\n`display: inline-grid` kết hợp chế độ `grid` với tính chất của `inline`. Phần tử này sẽ có các đặc điểm của `grid` nhưng không tạo ngắt dòng.\n\n### Ví dụ:\n```css\ndiv {\n display: inline-grid;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ có các đặc điểm của `grid` nhưng sẽ không chiếm toàn bộ chiều rộng và có thể đứng cùng dòng với các phần tử khác.\n\n## 9. `display: list-item;`\nPhần tử với `display: list-item` sẽ được hiển thị dưới dạng một mục trong danh sách (giống như thẻ `\u003cli\u003e`).\n\n### Ví dụ:\n```css\ndiv {\n display: list-item;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ có kiểu dáng của một mục trong danh sách, bao gồm dấu đầu dòng hoặc số thứ tự.\n- Các phần tử thường sử dụng `display: list-item` là các phần tử `\u003cli\u003e` trong danh sách.\n\n## 10. `display: table;`\nPhần tử với `display: table` sẽ hiển thị giống như một bảng HTML (thẻ `\u003ctable\u003e`).\n\n### Ví dụ:\n```css\ndiv {\n display: table;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ hiển thị giống như một bảng HTML, cho phép sử dụng các thuộc tính của bảng như `border-collapse`, `table-layout`, v.v.\n\n## 11. `display: table-row;`\nPhần tử với `display: table-row` sẽ hiển thị như một hàng trong bảng.\n\n### Ví dụ:\n```css\ndiv {\n display: table-row;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ được hiển thị giống như một hàng trong bảng (`\u003ctr\u003e`).\n\n## 12. `display: table-cell;`\nPhần tử với `display: table-cell` sẽ hiển thị như một ô trong bảng.\n\n### Ví dụ:\n```css\ndiv {\n display: table-cell;\n}\n```\n\n### Các đặc điểm:\n- Phần tử sẽ hiển thị giống như một ô trong bảng (`\u003ctd\u003e`).\n\n## Kết Luận\nThuộc tính `display` là một trong những thuộc tính quan trọng trong CSS để kiểm soát cách phần tử được hiển thị trên trang web. Bằng cách sử dụng các giá trị khác nhau của `display`, bạn có thể điều chỉnh cách các phần tử hiển thị và bố trí chúng trên trang web một cách linh hoạt."])</script><script>self.__next_f.push([1,"8:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 pt-2 py-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Tài liệu HTML,CSS,JS - Display\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600\",\"children\":[\"Đăng bởi \",[\"$\",\"i\",null,{\"children\":\"zunohoang\"}],\" vào \",[\"$\",\"time\",null,{\"dateTime\":\"2024-12-10T08:03:54.058Z\",\"children\":\"12/10/2024\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"👁️ \",5,\" lượt xem\"]}]]}],[\"$\",\"article\",null,{\"children\":[\"$\",\"$L10\",null,{\"content\":\"$11\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 border-t pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-center text-gray-500\",\"children\":[\"© 2024 SFIT | \",[\"$\",\"$L12\",null,{\"href\":\"https://github.com/zunohoang\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"zunohoang\"}],\". All rights reserved.\"]}]}]]}]\n"])</script></body></html>