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ị.

Tóm tắt nội dung

Các loại display trong CSS

Trong CSS, thuộc tính “display” được sử dụng để xác định cách thức hiển thị của một phần tử HTML. Có nhiều giá trị khác nhau cho thuộc tính “display”, mỗi giá trị đại diện cho một loại hiển thị khác nhau. Sau đây là các giá trị phổ biến nhất cho thuộc tính “display” trong CSS:

block: Đối tượng có kích thước rộng bằng với phần tử cha, chiếm toàn bộ chiều rộng của dòng, và sẽ tự động xuống dòng khi phần tử tiếp theo xuất hiện. Ví dụ: div, p, h1, h2, ul, li,…
inline: Đối tượng có kích thước chỉ bằng với nội dung của phần tử, không thể chỉnh sửa kích thước, vị trí và định dạng. Ví dụ: a, span, strong, em,…
inline-block: Tương tự như giá trị “inline”, nhưng đối tượng có thể được chỉnh sửa kích thước và định dạng. Ví dụ: button, input, img,…
none: Ẩn phần tử khỏi trang web, không chiếm không gian trên trang.
flex: Đối tượng sử dụng hệ thống định dạng linh hoạt (flexbox) để xác định kích thước, vị trí và thứ tự của các phần tử con.
grid: Đối tượng sử dụng hệ thống định dạng lưới (grid) để xác định kích thước, vị trí và thứ tự của các phần tử con.

Các giá trị khác cũng có thể được sử dụng cho thuộc tính “display” nhưng các giá trị trên được sử dụng phổ biến nhất.

So sánh visibility và display CSS?

Trong CSS, có hai thuộc tính “visibility” và “display” được sử dụng để điều khiển sự hiển thị của một phần tử trên trang web. Mặc dù cả hai thuộc tính này có mục đích tương tự, tuy nhiên chúng có những điểm khác nhau quan trọng như sau:

Ảnh hưởng đến không gian trống: Khi một phần tử có thuộc tính “display: none”, nó sẽ bị ẩn khỏi trang web và không chiếm không gian trống nào. Trong khi đó, khi một phần tử có thuộc tính “visibility: hidden”, nó vẫn chiếm không gian trống nhưng chỉ bị ẩn đi.
Tương tác với phần tử: Khi một phần tử có thuộc tính “display: none”, nó không thể tương tác được với người dùng, nhưng khi một phần tử có thuộc tính “visibility: hidden”, nó vẫn có thể tương tác được với người dùng.
Hiệu quả về tốc độ: Khi phần tử được ẩn bằng thuộc tính “display: none”, nó sẽ được tải nhanh hơn so với khi ẩn bằng thuộc tính “visibility: hidden”, vì nó không phải tính toán hoặc hiển thị bất kỳ nội dung nào.
Kiểm soát sự hiển thị của phần tử: Thuộc tính “display” cho phép kiểm soát cách phần tử được hiển thị trên trang, bao gồm kiểm soát kích thước, vị trí và trình bày. Trong khi đó, thuộc tính “visibility” chỉ điều khiển việc hiển thị hoặc ẩn đi phần tử, mà không ảnh hưởng đến kiểu dáng, kích thước hoặc vị trí của phần tử.

Tóm lại, cả hai thuộc tính “visibility” và “display” đều được sử dụng để điều khiển sự hiển thị của phần tử trên trang web, tuy nhiên chúng có những điểm khác nhau về cách hoạt động và tác động đến trang web.

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;
}

CSS

display trong css

Các loại display trong CSS

So sánh visibility và display CSS?

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

Các ví dụ display trong css

Trả lời Hủy