Lập trình CSS - Chiều rộng và max-width

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

Như đã nêu trong chương trước, các yếu tố block luôn chiếm toàn bộ độ rộng khả dụng (nếu có thể thì mở rộng sang trái và phải).

Đặt độ rộng cho yếu tố width Sẽ ngăn chặn việc nó延伸 đến cạnh của容器的边框。Sau đó, bạn có thể đặt viền ngoài là auto để đưa yếu tố vào giữa container của nó. Yếu tố sẽ chiếm độ rộng được chỉ định, không gian còn lại sẽ được phân phối đều giữa hai viền ngoài:

Độ rộng của yếu tố <div> này là 500px, viền ngoài được đặt là auto.

Lưu ý:Khi cửa sổ trình duyệt nhỏ hơn độ rộng của yếu tố, phần này <div> sẽ gặp vấn đề. Trình duyệt sẽ thêm thanh cuộn ngang vào trang.

Trong trường hợp này, sử dụng max-width Có thể cải thiện cách trình duyệt xử lý cửa sổ nhỏ. Điều này rất quan trọng để làm cho trang web có thể sử dụng trên thiết bị nhỏ:

Kích thước lớn nhất của phần tử <div> này là 500px, biên độ mép được thiết lập thành auto.

Lưu ý:Hãy điều chỉnh kích thước cửa sổ trình duyệt dưới 500 pixel để xem sự khác biệt giữa hai div!

Đây là ví dụ của hai div trên:

Mẫu

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

Thử ngay