Rate this post

‘display’ là một thuộc tính trong CSS dùng để xác định cách một thành phần HTML sẽ được hiển thị trên trang web. Nó có thể được xác định bằng các giá trị khác nhau như ‘block’, ‘inline’, ‘inline-block’, ‘none’, ‘table’, ‘flex’…

  • ‘block’: Hiển thị thành phần như một khối, tạo ra một dòng riêng biệt trước và sau nó và chiều rộng đầy đủ của cha mẹ nó.
  • ‘inline’: Hiển thị thành phần như một dòng văn bản, không tạo ra dòng riêng biệt trước và sau nó và chiều rộng chỉ bằng với nội dung của nó.
  • ‘inline-block’: Hiển thị thành phần như một dòng văn bản, nhưng vẫn có thể điều chỉnh chiều rộng và cao.
  • ‘none’: Hiển thị không hiển thị thành phần này trên trang web.
  • ‘table’: Hiển thị thành phần như một bảng.
  • ‘flex’: Hiển thị thành phần như một flex container, có thể sắp xếp các flex item theo hàng hoặc cột.

Ví dụ sử dụng ‘display’:

<div class="block-element">This is a block element</div>
<span class="inline-element">This is an inline element</span>
.block-element {
  display: block;
}
.inline-element {
  display: inline;
}

Trong ví dụ trên, thẻ div có class “block-element” sẽ được hiển thị như một khối và tạo ra một dòng riêng biệt trước và sau nó và chiều rộng đầy đủ của cha mẹ nó. Trong khi đó, thẻ span có class “inline-element” sẽ được hiển thị như một dòng văn bản, không tạo ra dòng riêng biệt trước và sau nó và chiều rộng chỉ bằng với nội dung của nó.

Các bài viết liên quan:

Các giá trị ‘display’ có thể được sử dụng với bất kỳ thành phần HTML nào, và thường được sử dụng để điều chỉnh hiển thị của các thành phần, chẳng hạn như thay đổi từ dòng văn bản sang khối hoặc thay đổi từ không hiển thị sang hiển thị.

khi nào nên sử dung display trong css

Bạn nên sử dụng thuộc tính ‘display’ trong CSS khi muốn điều chỉnh cách một thành phần HTML hiển thị trên trang web.

Ví dụ, nếu bạn muốn một thành phần được hiển thị như một khối và tạo ra một dòng riêng biệt trước và sau nó, bạn có thể sử dụng giá trị ‘block’ cho thuộc tính ‘display’. Nếu bạn muốn một thành phần hiển thị như một dòng văn bản, bạn có thể sử dụng giá trị ‘inline’.

Nếu bạn muốn thành phần không hiển thị trên trang web, bạn có thể sử dụng giá trị ‘none’ cho thuộc tính ‘display’.

Bạn cũng có thể sử dụng thuộc tính ‘display’ để chuyển đổi giữa các loại hiển thị khác nhau, chẳng hạn như chuyển đổi từ dòng văn bản sang khối hoặc từ không hiển thị sang hiển thị.

Cũng có thể sử dụng thuộc tính ‘display: flex’ để tạo ra một flex container và sắp xếp các flex item theo hàng hoặc cột.

Tuy nhiên, chúng ta cần lưu ý rằng, sử dụng thuộc tính ‘display’ quá nhiều có thể gây rối cho mã của bạn và giảm hiệu quả của trang web.

Các ví dụ display trong css

Ví dụ 1: Chuyển đổi một thành phần từ dòng văn bản sang khối

<span class="inline-element">This is an inline element</span>
.inline-element {
  display: block;
}

Ví dụ 2: Ẩn một thành phần

<div class="hide-element">This is a hide element</div>
.hide-element {
  display: none;
}

Ví dụ 3: Sử dụng flex để sắp xếp các thành phần theo hàng

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex-basis: 30%;
}

Ví dụ 4: Sử dụng ‘display: table’ để hiển thị một thành phần như một bảng

<div class="table-element">
  <div class="table-row">
    <div class="table-cell">Cell 1</div>
    <div class="table-cell">Cell 2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Cell 3</div>
    <div class="table-cell">Cell 4</div>
  </div>
</div>
.table-element {
  display: table;
}
.table-row {
  display: table-row;
}

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now