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