Thuộc tính box sizing trong CSS3 Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử.. Bắt đầu từ CSS2, thuộc tính box làm việc như sau: width + padding + bor
Trang 1Thuộc tính box sizing trong CSS3
Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử
Bắt đầu từ CSS2, thuộc tính box làm việc như sau:
width + padding + border = chiều rộng thực sự của một phần tử box
height + padding + border = chiều cao thực sự của một phần tử box
Nghĩa là, khi bạn đã xác định chiều cao và chiều rộng, thì kích cỡ của box sẽ lớn hơn một
chút do phải cộng thêm padding và border vào chiều cao và độ rộng bạn đã thiết lập
Thuộc tính sizing trong CSS2
Ví dụ sau minh họa cách sử dụng của thuộc tính sizing trong CSS2:
<html> <head> <style> div1 { width : 200px ; height : 100px ; border : 1px solid green ; } div2 { width : 200px ; height : 100px ; padding : 50px ;
border : 1px solid pink ; } </style> </head> <body>
<div class = "div1" > Hoc CSS co ban tai VietJack </div></br> <div
class = "div2" > Hoc CSS co ban tai VietJack </div> </body> </html>
Kết quả là
Trong ví dụ trên, mình thiết lập chiều cao và chiều rộng cho hai hình ảnh là như nhau, tuy
nhiên bạn có thể thấy rằng kết quả hiển thị là khác nhau, đó là do trong hình thứ hai mình
thêm thuộc tính padding
Thuộc tính box sizing trong CSS3
Ví dụ dưới đây minh họa cách sử dụng của thuộc tính box-sizing trong CSS3:
<html> <head> <style> div1 { width : 300px ; height : 100px ; border : 1px solid blue ; box - sizing :
border - box ; } div2 { width : 300px ;
height : 100px ; padding : 50px ; border : 1px solid red ; box - sizing : border - box ; } </style> </head> <body>
<div class = "div1" > Hoc CSS co ban tai VietJack </div></br> <div
class = "div2" > Hoc CSS co ban tai VietJack </div> </body> </html>
Trong ví dụ trên, bạn để ý rằng cả hai hình ảnh đều có cùng chiều cao và chiều rộng và
cùng thuộc tính box-sizing:border-box
Trang 2Kết quả là:
Mặc dù trong hình ảnh thứ hai, mình xác định thêm thuộc tính padding, tuy nhiên bằng việc
sử dụng cùng thuộc tính box-sizing:border-box, thì chiều cao và chiều rộng của hai hình vẫn là như nhau