Định cỡ hộp - Thủ thuật CSS

Anonim

Các box-sizingbất động sản trong CSS kiểm soát như thế nào mô hình hộp được xử lý cho các phần tử nó áp dụng vào.

.module ( box-sizing: border-box; )

Một trong những cách phổ biến hơn để sử dụng nó là áp dụng nó cho tất cả các phần tử trên trang, bao gồm các phần tử giả:

*, *::before, *::after ( box-sizing: border-box; )

Đây thường được gọi là "định cỡ hộp phổ quát" và đó là một cách tốt để làm việc! (Theo nghĩa đen) widthbạn đặt là chiều rộng bạn nhận được mà không cần phải thực hiện phép tính nhẩm và quản lý độ phức tạp đến từ độ rộng đến từ nhiều thuộc tính. Chúng tôi thậm chí có một ngày nhận thức về kích thước hộp quanh đây.

Giá trị

  • content-box: mặc định. Giá trị chiều rộng và chiều cao chỉ áp dụng cho nội dung của phần tử. Phần đệm và đường viền được thêm vào bên ngoài hộp.
  • padding-box: Giá trị chiều rộng và chiều cao áp dụng cho nội dung của phần tử và phần đệm của nó. Đường viền được thêm vào bên ngoài hộp. Hiện tại, chỉ có Firefox hỗ trợ padding-boxgiá trị này.
  • border-box: Giá trị chiều rộng và chiều cao áp dụng cho nội dung, phần đệm và đường viền.
  • inherit: kế thừa kích thước hộp của phần tử mẹ.

Thí dụ

Hình ảnh ví dụ này so sánh mặc định content-box(trên cùng) với border-box(dưới cùng):

Đường màu đỏ giữa các hình ảnh đại diện cho giá trị chiều rộng của các phần tử. Lưu ý rằng phần tử có giá trị mặc định box-sizing: content-box;vượt quá chiều rộng đã khai báo khi phần đệm và đường viền được thêm vào bên ngoài hộp nội dung, trong khi phần tử box-sizing: border-box;được áp dụng hoàn toàn phù hợp với chiều rộng đã khai báo.

Sử dụng kích thước hộp

Giả sử bạn đặt một phần tử thành width: 100px; padding: 20px; border: 5px solid black;. Theo mặc định, hộp kết quả có chiều rộng 150px. Đó là bởi vì mô hình định cỡ hộp mặc định là content-box, chỉ áp dụng chiều rộng đã khai báo của phần tử cho nội dung của nó, đặt phần đệm và đường viền bên ngoài hộp của phần tử. Điều này làm tăng hiệu quả lượng không gian mà phần tử chiếm dụng.

Nếu bạn thay đổi box-sizingthành padding-box, phần đệm được đẩy vào bên trong hộp của phần tử. Sau đó, hộp sẽ có chiều rộng 110px, với 20px đệm ở bên trong và 10px đường viền ở bên ngoài. Nếu bạn muốn đặt đệm và đường viền bên trong hộp, bạn có thể sử dụng border-box. Sau đó, hộp sẽ có chiều rộng 100px - 10px đường viền và 20px đệm đều được đẩy vào bên trong hộp của phần tử.

Bản giới thiệu

Xem So sánh Pen của các giá trị kích thước hộp bằng CSS-Tricks (@ css-trick) trên CodePen.

Có liên quan

  • width
  • height
  • padding
  • border

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
Bất kì *† 3 * † 1 ‡ 7 * số 8 * 2.1 * † Bất kì *

* padding-boxkhông được hỗ trợ

† các phiên bản cũ hơn yêu cầu -webkittiền tố (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

-mozTiền tố ‡ bắt buộc lên đến phiên bản 28, chưa có tiền tố 29.