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 trong chương trước; một phần tử cấp khối luôn chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể).
Đặt widthphần tử cấp khối sẽ ngăn nó kéo dài ra các cạnh của vùng chứa. 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à không gian còn lại sẽ được chia đều giữa hai lề:
Lưu ý: Sự cố với điều <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ử. Sau đó, trình duyệt sẽ thêm một thanh cuộn ngang vào trang.
Thay vào đó, trong tình huống này, việc sử dụng max-widthsẽ 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 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, để xem sự khác biệt giữa hai div!
Đây là một ví dụ về hai div ở trên:
Thí dụ
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}