Tất cả các phần tử HTML đều có bộ giá trị hiển thị mặc định và có thể được ghi đè bằng thuộc tính CSS Display, tương tự như vậy, khả năng hiển thị của tất cả các phần tử được đặt thành hiển thị làm mặc định nhưng điều này cũng có thể bị ghi đè bằng thuộc tính CSS Visibility.
Sau đây là các giá trị cho thuộc tính Hiển thị CSS -
| Sr.No | Giá trị &Mô tả | |||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | nội tuyến Nó hiển thị một phần tử dưới dạng phần tử nội tuyến (như ), các thuộc tính chiều cao và chiều rộng sẽ không có hiệu lực nếu được xác định | |||||||||||||||||||||||||||||||||||
| 2 | khối Nó hiển thị một phần tử dưới dạng phần tử khối (như ) và buộc ngắt dòng | |||||||||||||||||||||||||||||||||||
| 3 | nội dung Nó 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 Nó hiển thị một phần tử dưới dạng một vùng chứa linh hoạt cấp khối | |||||||||||||||||||||||||||||||||||
| 5 | lưới Nó 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 Nó hiển thị một phần tử dưới dạng một vùng chứa khối cấp nội tuyến. Bản thân phần tử được định dạng là phần tử nội tuyến, nhưng có thể áp dụng các giá trị chiều cao và chiều rộng | |||||||||||||||||||||||||||||||||||
| 7 | inline-flex Nó 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 Nó hiển thị một phần tử dưới dạng một 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 | |||||||||||||||||||||||||||||||||||
| 10 | list-item Nó cho phép phần tử hoạt động giống như một phần tử | |||||||||||||||||||||||||||||||||||
| 11 | chạy vào Nó hiển thị một phần tử dưới dạng khối hoặc nội dòng, tùy thuộc vào ngữ cảnh | |||||||||||||||||||||||||||||||||||
| 12 | bảng Nó cho phép phần tử hoạt động giống như một phần tử
Hãy xem một ví dụ về CSS display inline-block - Ví dụ<!DOCTYPE html>
<html>
<head>
<title>CSS Display Inline-Block</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-Inline-Block</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html> Đầu ra
Sau đây là các giá trị của thuộc tính CSS Visibility -
Hãy xem một ví dụ về thuộc tính CSS Visibility - Ví dụ<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form ,table{
width:70%;
margin: 0 auto;
text-align: center;
}
table, th, td {
border-collapse: collapse;
border: 1px solid black;
}
thead {
background-color: goldenrod;
}
tbody{
background-color: khaki;
}
tr:nth-of-type(3){
visibility: collapse;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead>
<tr><th>Name</th><th>Course</th></tr>
</thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html> Đầu raTính năng thu gọn Chế độ hiển thị CSS không được áp dụng -
Tính năng thu gọn Chế độ hiển thị trong CSS được áp dụng -
|
