[Tips] Hướng Dẫn Dùng Box-sizing Trong CSS - DEVs Forumvi

• Trang chủ
• Thành viên
• Hội nhóm
• Mục khác
  • Tìm kiếm
  • Lịch
  • FAQ

• Đăng nhập
• Đăng ký
• Chọn màu

• DEVs forumvi
• Code
• Tips

[Tips] Hướng dẫn dùng box-sizing trong CSS 29.11.13 15:42 Bài viết hay nhất1Juskteez Bài viết : 18Tài sản : 1089Uy tín : 30Nế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-sizingOpera 8.5 trở lên: box-sizingFirefox (mọi pb): -moz-box-sizingSafari 3 đến 5: -webkit-box-sizingSafari 5.1 trở lên: box-sizingIE8 trở lên: box-sizing

Chúc các bạn thành công!Juskteez+1Cảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa 29.11.13 16:05 Bài viết hay nhất2KirigayaKazuto Bài viết : 514Tài sản : 927Uy tín : 808Cái demo của anh...+1Cảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa Bài viết hay nhất3Sponsored content Cảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa 29.11.13 17:22 Bài viết hay nhất4NCat Bài viết : 618Tài sản : 3129Uy tín : 779Vậ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ứ Cảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa 29.11.13 19:32 Bài viết hay nhất5Juskteez Bài viết : 18Tài sản : 1089Uy tín : 30

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à+1Cảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa 29.11.13 20:40 Bài viết hay nhất6lelinhtinh Bài viết : 1499Tài sản : 9066Uy tín : 3601Bà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+1Cảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa 29.11.13 21:26 Bài viết hay nhất7Juskteez Bài viết : 18Tài sản : 1089Uy tín : 30Cảm ơn huynh, đệ sẽ bổ sung chi tiết hơnP/s: tên class đúng đấy, chẳng qua huynh dịch sai thôi :vCảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa Bài viết hay nhất8Sponsored content Cảm ơn Thêm đoạn trích Trích dẫn Sửa Xóa Bài trướcBài sau You cannot reply to topics in this forum

Similar topics

» [Tips] Huớng dẫn sử dụng Font Awesome» [Tips] Nguyên tắc phối màu và ứng dụng trong thiết kế website» [Tips] Sử dụng hiệu quả thuộc tính transition trong CSS» [Tips] Bắt người dùng sử dụng javascript» [Tip] Một số cách dùng ajax trong forumotion