Ostatnia aktualizacja: 

Czym jest Box-model?

Jedna prosta właściwość, która zmieni życie każdego front-end developera. Serio.

CSS
03m 51s
21.000+ wyświetleń
557+ pozytywnych reakcji

Jedna prosta właściwość, morze możliwości

Dlaczego moja strona się rozjeżdża? Reguła width: 50% nie mieści się? Mam dla Ciebie rozwiązanie! Jest to jedna linijka CSS! Poznaj box-model.

Opinie

Komentarze widzów

Wasze opinie liczą się najbardziej, materiały Tworzymy dla was!
Oto wybrane komentarze które zostawiliście pod tym wideo!

  • 3 minuty filmy a tyle wiedzy! nie wiedziałem, że padding poszerza nam boxa i ze jest taka funkcja jak box-sizing: border-box bardzo mi ułatwi kodowanie, dzieki za info jest bardzo pomocne :)

  • Extra. Więcej takich filmów. :)

  • Pierwsza łapka w góre! :D

  • Za ten odcinek was jeszcze bardziej pokochałem! Kuuuurdee!! Ile ja musiałem liczyć aby wszystko ładnie dopasować, a tak to tylko jakaś jedna fajna komenda i wszystko działa :V

Transkrypt wideo

Witajcie na kodu.je. Dzisiaj dowiecie się czym jest box model.

[ intro kodu.je ]

Jak widzicie mamy tutaj bardzo prosty markup, zwykłego jednego diva o klasie box, no i oczywiście adekwatny selektor w naszych stylach.

Załóżmy że chcielibyśmy aby miał on wymiary 100px na 100 px,
no i powiedzmy tło białe. Wszystko działa tak jak byśmy się tego spodziewali.

Jeśli wpiszemy sobie jakąś treść w naszego diva "Jestem pudełkiem",
no oczywiście powinniśmy mu ustawić wtedy kolor na czarny,
no i gdy damy mu padding załóżmy 10px z każdej strony,
to oczywiście nasz tekst ma ten odstęp 10px z góry, z lewej i z prawej strony,
natomiast jak pewnie zauważyliście, rozmiar naszego diva zmienił się pomimo tego,
że wstawiliśmy sobie tutaj 100px szerokości i 100px wysokości.

Dzieje się tak ponieważ domyślnie padding dodawany jest do tej naszej szerokości i wysokości naszego pudełka, czyli jeśli chcielibyśmy aby nasz box miał tak naprawdę tą szerokość i wysokość 100px i zawierał w sobie padding, no to oczywiście musimy sobie odjąć od szerokości wartość paddingu z lewej i z prawej strony, czyli tj. 10px z lewej, 10px z prawej, czyli 80px chcemy szerokości, no i analogicznie wysokość tak samo.

I w tym momencie nasz box, ma już te wymiary 100x100px.
Jeśli dodamy sobie do tego jakieś obramowanie - 5px powiedzmy czarne,
to jak widzicie nasze pudełko jest szersze o ten nasz border,
więc ponownie jeśli chcielibyśmy aby cały div miał łącznie 100x100px,
no to musimy odjąć w tym wypadku 10px z każdej strony
I tak naprawdę możecie tworzyć strony w ten sposób,
ale jest do tego prostsze rozwiązanie.

Jeśli ustawicie sobie 100x100px i wykorzystacie property box-sizing ustawiony na border-box, to wtedy w tym naszym width i height zostanie zawarta wartość paddingu i naszego bordera. Jest to tzw. box model, możecie do podejrzeć albo uruchamiając inspektora www w waszej przeglądarce, albo wykorzystując nasze Functionite'owe rozszerzenie do Bracketsa, które pokazuje wam tak naprawdę, jak wygląda ten box model.

Ten feature będzie dostępny w wersji Bracketsa 1.10, nie będziecie musieli nic instalować, będzie to po prostu zintegrowane z live preview.

Jak widzicie na box model składa się oczywiście padding,
gdy zmienimy sobie padding-top na powiedzmy 30px,
to jak widzicie nasz box dalej ma te 100x100px, w przypadku gdybyśmy nie używali box-sizing: border-box, oczywiście musielibyśmy sobie to odpowiednio odjąć z naszej wysokości i szerokości.
No ale oczywiście oprócz bordera i paddingu, jest też margines
Załóżmy, że 20px, różnica jest tylko taka, że tak naprawdę margines nie jest wliczany w szerokość samego diva, więc box-sizing nie ma wpływu na sam margines, ale jest on też częścią box modelu, dlatego warto to wiedzieć.

Gdy zaczynałem swoją przygodę z front-endem, właśnie bardzo często nacinałem się na to, że ustawiałem sobie 2 bądź 3 boxy,
nadawałem im szerokość na załóżmy 50% w zależności od tego ile elementów było w danym wierszu i spodziewałem się, że elementy pojawią się w jednej linii, to niestety tak się nie działo, bo np. miałem właśnie ten border.

Gdy dowiedziałem się o właściwości box-sizing i parametrze border-box,
moja praca jako front-end developera, stała się wiele prostsza.

Tematykę tę porusza również Damian w Webinarze "Przygotowanie do rozmowy kwalifikacyjnej". Możecie obejrzeć fragmenty tego Webinaru na naszym kanale, bądź odwiedzić nasz sklep internetowy by uzyskać dostęp do pełnej wersji.
Dostęp do pełnej wersji Webinaru Damiana uzyskacie klikając w odnośnik widoczny po lewej stronie ekranu,
a
jeśli podobało wam się to wideo - koniecznie kliknijcie ikonkę subskrypcji, by nie przegapić nowych materiałów na naszym kanale

11 kwietnia 2022

Komentarz od autora

Właściwość box-sizing niesamowicie ułatwia życie każdego Frontend developera, dlatego też wartość border-box jest często częścią wszystkich arkuszy resetujących czy normalizujących.

Jednak jeśli nie korzystamy z nich, bądź o nich nie wiemy - wtedy znajomość działania ten właściwości okaże się nieoceniona. Każdy szanujący się programista na froncie powinien rozumieć, jak ta właściwość działa.

Wsparcie box-sizing według CanIUSE

Nie ma czego się obawiać, to jedna z podstawowych właściwości współczesnej sieci :)

Data on support for the mdn-css__properties__box-sizing feature across the major browsers

Poznaj Wojtka

Cześć! Nazywam się Wojciech Połowniak i jestem programistą Fullstack z zacięciem do tworzenia jakościowych materiałów szkoleniowych.

Uwielbiam automatyzację, VR oraz interaktywne sposoby przekazywania wiedzy. Tematy takie jak UX, dostępność czy devops również nie są mi obce.

Jestem też organizatorem meet.js oraz Techspeakerem pod banderą Mozilli... A to jeszcze nie wszystko.

Chcesz więcej?

Nie ma sprawy! Koduje to długie godziny darmowej treści dostępnej na wyciągnięcie ręki.

Newsletter

Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.

Najczęściej zadawane pytania

Jaka tematyka jest poruszana na Koduje?
expand_more
Mówimy o HTML, CSS i JavaScript - zarówno na backendzie, jak i frontendzie. Tematyka taka jak Devops, architektura i infrastruktura oprogramowania również pojawią się na kanale!
Czy mogę zaproponować temat kolejnych wideo?
expand_more
Oczywiście, że tak! Najlepiej sugerować materiały w sekcji komentarzy na YouTube 
Jak to możliwe, że Koduje jest darmowe? 
expand_more
Moją pasją jest dzielenie się wiedzą w sposób zrozumiały i klarowny, jednocześnie interaktwny i angażujący. Tworząc materiały, utrwalam też własną wiedzę. Wierzę, że za to widzowie nie powinni płacić
W sieci można znaleźć strony przypominające do koduje.pl, o co chodzi?
expand_more
Niestety, na przełomie lat wiele osób próbowało podszyć się pod Koduje i wykorzystać nasze materiały do promocji własnych kanałów dystrybucyjnych.  Jeśli masz wątpliwości, czy dana strona współpracuje z Koduje - daj nam o tym znać. Nie pochwalamy piractwa, plagiatu ani szarej strefy prawa autorskiego.
Czy prowadzicie szkolenia indywidualne?
expand_more
W chwili obecnej, niestety nie. Na przełomie lat prowadziłem kursantów przez ich przygodę z programowaniem, z czego każdy otrzymał pracę jako programista. Jeśli jesteś zainteresowany lekcjami indywidualnymi, zapraszam do kontaktu mailowego.
Czy oferujecie płatne kursy?
expand_more
W przyszłości nie wykluczamy możliwości tworzenia dedykowanych kursów o danych zagadnieniach. Zapisz się na nasz newsletter, aby być na bieżąco z naszymi najnowszymi płatnymi materiałami.
Jak mogę się z wami skontaktować?
expand_more
Czytamy komentarze na YouTube! Śmiało możesz zadać pytanie na dowolny temat pod którymkolwiek z naszych wideo. Poza tym możesz skontaktować się z nami mailowo bądź poprzez fanpage na Facebooku
Obecnym właścicielem marki jest Wojciech Połowniak. Zobacz zakładkę o nas!