Thuộc tính Hiển thị CSS với khối giá trị hiển thị một phần tử có sẵn chiều rộng đầy đủ của phần tử gốc, nó cũng buộc ngắt dòng. Phần tử có hiển thị dưới dạng khối hiển thị dưới dạng phần tử
hoặc
.
Cú pháp
Sau đây là cú pháp của khối hiển thị CSS -
Selector {
display: block;
} Ví dụ
Hãy xem một ví dụ về khối hiển thị CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS Display Block</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
em{
background-color: #C303C3;
color: #fff;
display:block;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-Block</legend>
<label for="textSelect">Formatter: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertItalic()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function convertItalic() {
for(i=0; i<2; i++){
var italicObject = document.createElement("EM");
var italicText = document.createTextNode(textSelect.value);
italicObject.appendChild(italicText);
divDisplay.appendChild(italicObject);
}
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Trước khi nhấp vào ‘Kiểm tra’ nút -
Sau khi nhấp vào ‘Kiểm tra’ nút -
Ví dụ
Hãy xem một ví dụ khác về khối Hiển thị CSS -
<!DOCTYPE html>
<html>
<head>
<style>
#flex {
display: flex;
}
#none {
display: none;
}
.inline-block {
display: inline-block;
background-color: mintcream;
}
.grid {
display: grid;
background-color: cornflowerblue;
}
div {
margin: 30px;
padding: 5px;
height: 10px;
line-height: 5px;
text-align: center;
background-color: lightblue;
border: 2px solid black;
}
div > div {
background-color: lightpink;
border: 2px solid green;
}
div > div > div {
background-color: sandybrown;
border: 2px solid darkred;
}
</style>
</head>
<body>
<div><span id="flex">heyyy</span>
<div><span id="none">heyyy</span>
<div>
<span class="inline-block">heyyy</span>
<span class="inline-block">heyyy</span>
<div>
<span class="grid">heyyy demo</span>
<span class="grid">heyyy demo</span>
</div>
</div>
</div>
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
