Cách sử dụng thuộc tính box-sizing trong CSS

1) 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ó.

2) 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>

Xem ví dụ

- 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.