CSS: Procent czego?

0:00W tej lekcji opowiem troszkę o procentach w cs.

0:04Na początku tego kursu wspominałem przy

0:06omówieniu innych jednostek że procenty są dosyć problematyczne jeżeli chodzi o to

0:10jak działają ponieważ w zależności od właściwości do której

0:14procenty one będą się zachowywały inaczej i tutaj Amelia Berg.

0:20Jeżeli dobrze przeczytałem ten Berg

0:22przepraszam zrobiła świetną stronę internetową która

0:25pokazuje do czego procenty odnoszą się w zależności od właściwości do której ją.

0:31Iże to zależy

0:35żeby przejść po prostu po kolei.

0:38Po każdej z właściwości która zachowuje się dziwnie bądź naturalnie dla nas jako

0:42deweloperów i w przypadku ich hit to jest to dosyć intuicyjne ponieważ I Hate

0:50odnoszą się do rozmiarów rodzica w zależności od tego czy jest to

0:57odnoszą się do rozmiarów szerokości rodzica bądź jeżeli to jest hit to

1:02rozmiaru wysokości rodzica więc jest to naprawdę intuicyjne ładnie działa.

1:06Nie ma z tym problemu

1:07nie jesteśmy w stanie oczywiście podawać wartości ponad stuprocentowe.

1:12Jak wygląda sytuacja w Top left.

1:16Generalnie na takiej samej zasadzie jak

1:20i hj z tym że jeżeli element ma wartość 50 proc.

1:25. To dane.

1:29Element. Jeżeli jego pozycja jemy za pomocą top

1:32Left Right bo Tom będzie znajdował się w połowie rodzica.

1:37I tutaj jeżeli byśmy sobie też to ustawili na 50 proc.

1:41no to faktycznie widzimy że krawędź górna jest dokładnie w połowie tego elementu

1:46czyli jesteśmy w stanie sobie tutaj to pozycjonowanie na takiej zasadzie że.

1:53Element będzie.

1:56Jeśli ustawiły mu odpowiednie wartości Hyde no to oczywiście musiałbym troszkę

2:01bardziej konkretnie to podać ale w pozycjonowanie absolutnym.

2:04Procenty działają na zasadzie takiej jak

2:07wpływ i hejt więc jest to na tyle intuicyjne ale krawędź zaczyna się od

2:12pięćdziesięciu procent więc to o tym trzeba pamiętać

2:17margines sami jest już troszkę mniej

2:20no bo one faktycznie operują na wysokości i szerokości rodzica z tym że

2:27margines to margines bo tam działają zawsze w kontekście szerokości

2:34kontenera to znaczy jeśli Tutaj ustawiamy sobie.

2:38Szerokość powiedzmy na 10 10.

2:42Bardzo malutkie.

2:45To jeśli ustawiamy Martin top na 50.

2:49No to oznacza to tyle.

2:52że ten element jest wysunięty o połowę szerokości naszego rodzica.

3:00Dlaczego tak jest. Nie wiem.

3:02Być może gdy pracowaliśmy z Marcinem sami na wczesnych etapach frontem Development.

3:08Miało to sens i było to wygodne.

3:11Natomiast warto po prostu pamiętać że

3:13procenty to margines zwłaszcza topi Left no bo to są te problematyczne.

3:18Czyli generalnie elementy w osi pionowej

3:20będą brały zawsze szerokość rodzica a nie jego wysokość pomimo tego że operują na.

3:29Krawędzi górnej krawędzi dolnej i parking ma generalnie tą samą.

3:35Zależność co margines i tutaj.

3:39Warto zauważyć że Amelia korzystała z Boxing Border Box aby

3:45te elementy się nie rozszerzał za bardzo o czym już mówiliśmy w tym kursie.

3:50Co do Trans for trans lat to tutaj sama chemia mówi że

3:55robi się to dziwnie i podsumowanie jest takie że

3:59procenty w kontekście transformacji odnoszą się do samego elementu na którym

4:03ten Transformer jest zaaplikował i do jego wysokości i szerokości.

4:08Czyli jeśli zmniejszymy sobie nasz wpływ.

4:14Teraz będziemy przesuwać tę wartość na to to nam się bardzo powolutku przesuwa

4:20a jeśli zwiększymy te wartości te

4:22szerokości to te elementy będą się przesuwane o wiele szybciej.

4:28I jest to zupełna odwrotność tego jak działają np.

4:33w Haiti czy parking czy margines ponieważ one odnosiły się do.

4:38Rozmiaru rodzica a Transformer odnosi się do rozmiaru dziecka.

4:42No i tutaj jest zaprezentowane jak możemy

4:46dojść do tego Haku który często był używany np.

4:49na takowe Flow aby cenzurować elementy w

4:53pionie i w poziomie przy użyciu pozycjonowania absolutnego i trasy Lata.

4:58I tutaj tego już konkretnie

5:01omawiać nie będziemy ale generalnie tutaj te dwie zależności że trans lat.

5:07Opiera się na szerokości i wysokości

5:11elementu a pozycjonowanie absolutne czyli w Top Left opierają się na rozmiarach

5:17rodzice jesteśmy w stanie podać takie wartości.

5:20I tutaj jest to rozbite na takiej zasadzie że przesuwamy element o 50 proc.

5:25.

5:27Wysokości rodzica przy pomocy to 50 proc.

5:31to jest to co robiliśmy na początku.

5:34Przesuwamy tak samo w prawo o 50 proc.

5:38szerokości rodzica czyli robimy dokładnie to co robiliśmy.

5:42Tutaj.

5:44Ustawiając to na 50 na 50.

5:49Czyli tak ustawiamy ten element na środku elementu to jest pierwszy krok.

5:56A następnie cofamy to co zrobiliśmy o 50 proc.

6:00czyli mamy 25 bo połowa połowy

6:04to będzie 25 proc.

6:06No i faktycznie cofamy to o 25 proc.

6:09wysokości samego elementu w obu osiach.

6:12I tak element zawsze będzie nam

6:14pozycjonowanie niezależnie od tego jakie ma wysokości czy szerokości więc tak też

6:19działa ten trik z trasy latem i chwytem dzięki Amelii Berg Jesteśmy w stanie

6:27wizualnie to sobie przedstawić i zrozumieć.

6:30W związku z czym ja

6:32osobiście staram się unikać procentów ponieważ po prostu mogą być problematyczne

6:39w różnych latach i mamy jednostki takie jak fart i fakt że nie mamy jednostki

6:45kreatywne kremy i mamy też jednostki absolutne jak np.

6:51centymetry.

6:53Których możemy używać do stron które mają

6:56być wydrukowane docelowo w związku z czym procenty oczywiście są i można ich używać

7:03ale jeśli są do tego odpowiednie jednostki to być może jesteśmy w stanie z nich

7:09zrezygnować na rzecz nowszych bardziej dopasowanych unitów.