[Tips] Hướng dẫn dùng box-sizing trong CSS

Nếu bạn thường sử dụng các thuộc tính paddinng + border khi đang "phù phép" cho các phần tử trong website như các input, textarea hoặc thậm chí các thẻ div bình thường rồi bạn không thấy được kích thước như mong muốn, có thể lúc đó bạn sẽ cảm thấy vô cùng phẫn nộ và chỉ muốn đập tan cái bàn phím của mình nhưng rồi cũng bình tĩnh lại, uống 1 ngụm nước lọc và ngồi tính toán trừ trừ cộng cộng các giá trị với ước mơ sẽ được nhìn thấy một phần tử với kích thước hoàn hảo như lúc còn làm trong Photoshop. Chẳng hạn như bạn muốn 1 cái thẻ div với kích thước là 150x150 px và có viền là 2px solid màu hồng thêm padding 10px để đặt cái ảnh của gấu xong cho lên web để khoe thì đây có lẽ là điều bạn đang suy nghĩ trong đầu...


Code xong xuôi bạn xem kết quá thì tí ngất vì quá sốc... thế đíu nào nó lại thành ra...



box-sizing cho phép bạn xác định một số thuộc tính để nó trở nên phù hợp với một với một phần tử với kích thước đã được định sẵn.

bây giờ đem đi sử dụng với ví dụ trên, bạn sẽ có một kết quả hoàn toàn giống y như lúc bạn thiết kế

Code:

.avatar-cho-gau {

 background: #2e2e2e;
 width: 150px;
 height: 150px;
 border: 2px solid pink;
 padding: 10px;
 box-sizing: border-box;
 -moz-box-sizing:border-box; /* Firefox */

}

DEMO online: http://css-tricks.com/examples/BoxSizing/

Cú pháp:

Code:

box-sizing: content-box|border-box|inherit;

content-box: điều chỉnh các thuộc tính liên quan đến nội dung bên trong (padding) thẻ

border-box: điều chỉnh các thuộc tính liên quan đến nội dung bên trong (padding) và đường viên (border) của thẻ

inherit: lấy giá trị từ thẻ có chứa nó (parent)

Các trình duyệt hỗ trợ

Chrome (mọi pb): box-sizing

Opera 8.5 trở lên: box-sizing

Firefox (mọi pb): -moz-box-sizing

Safari 3 đến 5: -webkit-box-sizing

Safari 5.1 trở lên: box-sizing

IE8 trở lên: box-sizing

Chúc các bạn thành công!

Vậy mà trước giờ em cứ nghĩ là không cần width và height; đặt size cho ảnh rồi dùng padding, border là được chứ

VectorY wrote:Vậy mà trước giờ em cứ nghĩ là không cần width và height; đặt size cho ảnh rồi dùng padding, border là được chứ

nếu dùng thẻ div mà ko thêm width thì đợi đấy nó resize theo ảnh cho chú. Cái này a chỉ ví dụ thôi, còn dùng cho các thẻ khác nữa cơ mà

Bài này chưa được chi tiết lắm, chưa nói đến cách tính width, height khi áp dụng từng kiểu box-sizing, và vấn đề trình duyệt của padding-box.

DEVs đang dùng box-sizing kiểu border-box cho tất cả các thành phần, nó giúp việc căn chỉnh kích thước dễ dàng hơn, ví dụ như thiết lập width 100%.

Code:

*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

Khi bạn áp dụng nó lần đầu thì hơi vất vả chút, do các khung sẽ bị lệch, thu hẹp. Bạn chịu khó chỉnh sửa lại một chút là ổn, so với lợi ích mang lại thì cũng xứng đáng.

Ps: Class đặt sai thì phải .avatar-gau-cho mới đúng :3

Cảm ơn huynh, đệ sẽ bổ sung chi tiết hơn
P/s: tên class đúng đấy, chẳng qua huynh dịch sai thôi :v