Thuộc tính Hiển thị CSS được sử dụng để đặt cách phần tử được hiển thị trên trang web. Một số giá trị của nó được hiển thị ở đây -
| Sr.no | Giá trị tài sản | Mô tả |
|---|---|---|
| 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 vùng chứa linh hoạt cấp nội tuyến |
| 8 | lưới nội tuyến | 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
