Bố cục CSS - chiều rộng và chiều rộng tối đa
Sử dụng chiều rộng, chiều rộng tối đa và lề: auto;
Như đã đề cập ở chương trước; phần tử cấp khối luôn chiếm toàn bộ chiều rộng có sẵn (kéo dài sang trái và phải hết mức có thể).
Việc đặt width
của phần tử cấp khối sẽ ngăn phần tử đó kéo dài ra các cạnh của vùng chứa nó. Sau đó, bạn có thể đặt lề thành tự động, để căn giữa phần tử theo chiều ngang trong vùng chứa của nó. Phần tử sẽ chiếm chiều rộng được chỉ định và khoảng trống còn lại sẽ được chia đều cho hai lề:
Lưu ý: Sự cố với <div>
ở 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ử. Trình duyệt sau đó thêm một thanh cuộn ngang vào trang.
Thay vào đó, việc sử dụng max-width
trong trường hợp này sẽ cải thiện khả năng xử lý các cửa sổ nhỏ của trình duyệt. Điều này rất quan trọng khi làm cho một trang web có thể sử dụng được trên các thiết bị nhỏ:
Mẹo: Thay đổi kích thước cửa sổ trình duyệt rộng dưới 500px để thấy sự khác biệt giữa hai div!
Đây là một ví dụ về hai div trên:
Ví dụ
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
Hãy tự mình thử »