Bài đăng nổi bật


Sử dụng width, max-width và margin: auto;

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

CodeLean.vn
Facebook: CodeLean Community

Post a Comment

أحدث أقدم