Czym jest model pudełkowy?
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 33 z 76.
W CSS każdy element HTML jest traktowany jak prostokątne pudełko zgodnie z modelem pudełkowym. Model ten składa się z czterech głównych części:
- Treść: Właściwy tekst, obraz lub inna zawartość wewnątrz pola.
- Wypełnienie: Przestrzeń między zawartością a obramowaniem. Zwiększa rozmiar elementu, ale pozostawia kolor tła wewnątrz.
- Obramowanie: Linia otaczająca dopełnienie i zawartość. Może mieć różne style, kolory i szerokości.
- Margines: Przestrzeń poza obramowaniem, która oddziela element od innych elementów.
Zrozumienie modelu pudełkowego pomaga kontrolować odstępy i układ w projektowaniu stron internetowych! 🚀
Spróbuj swoich sił
Ta lekcja nie zawiera wyzwania z kodem.
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Stylizacja za pomocą CSS
4Podstawy tekstu
Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #27Model pudełkowy, część 1
Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące13Strona internetowa Tonga
Menu nawigacyjneNagłówek powitalny
Sekcja „O nas”Sekcja kontaktowaZnacznik viewportMedia query8Model pudełkowy, część 2
Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące3Podstawowe selektory
Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory9Flexbox
Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox12Podstawy responsywnego projektowania
Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazyPoćwicz samodzielnie: Edytor online Web