CSS3 - Kích thước hộp
Thuộc tính kích thước hộp đang sử dụng để thay đổi chiều cao và chiều rộng của phần tử.
Kể từ css2, thuộc tính box đã hoạt động như hình dưới đây:
width + padding + border = chiều rộng hiển thị / hiển thị thực tế của hộp phần tử
height + padding + border = chiều cao hiển thị / hiển thị thực tế của hộp phần tử
Có nghĩa là khi bạn đặt chiều cao và chiều rộng, nó xuất hiện lớn hơn một chút sau đó kích thước đã cho khiến phần tử boarder và padding được thêm vào chiều cao và chiều rộng của phần tử.
Thuộc tính định cỡ 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">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Hình ảnh trên có cùng chiều rộng và chiều cao của hai phần tử nhưng cho kết quả khác nhau, vì phần tử thứ hai được bao gồm thuộc tính padding.
Thuộc tính định cỡ hộp 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">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Mẫu trên có cùng chiều cao và chiều rộng với box-sizing:border-box. ở đây kết quả được hiển thị bên dưới.
Nó sẽ tạo ra kết quả sau:
Các phần tử trên có cùng chiều cao và chiều rộng với box-sizing: border-box, do đó kết quả luôn giống nhau cho cả hai phần tử như được hiển thị ở trên.