để setup chiều rộng của 1 block element
1. sử dụng width
nhược điểm: khi width của cửa sổ (viewport) nhỏ hơn độ width của element => browser sẽ add thêm horizontal scrollbar (thanh cuộn ngang)
2. sử dụng max-width
khi width của cửa sổ nhỏ hơn max-width của element
=> chiều rộng của element sẽ tự động nhỏ đi
=> đáp ứng yêu cầu responsive webpage
PS: lý tưởng
khi sử dụng max-width và margin:auto (căn element giua trang web)
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width:500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>
No comments:
Post a Comment