Tìm hiểu cách thiết lập chiều rộng, chiều cao của box CSS
Trong CSS có các thuộc tính như width, height cũng như min-width, min-height, những thuộc tính này sẽ giúp chúng ta thiết lập chiều rộng, chiều cao của box.
Để thiết lập chiều rộng và chiều cao phần nội dung phần tử dùng thuộc tính
Xem lại phần về BOX CSS để biết xác định chiều cao, chiều rộng thực tế của box khi vẽ trong HTML.
Đơn vị phần trăm rộng, cao
Thuộc tính
Khi thiết lập
Chiều rộng, chiều cao lớn nhất nhỏ nhất
Thiết lập chiều rộng và cao lớn nhất và nhỏ nhất của phần tử (tức là phần tử tự co giãn theo nội dung trong kích thước lớn nhất và nhỏ nhất).
Chúc các bạn thành công.
Trong CSS có các thuộc tính như width, height cũng như min-width, min-height, những thuộc tính này sẽ giúp chúng ta thiết lập chiều rộng, chiều cao của box.
Để thiết lập chiều rộng và chiều cao phần nội dung phần tử dùng thuộc tính
width
và height
chỉ ra giá trị rộng, cao theo đơn vị px, em ...
Mã:
<style>
div.exam1 {
border: 5px solid green;
width: 190px;
height: 90px;
}
</style>
<div class="exam1">
Phần tử này có tổng chiều cao la
100px và tổng chiều rộng là 200.
</div>
Ở ví dụ trên, tổng chiều cao là 90px + 5px (viền) + 5px (viền) = 100px
Đơn vị phần trăm rộng, cao
Thuộc tính
width
và height
có thể được thiết lập bằng đơn vị phần trăm. Ví dụ sau, chiều rộng theo phần trăm, chiều cao lại theo px
Mã:
<style>
div.measure {
border: 5px solid green;
width: 100%;
height: 90px;
}
</style>
<div class="measure">
Tổng chiều rộng là <strong>100%</strong>
và chiều cao là <strong>100px</strong> .
</div>
width
là 100%, kích thước box sẽ tự thay đổi để vừa khít với phần tử chứa nó.Chiều rộng, chiều cao lớn nhất nhỏ nhất
Thiết lập chiều rộng và cao lớn nhất và nhỏ nhất của phần tử (tức là phần tử tự co giãn theo nội dung trong kích thước lớn nhất và nhỏ nhất).
- min-width - độ rộng nhỏ nhất
- min-height - chiều cao nhỏ
- max-width - độ rộng lớn nhất
- max-height - chiều cao lớn nhất
Mã:
<style>
p.first {
border: 5px solid green;
min-height: 100px;
}
p.second {
border: 5px solid green;
max-width: 100px;
}
</style>
<p class="first">The <strong>minimum height </strong>
of this paragraph is set to 100px.</p>
<p class="second">The<strong> maximum width </strong>
of this paragraph is set to 100px.</p>
Nguồn: Internet
Bài viết liên quan
Bài viết mới