Układ CSS - szerokość i maksymalna szerokość
Korzystanie z szerokości, maksymalnej szerokości i marginesu: auto;
Jak wspomniano w poprzednim rozdziale; element blokowy zawsze zajmuje pełną dostępną szerokość (rozciąga się w lewo iw prawo tak daleko, jak to możliwe).
Ustawienie widthelementu blokowego zapobiegnie jego rozciąganiu się do krawędzi pojemnika. Następnie możesz ustawić marginesy na auto, aby wyśrodkować element w jego kontenerze w poziomie. Element zajmie określoną szerokość, a pozostała przestrzeń zostanie równo podzielona między dwa marginesy:
Uwaga: Problem z <div>powyższym występuje, gdy okno przeglądarki jest mniejsze niż szerokość elementu. Przeglądarka następnie dodaje do strony poziomy pasek przewijania.
Użycie max-widthzamiast tego w tej sytuacji poprawi obsługę małych okien przez przeglądarkę. Jest to ważne, gdy witryna może być używana na małych urządzeniach:
Wskazówka: Zmień rozmiar okna przeglądarki do szerokości mniejszej niż 500px, aby zobaczyć różnicę między dwoma divami!
Oto przykład dwóch powyższych divów:
Przykład
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}