Trong CSS, thuộc tính box-sizing giúp kiểm soát cách tính toán kích thước của một phần tử, đặc biệt là khi có thêm padding và border. Mặc định, trình duyệt sử dụng giá trị content-box, tức là chỉ tính kích thước phần nội dung, còn border và padding sẽ làm tăng tổng kích thước thực tế. Khi sử dụng box-sizing: border-box;, toàn bộ width và height của phần tử bao gồm cả padding và border, giúp bố cục trang web dễ dàng kiểm soát hơn và tránh bị tràn nội dung ngoài mong muốn.
Chức năng & cách sử dụng
- margin
- border
- padding
- content
Thông thường, khi chúng ta sử dụng thuộc tính width (height) để thiết lập chiều rộng (chiều cao) cho một phần tử thì mặc định chiều rộng (chiều cao) đó chỉ là chiều rộng (chiều cao) của phần nội dung content của phần tử mà thôi.
Tuy nhiên, với việc sử dụng thuộc tính box-sizing thì chúng ta có thể tùy chỉnh lại việc khi sử dụng thuộc tính width (height) để thiết lập chiều rộng (chiều cao) thì chiều rộng (chiều cao) đó chỉ là của phần nội dung hay là của nguyên cả phần tử (bao gồm luôn phần đường viền & vùng đệm)
Cú pháp:
box-sizing: value;– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
| content-box | – Chiều rộng (chiều cao) được thiết lập từ thuộc tính width (height) chỉ là chiều rộng (chiều cao) của phần “nội dung” của phần tử. | Xem ví dụ |
| border-box | – Chiều rộng (chiều cao) được thiết lập từ thuộc tính width (height) chính là chiều rộng (chiều cao) của nguyên cả phần tử. | |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính box-sizing có giá trị là content-box) |
|
| inherit | – Kế thừa giá trị thuộc tính box-sizing từ phần tử cha của nó. |
Tầm quan trọng của thuộc tính box-sizing
Thuộc tính box-sizing là một thuộc tính rất quan trọng trong việc thiết kế giao diện cho trang web, nó giúp chúng ta “đơn giản hóa” việc xác định kích thước của phần tử khi xây dựng bố cục trang.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
div{
width:500px;
padding:50px;
border:30px dotted crimson;
box-sizing:border-box;
}
</style>
</head>
<body>
<div>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
</div>
</body>
</html>Lưu ý: Phía trên chỉ là một ví dụ nhỏ về tầm quan trọng của thuộc tính box-sizing, sau này có rất nhiều trường hợp mà các bạn cần phải sử dụng đến nó thì mới có thể giải quyết được vấn đề, vì vậy các bạn cần phải đặc biệt ghi nhớ thuộc tính này.
