Ví Dụ Về Thuộc Tính Box

     

Khi các bạn học qua Box model trong CSS thì đã thấy gồm một đặc điểm khi sử dụng Padding và Border thì dòng khung bộ phận của các bạn sẽ bị đổi khác kích thước nếu như bạn có đặt thêm ở trong tính width và height để thiết lập kích thước cho nó. Ví dụ mẫu box của doanh nghiệp 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ì chiếc khung của các bạn sẽ có form size là 530×530 px. Chính vì nếu thêm vào đó pading là 15px nữa thì dòng khung của chúng ta sẽ auto cộng thêm 30px (15px mang lại top và và 15px mang lại bottom, tương tự với left với right), tựa như vớiborder.Bạn đang xem: Box-sizing border-box là gì


*

tò mò box-sizing 104">

Vậy thì nếu như bây giờ bạn muốn làm cho phần tử của bản thân phải không thay đổi kích thước mặc dù có thêm vào đó padding và border thì sẽ rất cần phải dùng mang lại thuộc tính box-sizing. Box-sizing là một thuộc tính vẫn giúp chúng ta có thể tính toán và thống trị được form size của một trong những phần tử nhờ vào thuộc tính width và height vẫn được tùy chỉnh cấu hình bên trong. Tuyệt nói bí quyết khác, là các bạn sẽ muốn trực thuộc tínhwidth cùng height là kích cỡ đã bao gồm border với padding.Bạn đang xem: Box-sizing border-box là gì

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

box-sizing là một thuộc tính trong CSS3 nên những lúc 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 đó, trường hợp viết không có tiền tố là giành cho trình cẩn thận IE8, Opera 7, Firefox với Google chrome phiên bản mới. -webkit là dành riêng cho Google Chrome phiên bản cũ cùng -moz là dành riêng cho Firefox bạn dạng cũ.

Bạn đang xem: Ví dụ về thuộc tính box

Các quý hiếm của box-sizing

Hiện tại box-sizing có cung cấp một số quý giá như sau:

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

Nên áp dụng box-sizing cho toàn cục phần tử

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

Xem thêm: Những Lời Chúc Sinh Nhật Con Bạn Thân Hay Và Ý Nghĩa, Lời Chúc Mừng Sinh Nhật Bạn Thân Hay Nhất

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

Xem thêm: Mượn Tiếng Anh Là Gì ? Từ Mượn Tiếng Anh Là Gì

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

Lời kết

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