Kích thước hộp CSS
Kích thước hộp CSS
Thuộc tính CSS box-sizingcho phép chúng tôi bao gồm phần đệm và đường viền trong tổng chiều rộng và chiều cao của phần tử.
Không có Thuộc tính kích thước hộp CSS
Theo mặc định, chiều rộng và chiều cao của một phần tử được tính như sau:
width + padding + border = chiều rộng thực của phần tử
+ padding + border = chiều cao thực của phần tử
Điều này có nghĩa là: Khi bạn đặt chiều rộng / chiều cao của một phần tử, phần tử thường xuất hiện lớn hơn bạn đã đặt (vì đường viền và phần đệm của phần tử được thêm vào chiều rộng / chiều cao được chỉ định của phần tử).
Hình minh họa sau đây cho thấy hai phần tử <div> có cùng chiều rộng và chiều cao được chỉ định:
Hai phần tử <div> ở trên kết thúc với các kích thước khác nhau trong kết quả (vì div2 có một phần đệm được chỉ định):
Thí dụ
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Tài box-sizingsản giải quyết vấn đề này.
Với Thuộc tính kích thước hộp CSS
Thuộc box-sizingtính cho phép chúng tôi bao gồm phần đệm và đường viền trong tổng chiều rộng và chiều cao của phần tử.
Nếu bạn đặt box-sizing: border-box;trên một phần tử, phần đệm và đường viền được bao gồm trong chiều rộng và chiều cao:
Đây là ví dụ tương tự như trên, box-sizing: border-box;
được thêm vào cả hai phần tử <div>:
Thí dụ
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Vì kết quả của việc sử dụng box-sizing: border-box;tốt hơn rất nhiều, nhiều nhà phát triển muốn tất cả các phần tử trên trang của họ hoạt động theo cách này.
Đoạn mã dưới đây đảm bảo rằng tất cả các phần tử đều được định kích thước theo cách trực quan hơn. Nhiều trình duyệt đã sử dụng box-sizing: border-box;cho nhiều phần tử biểu mẫu (nhưng không phải tất cả - đó là lý do tại sao đầu vào và vùng văn bản trông khác nhau ở chiều rộng: 100%;).
Áp dụng điều này cho tất cả các yếu tố là an toàn và khôn ngoan:
Thí dụ
* {
box-sizing: border-box;
}
Thuộc tính kích thước hộp CSS
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |