Tất cả các phần tử HTML đều có giá trị mặc định được đặt cho thuộc tính Hiển thị CSS của chúng. Thuộc tính này chỉ định cách phần tử sẽ được hiển thị trong tài liệu.
LƯU Ý - Thuộc tính hiển thị mặc định có thể bị ghi đè nhưng điều đó không thay đổi loại phần tử chỉ là hành vi hiển thị của nó trên tài liệu.
Sau đây là một số giá trị cho thuộc tính Hiển thị CSS -
- Chặn
- Nội tuyến
- Inline-Block
- Không có
Ví dụ
Hãy xem một ví dụ về thuộc tính Hiển thị CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS Display</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: block; /*default value for <div>*/
height: 40px;
width: 100%;
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</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
Điều này sẽ tạo ra kết quả sau -
Ví dụ
Hãy xem một ví dụ khác về thuộc tính Hiển thị CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS Display</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{
height: 40px;
color: white;
border: 4px solid black;
display: inline;
}
.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</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
Điều này sẽ tạo ra kết quả sau -
