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;
}
VD: Như các bạn đã biết thì thẻ span
trong HTML là một thẻ xác định xuống dòng khi độ dài của nó vượt quá chiều rộng được cho phép, còn không nó sẽ không xuống dòng. Nhưng khi chúng ta sử dụng thuộc tính display:block cho thẻ span thì nó sẽ xuống dòng như thẻ div
và thẻ p
.
span{
display: block;
}
2, Display inline.
-Thuộc tính display: inline
có tác dụng xác định thành phần được hiển thị theo chiều ngang (không ngắt dòng khi chiều rộng vẫn nhỏ hơn chiều rộng của màn hình). Đây là dạng mặc định của các thẻ a
,span
,...
Cú Pháp:
selector{
display: inline;
}
VD: Thông thường thì các thẻ p
sẽ được định dạng theo dạng khối trong một trang web. Nhưng chúng ta hoàn toàn có thể thay đổi nó thành định dạng như thẻ span
.
p{
display: inline;
}
3, Display inline-block.
-Thuộc tính display: inline-block có tác dụng xác định các thành phần sẽ được hiển thị theo khối nhưng là các khối inline.
Cú pháp:
selector{
display: inline-block;
}
VD:
p{
display: inline-block;
background: orange;
}
4, Display inline-table.
-Thuộc tính display: inline-table
các tác dụng xác định thành phần được hiển thị theo dạng khối nột tuyến. Không xuống dòng trước và sau các thành phần cạnh nó.
Cú Pháp:
selector{
display: inline-table;
}
VD:
p{
display: inline-table;
background: orange;
}
5, Display list-item.
-Thuộc tính display: list-item
có tác dụng xác định thành phần sẽ được hiển thị như một thẻ li
.
Cú Pháp:
selector{
display: list-item;
}
VD:
p{
display: list-item;
}
6, Display none.
-Thuộc tính display: none
có tác dụng ẩn thành phần được chọn.
Cú Pháp:
selector{
display: none;
}
VD:
p{
display: none;
}
7, Display table.
Thuộc tính display: table
có tác dụng xác định thành phần được chọn như một thẻ <table>.
Cú Pháp:
selector{
display: table;
}
VD:
p{
display: 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.
Cú Pháp:
selector{
display: inherit;
}
9, Các giá trị khác của display.
-Ngoài những thuộc tính ở trên thì display còn hỗ trợ chúng ta một số các giá trị như sau:
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. |
10, Lời kết.
-Như vậy mình đã giới thiệu xong với mọi người về thuộc tính display trong CSS. Nhưng ở phần trên các bạn chỉ cần chú ý mục số 1,2,3,7 vì các mục còn lại rất ít khi được sử dụng trong thực tế.
Đăng ký nhận tin.
Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!
Cám ơn bạn, bài viết hay và rất dễ hiểu
Digi
7 năm trước
không tắt adblock
3 năm trước