CSS: Model pudełkowy

0:00Box model czyli model pudełkowej.

0:02To jedno z takich zagadnień które ja na

0:04początku mojej drogi Web Development czy po prostu chcę się

0:08na pewno ułatwiło mi tworzenie stron internetowych.

0:13Generalnie często jest taka sytuacja że

0:16musimy stworzyć auto na podstawie tego jak designer przygotował nam pliki np.

0:22Photoshopa. Czy teraz bardziej w firmie często jest

0:25tak że musimy tworzyć jakieś karty czy komponenty które mają konkretne wymiary i

0:30mają do tego jakieś margines wewnętrzny margines zewnętrzne i

0:33te wartości modyfikuje za pomocą właściwości parking i marki.

0:38Oczywiście też czasami się zdarza że

0:40musimy zrobić jakieś obramowanie no ale to wszystko musi być zamknięte w danej

0:44szerokości komponentu którą designer tam tutaj podrzucił.

0:47Możemy sobie symulować taką sytuację

0:49piszemy tutaj kolorem są to każdego z elementów.

0:53Może zmniejszymy troszkę ten fon CX

0:57albo nawet całkiem mocno na 0:3 a zobaczymy jak to będzie wyglądało.

1:01To troszkę już za mocno.

1:04Generalnie Remy czy jednostki tego typu będziemy omawiać w kolejnych lekcjach.

1:11Jest bardzo dużo jednostek CSS owych.

1:14Z których możemy jako frontem deweloperzy korzystać.

1:18No powiedzmy że to będzie ok.

1:19takiego piwa sobie trzy razy stworzymy.

1:24Tych dwóch się pozbędziemy.

1:26No i załóżmy że designer nam powiedział że

1:29ten Box ma mieć 200 pikseli ale tutaj z boku z każdego z każdej tych stron

1:36powinien być dodatkowy margines wewnętrzny o szerokości 50 pikseli.

1:39No to sobie to ustawiamy 50 pikseli.

1:43Może zignorowane.

1:44Margines górny i dolny na razie tutaj margines zewnętrzny.

1:48Niech na razie taki będzie.

1:49No i jest OK. Miało być OK.

1:52Natomiast ustaliliśmy na 200 margines na 50 i teraz jak sobie

1:57zbadamy to w narzędziach deweloperskich to zobaczymy że komputer tułów

2:02jest co prawda dwieście ale tutaj możemy jeszcze podejrzeć jaki jest ring Box

2:08właśnie tutaj jeżeli na jednym element to w tym miejscu w takim tempie

2:13pokazuje się szerokość naszego elementu i faktycznie widać że nasz element zajmuje

2:17300 na 100 60 pikseli a nie 200 na 160 pikseli.

2:22Dzieje się to tak ponieważ domyślnie box

2:24model zawiera w sobie zarówno margines wewnętrzny jak i Border

2:30margines zewnętrzny jest ustawiony poza Box modelem.

2:33W związku z czym jeżeli my chcieliśmy w dawnych czasach

2:36stworzyć element który miał 200 szerokości i parking wewnętrzny ustawiony na 50

2:41pikseli musieliśmy ręcznie zdejmować to czyli wiedzieć że z lewej i z prawej

2:45strony będzie margines o takiej wartości czyli tutaj w tym przypadku jest to 50

2:51plus 50 nie jest to taka trudna matematyka czasami jest to oczywiście cięższe no i

2:55musieliśmy od tego całego kontenera odjąć to dwukrotnie.

2:59I wtedy mieliśmy szerokość 100 czyli tak naprawdę żeby mieć

3:02komponent o szerokości 100 przepraszam o szerokości 200 musieliśmy ustawić jego

3:07szerokość na 100 i po prostu parking tam ten element rozszerzał.

3:14Problematyczne byłoby to wtedy przede wszystkim jeśli designer powiedział

3:19że to ma być margines wewnętrzny 50 pikseli ale generalnie ma być tak szeroki

3:24jak tam może być niech zajmuje jak najwięcej miejsca.

3:27Więc jak ustaliliśmy to np.

3:28na 33 proc.

3:31.

3:33No to nasz juz niestety sie nie zgadzał no

3:36bo ponownie mieliśmy tutaj do tych 33 proc.

3:39dodawane 50 pikseli.

3:41Tak naprawdę musielibyśmy używać kalka

3:42którego wtedy jeszcze jako wsparcie było bardzo słabe

3:46i zdejmować sobie to 50 pikseli dynamicznie.

3:49Tutaj w tym przypadku oczywiście 100

3:51pikseli no bo mamy z dwóch stron ten margines

3:54i generalnie nie powinniśmy tego w ten sposób robić na pewno nie w 2020 roku w

4:00drugiej dekadzie dwudziestego pierwszego wieku.

4:03Nie musimy robić tych obliczeń ręcznie.

4:06Możemy wykorzystać tylko właściwość Boxing.

4:10I ustawić ją na Border Fox.

4:12I w tym momencie CSS będzie zupełnie inaczej tworzył nasze elementy to znaczy

4:19będzie automatycznie do tych dwustu pikseli które wcześniej zdefiniował

4:23obejmował szerokość parkingu czy morderca to znaczy jeżeli dodamy border.

4:30O szerokości powiedzmy 10 pikseli to też

4:32bardzo duży może 3 3 piksele Still Solid czyli linia przerywana.

4:38No i kolor Custom Properties ustawiony na zielone.

4:42No to widzimy że te elementy tak naprawdę

4:44nie zmieniają swojej szerokości pomimo tego że dodajemy tutaj nowe właściwości.

4:49Jeżeli połączymy ten.

4:51Border nic się nie zmienia.

4:53Elementy zostają w tym samym miejscu w jakim były ułożone co też bardzo często

4:58jest problematyczne jeżeli musimy stworzyć jakieś Hoover czyli style które.

5:04Są aktywowane po tym gdy jedziemy myszką na dany element.

5:07No to bez Border Box

5:10możemy sobie stworzyć taką symulację Box over.

5:16Importer.

5:19Na trzy piksele Solid jeszcze raz Green.

5:26Musieliśmy to sobie skopiować piszemy.

5:31Jest.

5:33Tak zróbmy tutaj z powrotem stołówkę.

5:38żeby to wyglądało lepiej.

5:39No to po najechali na ten element.

5:45Tutaj chyba nie.

5:50Otworzyło się wszystko dobrze tylko była literówki.

5:53No to widzimy że ten cały lot nam skacze.

5:56Tak naprawdę to tylko przez to że jeden element posiada inną wartość bo orderu.

6:02To jest problematyczne z poziomu

6:04performance u o czym też będziemy mówić później.

6:07Wydajność cesarza jest bardzo ważnym

6:08tematem zwłaszcza w czasach kiedy wyszukiwarki internetowe interpretują

6:12nasze strony by były jak najszybsze wydajniejsze.

6:15To Box Rising Border Box

6:18rozwiązuje nam ten problem ponieważ nasze elementy będą miały taką wartość jakiej

6:23byśmy się spodziewali ustawiając mu wpływ czy na jakąś tam wartość.

6:30No i tak naprawdę tutaj skacze nam

6:33o nie jestem ciekawy dlaczego Podejrzewam że dlatego bo tekst nam się zawija

6:37jakbyśmy pozbyli się tego tekstu w tym miejscu swoją drogą o tekście

6:41też można byłoby mówić bardzo długo będzie o tym dedykowana akcja.

6:45No to widzimy że te elementy już zachowują się w miarę normalnie tzn.

6:50Podświetlane dany element natomiast nie ma

6:53sytuacji że cały leja skacze tylko dlatego że choć kierujemy na jeden z elementów

6:59więc różnica jest taka w liczeniu Box modelu.

7:04Jeśli domyślnie ustawiamy content box na box leasingu no to wtedy parking oraz

7:10Border są dodawane do szerokości i wysokości naszego elementu.

7:14Margines jest pozostawiony zupełnie poza.

7:17Natomiast na wizualizacji często jest umieszczany bo po prostu jest to wygodne.

7:22Tutaj możecie sobie podejrzeć jaką

7:24konkretnie wartość ma któryś z waszych elementów.

7:27To jest właśnie box model i w przypadku Border Box CSS robi za nas

7:33te wszystkie kalkulacje więc jest to po prostu o wiele wygodniejsze i widzimy że

7:37sam automatycznie ustawia szerokość danego elementu na 100.

7:41Pomimo tego że komputer

7:44dalej będzie ustawiony na 200

7:47Box leasing Border Box jest czymś co prawdopodobnie i tak już każdy z Was używa

7:51natomiast prawdopodobnie jest to zamknięte w jakiś CSS receptach czy normalizacji.

7:56Jeśli jednak chcecie dobrze zrozumieć CSS

7:59no to oczywiście box model jest zagadnieniem które warto

8:03znać i mam nadzieję że dzięki tej lekcji jest ono wam mniej obce.