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

  Bài viết hay nhất1
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...


Đừng lo! Đã có box-sizing!

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!
  Bài viết hay nhất2
Cái demo của anh...
  Bài viết hay nhất3
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ứ
  Bài viết hay nhất4
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 viết hay nhất5
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
  Bài viết hay nhất6
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
You cannot reply to topics in this forum