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.
Chia sẻ bài viết

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

Hoặc copy địa chỉ

Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon