Spisie treści
Przeglądarki internetowe, takie jak Firefox, Chrome, Safari, Opera itp.. Wszyscy przestrzegaj zasad zmiany rozmiaru elementów w zależności od przepływu i układu stronyTe zasady mogą być może bardzo szczegółowe, ale to pozwala nam określić, jak elementy powinny być traktowane tak, aby rozmiary były zawsze proporcjonalne do tego, czego od nich oczekujemy.Właściwości rozmiaru
Istnieje kilka właściwości rozmiaru, które pozwalają nam powiedzieć przeglądarce, jak powinna interpretować nasze elementy, zobaczmy ich listę przed przejściem do ich aplikacji:
Szerokość wysokość: Konfigurują szerokość i wysokość elementu, wartości jakie może przyjmować to: auto i.
min-szerokość / min-wysokość: Pozwala nam ustawić minimalną szerokość lub wysokość elementu, wartości jakie może przyjąć to: auto i
maksymalna szerokość / maksymalna wysokość: Ustawia maksymalną dopuszczalną wysokość lub szerokość elementu, jego możliwe wartości to: auto i
rozmiar pudełka: Określa, która część pola elementu jest brana za rozmiar, dostępne są: content-box padding-box border-box margin-box.
Jeśli nie ustawisz żadnej wartości dla oglądanych właściwości, domyślną wartością będzie: auto, nawet jeśli nie jest określona, co oznacza, że to przeglądarka będzie tą, która ustala rozmiary, również jak widzieliśmy możemy ustawić rozmiary używając pomiary długości lub wartości procentowe, wartości procentowe są obliczane na podstawie szerokości elementu pojemnika.
Po zapoznaniu się z teorią przejdziemy teraz do praktyki, zobaczmy poniższy kod, w którym ustawimy rozmiar dwóch elementów, abyśmy mogli zobaczyć, jak to wszystko działa:
Przykład
Jak widać to, co tutaj zrobiliśmy jest bardzo proste, ustaliliśmy szerokość i wysokość elementu div strony, następnie podajemy dwa identyfikatory, w których umieszczamy każdy inny rozmiar pudełkaZobaczmy, co to wszystko dla nas generuje:
Co się stanie, jeśli teraz pobawimy się trochę ze zmianą rozmiaru okna przeglądarki, wiemy, że div będzie miał 75% rozmiaru jego kontenera, w tym przypadku jego kontenerem jest body, które zmienia się wraz z oknem i z kolei obraz z selektorem #pierwszy Jest to 50% szerokości jego kontenera, czyli w tym przypadku div, gdy to widzimy, wiemy, że coś nie zostanie zachowane tak, jak jest, zobaczmy, co się z tym wszystkim dzieje w przeglądarce.
POWIĘKSZAĆ
