Układ CSS - szerokość i max-width

Używając width, max-width oraz margin: auto;

Jak opisano w poprzednim rozdziale, elementy blokowe zawsze zajmują całą dostępną szerokość (maksymalnie w lewo i w prawo).

Ustawienie szerokości elementów blokowych szerokość To zapobiegnie jego rozszerzeniu się do krawędzi kontenera. Następnie możesz ustawić margines na auto, aby umieścić element poziomo w kontenerze. Element zajmie określoną szerokość, a reszta przestrzeni zostanie równomiernie podzielona między dwoma marginesami:

Szerokość elementu <div> wynosi 500px, a margines ustawiony jest na auto.

Uwaga:Kiedy okno przeglądarki jest mniejsze niż szerokość elementu, powyższy <div> może spowodować problem. Przeglądarka doda paski przewijania poziome do strony.

W tym przypadku, użycie max-width Można poprawić sposób, w jaki przeglądarka radzi sobie z małymi oknami. Jest to bardzo ważne, aby strona była dostępna na małych urządzeniach:

Maksymalna szerokość elementu <div> wynosi 500px, a margines ustawiony na auto.

Wskazówka:Proszę dostosować rozmiar okna przeglądarki do wartości mniejszej niż 500 pikseli, aby zobaczyć różnicę między dwoma div!

Oto przykład dwóch powyższych div:

Przykład

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

Spróbuj Sam