Bố cục trong CSS - width và max-width - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Bố cục trong CSS – width và max-width

Cách sử dụng width, max-width và margin: auto;

Như bạn đã biết, một phần tử block-level  luôn chiếm toàn bộ chiều rộng cho phép (trải từ trái sang phải). Thiết lập thuộc tính width cho phần tử block-level sẽ ngăn không cho phần tử trải toàn bộ chiều rộng. Phần tử đó sẽ chiếm chiều rộng mà bạn thiết lập, khoảng trống còn lại sẽ được chia đều giữa hai lề.

Lưu ý: vấn đề với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn độ 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 đó sử dụng chiều rộng tối đa, trong trường hợp này sẽ cải thiện việc xử lý các trình duyệt của các cửa sổ nhỏ. Đ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ỏ:

Mẹo: thay đổi kích thước cửa sổ trình duyệt xuống dưới 500px, để thấy sự khác biệt giữa hai div!

Đây là một ví dụ của 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;
}