Ví Dụ Về Thuộc Tính Box-sizing - Học Web Chuẩn

Trang chủ » Box Sizing Border Box Là Gì » 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 Border Box Là Gì