Tìm hiểu cách sử dụng CSS box-sizing để kiểm soát cách trình duyệt tính toán và hiển thị chiều rộng và chiều cao của các phần tử HTML của bạn.
box-sizing (content-box so với border-box)
CSS box-sizing thuộc tính có hai giá trị:
-
content-box(mặc định) -
border-box
Cả hai giá trị định cỡ hộp đều ảnh hưởng đến cách trình duyệt tính toán và hiển thị kích thước của các phần tử HTML, nhưng đó là điểm chung duy nhất giữa chúng.
content-box
Theo mặc định, tất cả các phần tử HTML sử dụng content-box giá trị:
box-sizing: content-box;Điều này có nghĩa là nếu bạn có một phần tử có các kiểu sau:
div {
width: 100px;
height: 100px;
padding: 16px;
border: 1px solid;
}Sau đó, chiều rộng và chiều cao của phần tử đó được tính là 134px, không phải 100px như bạn đã chỉ định trong biểu định kiểu CSS của mình. Kết quả:
Nếu bạn muốn tự mình kiểm tra kích thước, hãy bật Trình kiểm tra phần tử của trình duyệt của bạn với lệnh này:
- Máy Mac:Cmd + Shift + C
- Windows:Ctrl + Shift + C
Sau đó, di chuột qua phần tử ở trên để xem kích thước của nó.
Điều này xảy ra bởi vì content-box cộng các giá trị chiều rộng / chiều cao với đường viền (1px ở mỗi bên) và đệm (16px ở mỗi bên) giá trị và hiển thị kích thước phần tử bằng tổng các giá trị đó:
- Chiều rộng phần tử:
1 + 16 + 100 + 16 + 1=134 điểm ảnh. - Chiều cao phần tử:
1 + 16 + 100 + 16 + 1=134 điểm ảnh.
Hành vi mặc định này từ content-box có thể khá khó chịu khi làm việc, nhưng may mắn thay, bạn có thể dễ dàng thay đổi nó!
box-sizing: content-box mặc định khai báo được kế thừa từ Biểu định kiểu tác nhân người dùng, được tích hợp vào tất cả các trình duyệt web.
border-box để giải cứu
Bạn có thể dễ dàng ghi đè content-box giá trị bằng border-box giá trị này có tác động ngược lại đến cách trình duyệt tính toán kích thước của các phần tử:
box-sizing: border-box;
Bằng cách đặt box-sizing của bạn thuộc tính thành border-box trình duyệt sẽ hiển thị các phần tử của bạn ở chiều rộng và chiều cao chính xác mà bạn chỉ định trên phần tử có height và width thuộc tính:
div {
width: 100px;
height: 100px;
padding: 16px;
border: 1px solid;
box-sizing: border-box;
}Kết quả:
border-box giá trị làm cho trình duyệt bao gồm (không thêm) các giá trị phần đệm và đường viền được chỉ định khi tính toán tổng chiều rộng và chiều cao của phần tử.
Với border-box , bất kể padding nào hoặc border giá trị bạn thêm vào phần tử của mình, tổng kích thước của phần tử sẽ là giá trị mà bạn chỉ định trên height và width thuộc tính.
Để có thước đo tốt, đây là so sánh song song:
Cả hai phần tử trên đều có chiều rộng và chiều cao được chỉ định là 100 pixel, nhưng chỉ phần tử thứ 2 tôn trọng các giá trị được chỉ định đó vì nó sử dụng border-box .
content-box so với border-box tóm lại:
-
content-boxkết hợp các giá trị phần đệm và đường viền với các giá trị chiều cao / chiều rộng của các phần tử và hiển thị tổng số. -
border-boxbao gồm các giá trị đệm và đường viền như một phần của chiều rộng / chiều cao của phần tử.
Sử dụng border-box cho mọi thứ
Bây giờ bạn biết rằng border-box làm cho các trình duyệt hiển thị các phần tử HTML ở kích thước thực tế mà bạn chỉ định trong CSS của mình. Nhưng làm cách nào để bạn áp dụng border-box trên tất cả các phần tử HTML của bạn?
Nó đơn giản như thêm bộ quy tắc CSS sau đây ở rất đầu của biểu định kiểu của bạn:
*, *:before, *:after {
box-sizing: border-box;
}
Đoạn mã trên sử dụng bộ chọn phổ quát của CSS * để áp dụng border-box giá trị của box-sizing tài sản trên:
- Tất cả các bộ chọn phần tử bình thường (
div,p, nútbutton, v.v.) - Tất cả
:beforevà:afterbộ chọn psuedo
Bằng cách sử dụng border-box trên tất cả các phần tử HTML của mình, bạn không còn phải lo lắng về cách trình duyệt hiển thị kích thước của các phần tử của bạn. Nó sẽ luôn là chiều cao và chiều rộng mà bạn tự chỉ định.