Khi các bạn học qua Box mã sản phẩm trong CSS thì sẽ thấy gồm một điểm sáng khi áp dụng Padding cùng Border thì cái khung phần tử của bạn sẽ bị đổi khác kích thước nếu khách hàng có đặt thêm trực thuộc tính width và height để thiết lập kích thước mang lại nó. Ví dụ cái box của người sử dụng có width là 500px và height là 500px (500×500 px)nhưng nếu khách hàng đặt thêm padding là 15px nữa thì loại khung của các bạn sẽ có kích cỡ là 530×530 px. Cũng chính vì nếu thêm vào đó pading là 15px nữa thì cái khung của khách hàng sẽ tự động hóa cộng thêm 30px (15px mang lại top cùng và 15px đến bottom, tương tự như với left và right), tựa như vớiborder.

Bạn đang xem: Box-sizing border-box là gì

*
mày mò box-sizing 104">

Vậy thì trường hợp bây giờ bạn muốn làm cho phần tử của bản thân phải giữ nguyên kích thước tuy nhiên có thêm vào đó padding và border thì sẽ rất cần phải dùng đến thuộc tính box-sizing. Box-sizing là 1 thuộc tính sẽ giúp chúng ta cũng có thể tính toán và thống trị được kích thước của một trong những phần tử phụ thuộc vào thuộc tính width với height vẫn được tùy chỉnh cấu hình bên trong. Hay nói phương pháp khác, là các bạn sẽ muốn thuộc tínhwidth cùng height là kích cỡ đã bao gồm border và padding.

Lưu ý về phong thái viết

box-sizing là một nằm trong tính vào CSS3 nên khi viết bạn phải viết thành 3 lần với những tiền tố không giống nhau, ví dụ:

box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;

Trong đó, giả dụ viết không tồn tại tiền tố là dành riêng cho trình chăm nom IE8, Opera 7, Firefox cùng Google chrome phiên bản mới. -webkit là dành cho Google Chrome bản cũ với -moz là dành cho Firefox bạn dạng cũ.

Các quý giá của box-sizing

Hiện trên box-sizing có cung ứng một số quý giá như sau:

content-box: giá trị mặc định, nghĩa là giá trị width với height chỉ áp dụng cho khu vực nội dung mặt trong, không bao hàm padding, border cùng margin.border-box: Khi thiết lập giá trị này, thì width cùng heigh sẽ bao gồm cho cả phần nội dung, padding và border nhưng không bao gồm margin.padding-box: với giá trị này thì width với height chỉ bao hàm cho phần câu chữ và padding, không bao gồm border cùng margin.

Lưu ý: padding-box chỉ có công dụng với trình để mắt tới Firefox.

Như vậy với tía giá trị này, mình khuyến khích các bạn chỉ nên thực hiện giá trị border-box vì nó khôn xiết đầy đủ, dễ đo lường cho website.

Nên sử dụng box-sizing cho toàn thể phần tử

Theo tởm nghiệm của mình thì lúc viết CSS mang lại website, chúng ta hãy thực hiện box-sizing với giá trị là border-box cho toàn thể các phần tử trong website để các phần tử có kích thước đúng mực khi các bạn khai báo, tránh việc cộng thêm những phần border và padding sẽ gây nên rắc rối nếu như khách hàng dùng hai cái này thường xuyên.

Để tùy chỉnh cấu hình box-sizing: content-box cho toàn thể phần tử, bọn họ sẽ áp dụng vùng lựa chọn là *, nghĩa là bao hàm mọi phần tử.

Xem thêm: Call Off Nghĩa Là Gì ? Giải Thích Nghĩa Từ, Ví Dụ Call Off Là Gì

* box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

Lời kết

Mặc dù box-sizing hoàn toàn có thể là không đặc trưng đến nấc bắt buộc áp dụng nhưng rất có thể nó để giúp đỡ bạn câu trả lời về thắc mắc là tại sao tùy chỉnh cấu hình kích thước cho bộ phận là như vậy mà thêm padding, border vào này lại hiển thị theo với size khác. Cùng trên một số trong những trường hợp, nó để giúp bạn dễ dàng dàng thống trị kích thước các thành phần nhờ vào việc thiết lập lại giá trị box-sizing như mình đã đề cập sinh sống trên.