Các phần tử block-level (cấp khối) có thuộc tính CSS display được đặt là block, list-item, hoặc table. Các phần tử này ép buộc ngắt dòng (line break) cả trước và sau chính chúng. Mỗi phần tử block-level tạo ra một block-level box (hộp cấp khối), là một phần của sơ đồ định vị (positioning scheme) và chứa các hộp con (child boxes).
Block container boxes (hộp chứa khối) chứa các block-level boxes và tuân theo block formatting context (bối cảnh định dạng khối), HOẶC chứa các inline-level boxes và tuân theo inline formatting context. Thuật ngữ Block boxes được dùng khi block-level boxes cũng là block containers.
Anonymous block boxes (hộp khối ẩ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 inline box chứa một block box, thì nội dung inline xung quanh block box đó sẽ được bao quanh bởi một anonymous block box.
Ví dụ minh họa
<!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;
}
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>
</fieldset>
</form>
</body>
</html>
Kết quả
Tóm tắt:
- Phần tử
<div>,<p>,<h1>-<h6>,<section>,<article>mặc định là block-level
< Chiếm toàn bộ chiều rộng khả dụng của container cha
- Bắt đầu trên dòng mới, kết thúc bằng ngắt dòng
- Có thể thiết lập width, height, margin, padding