CSS Box Model định nghĩa cách các phần tử được định cỡ, định vị và hiển thị. Trình duyệt tải tài liệu HTML, nó tạo ra một DOM tree và gán một hộp cho mỗi phần tử. Hộp này tính toán kích thước của phần tử và vị trí tương đối so với phần tử cha hoặc phần tử gốc <html>. Điều này đảm bảo bố cục và khoảng cách chính xác.
Box Model Component Layout
- Content: Vùng hiển thị văn bản hoặc nội dung khác.
- Padding: Khoảng trắng giữa nội dung và đường viền của phần tử.
- Border: Một khung bao quanh phần padding và nội dung.
- Margin: Khoảng trắng giữa đường viền và các phần tử lân cận.
Key components of the box model
. Content Area
- Content Area là phần trung tâm của CSS box model chứa nội dung chính (ví dụ: văn bản, hình ảnh, video hoặc các phần tử như <p> hoặc <span>).
- Nó có thể được tạo kiểu bằng các CSS properties như height và width.
Content edge đề cập đến bốn cạnh của content area.
- Left content edge
- Right content edge
- Top content edge
- Bottom content edge
. Padding Area
- Padding Area là khoảng trắng giữa nội dung và border của một phần tử.
- Nó bao gồm các vùng được tô sáng bằng màu xanh lá cây nhạt và màu da trong ví dụ.
- Khoảng cách giữa content edge và border là padding.
- Border đánh dấu sự kết thúc của padding area.
- Padding area đóng góp vào kích thước tổng thể của phần tử.
- Padding có thể được điều chỉnh bằng CSS properties.
- Nó hoạt động tương tự với box-sizing: content-box và box-sizing: border-box nhưng có một chút khác biệt.
. Border Area
- Vùng đánh dấu sự kết thúc của một phần tử được gọi là border nó là hàng rào bên ngoài cho phần tử.
- Các border properties mặc định được cung cấp trong CSS để kiểm soát độ dày của hàng rào bên ngoài này.
- Border Area cũng cộng vào height and width hoàn chỉnh của phần tử.
- Border width càng lớn thì height hoặc width của phần tử càng lớn.
- Trong hình trên, vùng được đánh dấu bằng màu da được gọi là border area.
. Margin Area
- Vùng bên ngoài border của một phần tử được gọi là margin area.
- Về cơ bản, vùng này phụ thuộc vào phần tử cha của phần tử.
- Khoảng cách giữa border của phần tử cha và border của phần tử con được gọi là margin.
- CSS cung cấp một số margin properties để kiểm soát tình huống này.
Box Sizing Property in CSS
Có hai loại box-sizing properties trong CSS.
. Content-Box(default property)
Khi người dùng đặt giá trị của box-sizing property cho một phần tử là content-box hoặc thậm chí nếu người dùng không đặt nó, nó vẫn mặc định là content-box. Chiều cao và chiều rộng thực tế của phần tử được tính bằng cách cộng kích thước của content area. Kích thước của padding area cũng được thêm vào để tạo thành kích thước cuối cùng của phần tử.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
height: 200px;
width: 200px;
box-sizing: content-box;
padding-left: 20px;
padding-right: 20px;
border-left: 2px solid red;
border-right: 2px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>Hello GFG</div>
</body>
</html>
<!--Driver Code Ends-->
Đoạn code này tạo ra một box model với đường border line có width là 0.4px. Border area là 1.6px và padding area là 20px ở cả hai bên content area.
Content Area (Width) : Width của content area được cố định ở 200px.
Padding
- Padding thêm khoảng trắng bên trong phần tử xung quanh nội dung.
- Padding Left: 20px
- Padding Right: 20px
- Tổng chiều rộng padding: 20px + 20px = 40px
Border
- Border là một đường liền nét có width nhưng nó được tính khác với padding.
- Line Width của Border: 0.4px (width của chính đường kẻ).
- Area của Border: 1.6px (khoảng trắng thực tế mà border chiếm).
- Border width cho cả hai bên: 1.6px (trái) + 1.6px (phải) = 3.2px.
Total Width
- Total width của phần tử có thể được tính bằng cách thêm padding và border vào content area width.
- Công thức cho Total Width = (Padding-Left + Padding-Right + Border-Area-Left + Border-Area-Right) + Content Area Width.
- Total Width = (20px + 20px + 1.6px + 1.6px) + 200px = 243.2px.
- Total width của phần tử trở thành 243.2px.
Lý do total width tăng lên bất ngờ là vì box-sizing: content-box chỉ áp dụng width cho content area. Padding và border được thêm vào bên ngoài content area dẫn đến sự tăng lên về width and height tổng thể của phần tử.
. Border-Box
Khi box-sizing property được đặt thành border-box, kích thước thực tế của phần tử vẫn giống như kích thước thực tế mà người dùng đã đặt. Sự khác biệt là kích thước của content area bị thay đổi để nó có thể chứa padding area và border area để kết quả có thể bằng với kích thước thực tế mà người dùng đã nhập.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
height: 200px;
width: 200px;
box-sizing:border-box;
padding-left: 20px;
padding-right: 20px;
border-left: 2px solid red;
border-right: 2px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>Hello GFG</div>
</body>
</html>
<!--Driver Code Ends-->
Đoạn code này sẽ tạo ra một box model bằng cách thay đổi kích thước đặc biệt là width của content area để phù hợp với padding và border area với border line-width.
- Width of Border and Padding Border width : 0.4px (line width) và 1.6px + 1.6px = 3.2px (total border area).
- Padding width : 20px + 20px = 40px.
- User-Entered Width : Width mà người dùng nhập là 200px. Nó chỉ áp dụng cho content area khi box-sizing: content-box được sử dụng.
- Box-Sizing Behavior : box-sizing: content-box property thêm padding và border bên ngoài content area làm cho total width tăng lên.
- Adjusting Content Area Width : Để đảm bảo total width vẫn là 200px, phần width thêm từ padding và border (40px + 3.2px = 43.2px) được trừ đi từ total width.
- New content area width : 200px - 43.2px = 156.8px.
- Final Width Calculation : Total width cuối cùng là: 156.8px (content area) + 40px (padding) + 3.2px (border) = 200px, đảm bảo width mà người dùng nhập không thay đổi.
Use Case's of CSS Box Model
. Default box-sizing: content-box
Đây là hành vi mặc định khi padding và border được thêm vào bên ngoài content area. Điều này dẫn đến sự gia tăng width/height tổng thể.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
background-color: lightgreen;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>This is a div with box-sizing content-box.</div>
</body>
</html>
<!--Driver Code Ends-->
Total width của phần tử sẽ là 200px + 20px (trái) + 20px (phải) + 5px (border trái) + 5px (border phải) = 250px.
. Using box-sizing: border-box for Consistent Sizing
Hãy đảm bảo padding and border được bao gồm trong width/height đã chỉ định. Điều này sẽ duy trì kích thước cố định để nhất quán bố cục.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
background-color: lightcoral;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>This is a div with box-sizing border-box.</div>
</body>
</html>
<!--Driver Code Ends-->
Total width vẫn là 200px với padding và border được bao gồm trong kích thước 200px.
. Setting box-sizing for All Elements
Áp dụng box-sizing: border-box cho tất cả các phần tử trên toàn cầu để đơn giản hóa tính toán bố cục. Ngăn chặn các thay đổi kích thước phần tử bất ngờ.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
box-sizing: border-box;
}
div {
width: 100%;
padding: 20px;
border: 2px solid blue;
background-color: lightyellow;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>This is a div with border-box applied globally.</div>
</body>
</html>
<!--Driver Code Ends-->
Tất cả các phần tử đều có kích thước nhất quán, với padding và border được bao gồm bên trong width/height.
. Fixed Layout with box-sizing: border-box
Tạo một phần tử có kích thước cố định với padding và border mà không làm thay đổi kích thước bố cục.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
width: 300px;
height: 150px;
padding: 10px;
border: 10px solid green;
box-sizing: border-box;
background-color: lightblue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>This is a fixed-size div with box-sizing border-box.</div>
</body>
</html>
<!--Driver Code Ends-->
. Creating a Responsive Box with box-sizing
Đảm bảo rằng padding và border không gây ra các sự cố bố cục trong responsive design.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
box-sizing: border-box;
}
.container {
max-width: 100%;
padding: 20px;
border: 5px solid purple;
background-color: lightgreen;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">This is a responsive box with border-box.</div>
</body>
</html>
<!--Driver Code Ends-->
Phần tử thay đổi kích thước theo chiều rộng màn hình, với padding và border được bao gồm trong kích thước tổng thể. Điều này tránh tràn nội dung.