Thuộc tính Hiển thị CSS được sử dụng để kiểm soát khả năng hiển thị của các phần tử trên trang web. Một số giá trị của nó được hiển thị ở đây -
Hiển thị một phần tử dưới dạng vùng chứa linh hoạt cấp nội tuyến
| Sr.No | Giá trị &Mô tả thuộc tính |
|---|---|
| 1 | nội tuyến Hiển thị một phần tử dưới dạng phần tử nội tuyến. |
| 2 | khối Hiển thị một phần tử dưới dạng phần tử khối. |
| 3 | nội dung Làm cho vùng chứa biến mất, làm cho các phần tử con là phần tử con của phần tử lên cấp tiếp theo trong DOM |
| 4 | flex Hiển thị một phần tử dưới dạng vùng chứa linh hoạt cấp khối |
| 5 | lưới Hiển thị một phần tử dưới dạng vùng chứa lưới cấp khối |
| 6 | khối nội tuyến Hiển thị một phần tử dưới dạng vùng chứa khối cấp nội tuyến. |
| 7 | inline-flex Hiển thị một phần tử dưới dạng một vùng chứa linh hoạt cấp nội tuyến |
| 8 | inline-grid Hiển thị một phần tử dưới dạng vùng chứa lưới cấp nội tuyến |
| 9 | bảng nội tuyến Phần tử được hiển thị dưới dạng bảng cấp nội tuyến |
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ để triển khai thuộc tính hiển thị CSS -
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: orange;
color: white;
}
p.demo {
display: none;
}
span.demo1 {
display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html> Đầu ra
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ khác -
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
p.demo1 {
display: block;
}
p.demo2 {
display: inline-block;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019.
</div>
<div>
Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019.
</div>
</body>
</html> Đầu ra
