Ví Dụ Về Thuộc Tính Box-sizing - Học Web Chuẩn
Có thể bạn quan tâm
Ví dụ về thuộc tính box-sizing
- Trang chủ
- Tham khảo
- CSS
- CSS3
- Ví dụ về thuộc tính box-sizing
Thuộc tính box-sizing
Thuộc tính box-sizing: Xác định lại chiều rộng và chiều cao cho thành phần.
HTML viết:
<html> <head></head> <body> <p class="normal">Không sử dụng box-sizing</p> <p class="contentBox">box-sizing: content-box</p> <p class="borderBox">box-sizing: border-box</p> </body> </html>CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 200px; }Hiển thị trình duyệt khi chưa có box-sizing:
Không sử dụng box-sizing
box-sizing: content-box
box-sizing: border-box
Thêm thuộc tính box-sizing, CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 200px; } p.contentBox { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } p.borderBox { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }Hiển thị trình duyệt khi có box-sizing:
Không sử dụng box-sizing
box-sizing: content-box
box-sizing: border-box
Ta thấy với giá trị border-box, chiều rộng và chiều cao hiện tại của thành phần đã bao gồm luôn phần border.
box
box-shadow
Ví dụ thuộc tính box-sizing
- box-sizing
Từ khóa » Box-sizing Css Là Gì
-
[Học CSS] Tìm Hiểu Box-sizing - Thạch Phạm
-
Box Sizing Trong Css Là Gì? Hướng Dẫn Sử Dụng 2 Value đơn Giản
-
Cách Sử Dụng Thuộc Tính Box-sizing Trong CSS - Web Cơ Bản
-
CSS Box Model Và Box-sizing: Border-box Là Gì Vậy? - Viblo
-
Hướng Dẫn Và Ví Dụ CSS Box-sizing - Openplanning
-
Box-Sizing Border-Box Là Gì - Re:Monster
-
Thuộc Tính Box Sizing Trong CSS3
-
W3seo Sử Dụng Thuộc Tính Box-sizing Trong CSS
-
Thuộc Tính Box-sizing Trong CSS - Quách Quỳnh
-
Thuộc Tính Box-sizing - Hoclaptrinh
-
Tìm Hiểu Về Box-sizing Là Gì ? Tác Dụng Của Box-sizing Trong CSS3
-
Box Sizing Border Box Là Gì
-
Box Sizing Là Gì - TTMN