1. Trang chủ
  2. Tài liệu
  3. CSS
  4. Bài 11: Thuộc tính display trong CSS

Bài 11: Thuộc tính display trong CSS

Thuộc tính display trong CSS cho phép chúng ta xác định kiểu hiển thị của các thẻ HTML trên website. Thuộc tính này bao gồm 17 giá trị kèm theo nó….

1. display:block

Thuộc tính display:block có tác dụng xác định thành phần hiển thị theo các hàng độc lập.

Cú pháp:

selector{
    display: block;
}

Ví dụ:

<span>Tìm hiểu về CSS</span>
<span>Làm thế nào để xuống dòng</span>

Nếu như chúng ta viết như đoạn HTML trên thì sẽ hiển thị cùng 1 dòng, bởi <span> nó không có xuống dòng, nhưng khi áp dụng display:block vào thì nó sẽ xuống mỗi dòng.

2. display:inline

Thuộc tính này nó sẽ ngược lại với display:block ở trên, dù bạn có dùng thẻ <p> thì nó vẫn nằm trên dùng 1 dòng.

3. display:inline-block

Chúng ta hiểu được “block” là gì rồi đúng không, “block” là hiển thị cái gì đó theo khối, “inline” là hiển thị cái gì đó cùng 1 dòng. Vậy inline-block là hiển thị các khối trên cùng 1 hàng.

4. display: table

Cũng không khác gì display:inline-block ở trên, chủ yếu liệt kê cho bạn biết là nó có tồn tại.. ahihi

5. display:list-item

Thuộc tính này giúp hiển thị từng dòng như là thẻ <li>

6. display:none

Thuộc tính này thì để ẩn một cái gì đó.

7. display:table

Hiển thị thuộc tính cho thành phần nào nó giống như thẻ <table>

8. display:inherit

Thuộc tính này có tác dụng xác định thành phần được chọn kế thừa từ thuộc tính của thành phần cha.

9. Một số thuộc tính display khác

Thuộc tính Mô tả
display: table-caption -Xác định như một thẻ <caption> trong table.
display: table-column-group -Xác định như thẻ <colgroup> trong table.
display: table-header-group -Xác định như thẻ <thead> trong table.
display: table-footer-group -Xác định như thẻ <tfoot> trong table.
display: table-row-group -Xác định như thẻ <tbody> trong table.
display: table-cell -Xác định như thẻ <td> trong table.
display: table-column -Xác định như thẻ <col> trong table.
display: table-row -Xác định như thẻ <tr> trong table.
Nội dung trên có giúp ích cho bạn? Không

Mình cần giúp đỡ!

Bình luận