Box-sizing trong css là gì

Thí dụ

.div1 { width: 400px; height: 200px; border: 2px solid red; box-sizing: border-box; } .div2 { width: 400px; height: 200px; padding: 30px; border: 2px solid green; box-sizing: border-box; }

Mẹo: border-box là lựa chọn tốt nhất để thiết kế bố cục và quản lý kích thước của các phần tử HTML.

Bạn không cần đặt thuộc tính này cho từng phần tử riêng lẻ. Thay vào đó, hãy sử dụng bộ chọn dấu hoa thị (*) để chọn tất cả các phần tử.

Trong ví dụ này, chúng tôi áp dụng box-sizing: border-box; cho tất cả các phần tử trong tài liệu HTML:

Thí dụ

* { box-sizing: border-box; }

content-box

content-box đặt hành vi thông thường là thêm phần padding và đường border vào các phần tử một cách riêng biệt.

Nếu bạn đặt chiều rộng của phần tử là 200 pixel, mục sẽ xuất hiện lớn hơn khi bạn thêm phần padding và đường viền.

Người dùng có thể thay đổi kích thước các phần tử

Đây là một vùng chứa có thể thay đổi kích thước. Hãy thử kéo góc dưới cùng bên phải!

div { resize: horizontal; /* This allows to resize the div's width */ overflow: auto; }

Thuộc tính thay đổi kích thước là để cho biết liệu một phần tử có thể thay đổi kích thước bởi người dùng hay không. Nó có thể có bốn giá trị: ngang, dọc, cả hai và không.

div { resize: vertical; /* This allows to resize the div's height */ overflow: auto; }

Ví dụ dưới đây cho thấy cách bạn có thể cho phép người dùng thay đổi kích thước chiều rộng của vùng chứa:

Thí dụ

div { resize: both; /* This allows to resize both of the div's size properties */ overflow: auto; }

CSS box-sizing CSS: Mẹo hữu ích

padding-box được sử dụng để áp dụng chiều rộng và chiều cao của các phần tử vào phần padding và content của chúng. Các trình duyệt không còn hỗ trợ thuộc tính này.

Hầu hết các trình duyệt hiện đại đều hỗ trợ thuộc tính box-sizing.