Các phần tử cấp khối có CSS hiển thị thuộc tính được đặt thành ‘block’, ‘list-item’ hoặc ‘table’ và các phần tử này buộc ngắt dòng ở trên và dưới chính chúng. Các hộp cấp khối được tạo bởi mỗi phần tử cấp khối là một phần của sơ đồ định vị cũng như chứa các hộp con.
Hộp vùng chứa khối chứa các hộp cấp khối và tuân theo ngữ cảnh định dạng khối hoặc chứa các hộp cấp nội tuyến và tuân theo ngữ cảnh định dạng nội tuyến. Hộp khối là một thuật ngữ được sử dụng nếu các hộp cấp khối cũng là các hộp chứa khối.
Hộp chặn ẩn danh là những hộp mà nhà phát triển không có quyền kiểm soát. Nếu một hộp nội tuyến chứa một hộp khối và nội dung nội tuyến xung quanh hộp khối được bao bọc trong một hộp chặn ẩn danh.
Ví dụ
Hãy xem một ví dụ về Phần tử cấp khối và Hộp khối -
<!DOCTYPE html>
<html>
<head>
<title>CSS Block-level Elements and Block Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
box-sizing: border-box;
/*margin:5px;*/
}
input[type="button"] {
border-radius: 10px;
}
.child{
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 Block-level Elements and Block Boxes</legend>
<div id="container">Color Orange
<div class="child"></div>Color Red
<div class="child"></div>Color Violet
<div class="child"></div>
</div><br>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
