CSS3: box-sizing
Giải phóng thời gian, khai phóng năng lực
Thuộc tính box-sizing dùng để quy định kích thước của khối là gồm những phần nào. Có hai thành phần tham gia vào kích thước trong một khối là thành phần nội dung và thành phần đường viền. Có hai lựa chọn là border-box và content-box, trong đó content-box là lựa chọn khi bạn muốn quy định kích thước của khối là kích thước của nội dung chứa trong khối, còn border-box được sử dụng khi bạn muốn quy định kích thước khối bao gồm cả phần nội dung và phần đường viền.
Ví dụ sau đây demo việc sử dụng content-box, bạn sẽ thấy khối Right bị đẩy xuống dưới vì không đủ chỗ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
aside{
border:green thin solid;
width:20%;
min-height:200px;
float:left;
box-sizing:content-box;
text-align:center;
}
article{
border:green thin solid;
width:60%;
min-height:200px;
float:left;
box-sizing:content-box;
text-align:center;
}
</style>
</head>
<body>
<aside>Left</aside>
<article>Body</article>
<aside>Right</aside>
</body>
</html>
Ví dụ sau đây demo việc sử dụng content-box, khối Right không còn bị đẩy xuống dưới nữa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
aside{
border:green thin solid;
width:20%;
min-height:200px;
float:left;
box-sizing:border-box;
text-align:center;
}
article{
border:green thin solid;
width:60%;
min-height:200px;
float:left;
box-sizing:border-box;
text-align:center;
}
</style>
</head>
<body>
<aside>Left</aside>
<article>Body</article>
<aside>Right</aside>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực