BOX-SIZING LÀ GÌ

      19

lúc các bạn học tập qua Box Model vào CSS thì vẫn thấy bao gồm một điểm sáng lúc thực hiện Padding và Border thì mẫu size phần tử của các bạn sẽ bị chuyển đổi kích cỡ nếu bạn có đặt thêm ở trong tính width và height để cấu hình thiết lập kích cỡ cho nó. Ví dụ loại box của doanh nghiệp tất cả width là 500px với height là 500px (500×500 px)nhưng nếu khách hàng đặt thêm padding là 15px nữa thì mẫu form của bạn sẽ tất cả kích cỡ là 530×530 px. Bởi bởi vì giả dụ cộng thêm pading là 15px nữa thì dòng size của các bạn sẽ tự động hóa thêm vào đó 30px (15px đến top với và 15px mang lại bottom, tương tự như với left cùng right), tương tự vớiborder.

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

*
Tìm gọi box-sizing 104">

Vậy thì trường hợp hiện nay bạn muốn tạo cho bộ phận của bản thân nên giữ nguyên form size mặc dù tất cả thêm vào đó padding cùng border thì đang cần phải dùng mang đến thuộc tính box-sizing. box-sizing là một thuộc tính để giúp chúng ta có thể tính toán thù cùng làm chủ được form size của một trong những phần tử dựa vào nằm trong tính width cùng height đã làm được thiết lập cấu hình phía bên trong. Hay nói cách khác, là bạn sẽ mong mỏi ở trong tínhwidth cùng height là form size vẫn bao hàm border và padding.

Lưu ý về cách viết

box-sizing là 1 trong những thuộc tính vào CSS3 nên khi viết chúng ta đề xuất viết thành 3 lần với các chi phí tố không giống nhau, ví dụ:

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

Trong số đó, nếu như viết không tồn tại tiền tố là giành riêng cho trình coi ngó IE8, Opera 7, Firefox cùng Google chrome phiên bản new. -webkit là giành riêng cho Google Chrome bạn dạng cũ cùng -moz là giành cho Firefox phiên bản cũ.

Các cực hiếm của box-sizing

Bây Giờ box-sizing có hỗ trợ một số trong những cực hiếm nlỗi sau:

content-box: Giá trị mang định, nghĩa là quý hiếm width với height chỉ áp dụng mang lại khoanh vùng văn bản bên trong, không bao gồm padding, border cùng margin.border-box: khi tùy chỉnh cực hiếm này, thì width với heigh vẫn bao hàm cho tất cả phần nội dung, padding cùng border nhưng ko bao hàm margin.padding-box: Với giá trị này thì width với height chỉ bao gồm cho phần văn bản và padding, không bao hàm border với margin.

Lưu ý: padding-box chỉ tất cả tác dụng cùng với trình duyệt y Firefox.

Xem thêm: Realtek Ethernet Network Driver Mạng Lan Win 7 32Bit, Intel Ethernet Network Driver

bởi thế cùng với bố cực hiếm này, bản thân khuyến nghị chúng ta chỉ yêu cầu áp dụng giá bán trị border-box vày nó rất đầy đủ, dễ tính toán thù mang đến website.

Nên áp dụng box-sizing cho tổng thể phần tử

Theo kinh nghiệm tay nghề của bản thân thì lúc viết CSS mang đến trang web, bạn hãy áp dụng box-sizing với giá trị là border-box cho cục bộ những phần tử vào trang web nhằm các thành phần có kích cỡ đúng đắn khi chúng ta knhị báo, rời việc thêm vào đó những phần border với padding đang gây ra rắc rối nếu như khách hàng cần sử dụng nhị điều này liên tục.

Để thiết lập box-sizing: content-box đến toàn cục phần tử, họ đã sử dụng vùng lựa chọn là *, tức thị bao hàm phần đa phần tử.

* 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 biệt đến cả buộc phải thực hiện tuy nhiên có thể nó sẽ giúp bạn lời giải về vướng mắc là tại vì sao tùy chỉnh kích cỡ cho phần tử là điều đó mà lại thêm padding, border vào nó lại hiển thị theo với size khác. Và bên trên một số ngôi trường đúng theo, nó sẽ giúp bạn dễ dàng cai quản kích cỡ những thành phần phụ thuộc câu hỏi thiết lập cấu hình lại quý giá box-sizing nlỗi tôi đã nói sinh sống bên trên.