Thiết lập kích thước cho phần tử HTML bằng CSS
Thiết lập chiều rộng và chiều cao Thuộc tính awidth dùng để thiết lập chiều rộng cho phần nội dung của phần tử. Thuộc tính height dùng để thiết lập chiều cao cho phần nội dung của phần tử. Lưu ý: Chiều rộng và chiều cao không bao gồm phần padding, border, margin. Hình ...
Thiết lập chiều rộng và chiều cao
Thuộc tính awidth dùng để thiết lập chiều rộng cho phần nội dung của phần tử.
Thuộc tính height dùng để thiết lập chiều cao cho phần nội dung của phần tử.
Lưu ý: Chiều rộng và chiều cao không bao gồm phần padding, border, margin.
Hình ảnh minh họa dưới đây sẽ cho bạn thấy rõ phần nào là chiều rộng, phần nào là chiều cao:
Giá trị của thuộc tính awidth và height có thể xác định theo đơn vị: px, em, % (phần trăm kích thước phần nội dung của phần tử chứa nó)
.div1{
border: 10px solid black;
awidth: 300px;
}
.div2{
border: 10px solid red;
awidth: 300px;
padding: 30px;
margin: 20px;
}
.div3{
border: 1px solid blue;
awidth: 50%;
height:100px;
}
Lưu ý: Nếu ta không thiết lập chiều rộng và chiều cao cho phần tử thì trình duyệt sẽ tự động thiết lập (Nếu là phần tử khối thì nó sẽ có chiều rộng là 100%).
Thuộc tính max-awidth
Nếu ta thiết lập chiều rộng cho một phần tử quá dài mà trong khi phần tử chứa nó lại quá ngắn thì sẽ dẫn đến việc phần tử chứa nó tự động tạo một thanh scroll nằm ngang mất thẫm mỹ (Xem ví dụ)
Từ đây, thuộc tính max-awidth được dùng để thiết lập chiều rộng cho phần tử kèm theo tính năng tự động thu hẹp chiều rộng nếu phần tử chứa nó quá ngắn.
Ví dụ, tôi có phần tử div1 thiết lập awidth:800px và phần tử div2 thiết lập max-awidth:800px
- Nếu phần tử chứa phần tử div1 quá ngắn so với 800px thì phần tử chứa phần tử div1 sẽ tạo một thanh scroll nằm ngang.
- Nếu phần tử chứa phần tử div2 quá ngắn so với 800px thì chiều rộng của phần tử div2 sẽ tự động rút ngắn lại sao cho nằm trọn bên trong phần tử chứa nó.
<html>
<head>
<style type="text/css">
.div1{
border:3px solid green;
awidth:800px;
}
.div2{
border:3px solid blue;
max-awidth:800px;
}
</style>
</head>
<body>
<div class="div1">awidth:800px</div>
<div class="div2">max-awidth:800px</div>
</body>
</html>
Giá trị của thuộc tính max-awidth có thể xác định theo đơn vị: px, em, %, hoặc none (none tức là không thiết lập chiều rộng tối đa).
Lưu ý: Thuộc tính max-awidth sẽ ghi đè lên thuộc tính awidth.
Thuộc tính max-height
Thông thường, khi ta thiết lập chiều cao cho một phần tử, mặc cho phần nội dung của nó dài hay ngắn thì chiều cao của phần tử vẫn luôn không thay đổi (Xem ví dụ)
Từ đây, thuộc tính max-height dùng để thiết lập chiều cao cho phần tử kèm theo tính năng tự động rút thấp lại hoặc kéo cao ra phụ thuộc vào nội dung của phần tử (nhưng đương nhiên chiều cao của phần tử sẽ không vượt quá giá trị được thiết lập).
.div1{
height:150px;
}
.div2{
max-height:150px;
}
Thuộc tính min-awidth
Thuộc tính min-awidth dùng để thiết lập chiều rộng cho phần tử tương tự như thuộc tính awidth, nó cũng sẽ tạo ra một thanh scroll nằm ngang nếu chiều rộng của phần tử chứa nó quá hẹp so với chiều rộng của nó.
Tuy nhiên, điểm khác nhau giữa hai thuộc tính này là:
- Phần tử được thiết lập bởi thuộc tính awidth sẽ có chiều rộng mặc định
- Phần tử được thiết lập bởi thuộc tính min-awidth sẽ có chiều rộng tối đa khi chiều rộng của phần tử chứa nó rộng hơn nó. Và chiều rộng của phần tử này sẽ thu hẹp lại bằng với giá trị được thiết lập khi chiều rộng của phần tử chứa nó trở nên hẹp hơn nó.
<html>
<head>
<style type="text/css">
.div1{
border:3px solid green;
awidth: 500px;
}
.div2{
border:3px solid blue;
min-awidth: 500px;
}
</style>
</head>
<body>
<div class="div1">awidth: 500px</div>
<div class="div2">min-awidth: 500px</div>
</body>
</html>
Thuộc tính min-height
Thuộc tính min-height dùng để thiết lập chiều cao tối thiếu cho một phần tử. Nếu nội dung có phần tử đó quá cao thì chiều cao của phần tử sẽ tự động được tăng lên.
div {
min-height:100px;
}
Thuộc tính overflow
Thông thường, nếu kích thước phần nội dung của phần tử lớn hơn chiều rộng hoặc chiều cao của phần tử, thì nội dung đó sẽ bị tràn ra bên ngoài (Xem ví dụ)
Để khắc phục tình trạng này, ta có thể sử dụng thuộc tính overflow với giá trị auto (tự tạo thanh scroll cho phần tử đó) hoặc giá trị hidden (ẩn phần bị tràn)
.div1{
font-size:80px;
border: 1px solid black;
background-color: yellow;
awidth: 200px;
height: 200px;
overflow: auto;
}
.div2{
font-size:80px;
border: 1px solid black;
background-color: yellow;
awidth: 200px;
height: 200px;
overflow: hidden;
}
