Leaderboard ads banner

CSS Max-Width

Như chúng ta đã biết, một phần tử khối luôn chiếm toàn bộ chiều rộng có sẵn (kéo dài sang và phải, càng xa càng tốt).

Việc đặt thành phần cấp khối sẽ ngăn không cho nó kéo dài ra các cạnh của vùng chứa. Sau đó, bạn có thể canh lề tự động, xoay ngang phần tử trong vùng chứa của nó theo chiều ngang. Phần tử sẽ chiếm chiều rộng được chỉ định và các khoảng trống còn lại sẽ được chia đều cho hai lề.

Ví dụ :

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
    width:500px;
    margin: auto;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>
     <div class="ex1">This div element has width: 500px;</div>
</body>
</html>

Lưu ý :Sự cố <div>xảy ra ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử. Khi đó trình duyệt tự động thêm thanh cuộn ngang vào trang.

Trong tình huống này ta sử dụng thuộc tính max-width , sẽ cải thiện xử lý của trình duyệt cho cửa sổ nhỏ. Điều này rất quan trọng khi tạo trang web có thể sử dụng trên các thiết bị nhỏ:

Ví dụ :

<!DOCTYPE html>
<html>
<head>
<style>
div.ex2 {
    max-width:500px;
    margin: auto;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>
    <div class="ex2">This div element has max-width: 500px;</div>
</body>
</html>

Mẹo: Thay đổi kích thước cửa sổ trình duyệt thành nhỏ hơn 500px để xem sự khác biệt giữa hai div !

Thật dễ hiểu phải không nào, cái này rất quan trọng để sau này ta có thể áp dụng vào Responsive cho Website nên các bạn bạn cần phải nhắm chắc và hiểu rõ bản chất của thuộc tính này...

Để học tốt thì chúng ta phải kết hợp giữa việc học đi đôi với hành, hãy cùng nhau làm những bài tập thực hành đơn giản theo đường dẫn bên dưới nhé. Nó sẽ giúp chúng ta học tập tốt hơn nhiều đó.

https://www.codehub.vn/Hoc-CSS/CSS-Max-Width/challenges

Nội dung không được để trống

Hướng Dẫn Liên Quan