CSS Max-width

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    261 lượt xem


Sử dụng kết hợp thuộc tính max-width và display trong CSS để tạo ra một element có thể tự động thay đổi kích thước theo kích thước trình duyệt.

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

Đặt width của element block sẽ ngăn nó kéo dài ra các cạnh của container. Sau đó, bạn có thể đặt margin thành auto, để căn giữa theo chiều ngang element trong container chứa của nó. Element sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được phân tách bằng nhau giữa hai lề:

element <div> có width là 500px và margin được đặt auto

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 element. Sau đó, trình duyệt sẽ thêm một thanh cuộn ngang vào trang.

Thay vào đó, 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 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ỏ:

element <div> có max-width là 500px và margin được đặt auto

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!

div.ex1 {    width: 500px;    margin: auto;    border: 3px solid #73AD21;  }    div.ex2 {    max-width: 500px;    margin: auto;    border: 3px solid #73AD21;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.