Objaśnienie modelu CSS Box z przykładami

Jeśli planujesz zbudować niesamowity układ strony internetowej, musisz wiedzieć o marginesach, obramowaniach, dopełnianiu i treści. Każdy element w projektowaniu stron internetowych, niezależnie od tego, czy jest to obraz, czy tekst, używa pola z tymi właściwościami. Możesz łatwo budować złożone układy, bawiąc się modelem pudełkowym. W tym artykule omówimy model CSS Box i pokażemy, jak korzystać z tych właściwości na praktycznych przykładach.

Co to jest model pudełkowy CSS?

Model pudełkowy CSS to standard stworzony przez Konsorcjum World Wide Web. Opisuje wszystkie elementy w dokumencie HTML jako prostokątne pudełka o własnych wymiarach. Te pola zawierają obszar zawartości i opcjonalne otaczające marginesy, obramowanie i obszary dopełnienia. Przyjrzyjmy się więc częściom pudełka CSS.

Odkryjmy cztery warstwy modelu pudełkowego CSS.

Pierwsza warstwa: zawartość

Obszar zawartości zawiera główną zawartość elementu, która może być obrazem, tekstem lub dowolną formą zawartości multimedialnej. Możesz modyfikować wymiary elementów blokowych za pomocą wzrost oraz szerokość nieruchomości.

Druga warstwa: wyściółka

Dopełnienie to przestrzeń między polem treści a jego ramką graniczną. Chociaż znajduje się wokół treści jako biały znak, możesz użyć koloru tła, aby zwizualizować różnicę. Możesz aplikować wyściółka-góra, dopełnienie-prawo, wyściółka-dół, oraz dopełnienie-lewo właściwości, aby zmodyfikować pomieszczenie.

Trzecia warstwa: obramowanie

Granica otacza zawartość i obszar dopełnienia. Możesz zmienić rozmiar i styl obramowania za pomocą szerokość granicy, styl obramowania, oraz kolor ramki nieruchomości.

Czwarta warstwa: Margines

Ostatnia warstwa modelu pudełkowego jest szeroko wykorzystywana do generowania przestrzeni między elementami. Margines otacza zawartość, dopełnienie i obszar obramowania. Możesz użyć górna marża,margines w prawo, marża-dolna, oraz margines-lewy nieruchomości. Możesz również nadać właściwości margin wartość ujemną lub automatyczny aby osiągnąć niesamowite techniki rozmieszczania.

Konfiguracja projektu dla modelu pudełkowego CSS

Zbudujmy mini projekt, aby zademonstrować podstawowy model pudełka z polem zawartości i właściwościami dopełnienia, obramowania i marginesu. Możesz iść z tekstem, obrazem lub treścią multimedialną. Zaczniemy od upewnienia się, że jest odpowiednio skonstruowany.

Struktura z HTML

Wyjście:

Możesz korzystać z wbudowanych funkcji przeglądarki, takich jak Narzędzia dla programistów Chrome, aby zobaczyć, co się dzieje. Używamy dwóch obrazów z Unsplash. Dla uproszczenia ukryjemy obraz smartfona za pomocą Nie wyświetla się; dopóki nie będziemy tego potrzebować później.

Stylizacja za pomocą CSS

/*************************
PODSTAWOWA STYLIZACJA
*************************/
* {
margines: 0px;
dopełnienie: 0px;
}
ciało {
wyświetlacz: elastyczny;
kierunek ugięcia: rząd;
} 
.wyświetlacz {
wyświetlanie: brak !ważne;
}

Teraz nadajmy styl naszemu polu treści. Najpierw ustawimy wzrost oraz szerokość obrazu. Ponadto nadanie koloru tła pomaga w lepszej wizualizacji. Więc zróbmy to.

/*************************
PUDEŁKO Z TREŚCIĄ
*************************/
.pole-treści {
wyświetlacz: elastyczny;
kierunek ugięcia: rząd;
uzasadnić-treść: centrum;
wyrównaj-elementy: centrum;
/* Stylizacja pola treści przy użyciu właściwości wysokości i szerokości */
kolor tła: #fdf;
wysokość: 20em;
szerokość: 30em;
}

Daj treściom przestrzeń do oddychania dzięki wyściółce

Możesz albo ustawić wyściółka-góra, dopełnienie-prawo, wyściółka-dół, oraz dopełnienie-lewo właściwości indywidualnie lub użyj skrótu. Staraj się używać skrótów, jeśli to możliwe, ponieważ może to zaoszczędzić trochę czasu. Zobaczmy, jak działa dopełnienie.

 /*************************
WYŚCIÓŁKA
*************************/
/* Stosowanie dopełnienia */
wyściółka górna: 5em;
dopełnienie-prawe: 2em;
dopełnienie spodu: 8em;
dopełnienie lewe: 2em;
/* Skrót dopełniania */
/* góra/prawo/dół/lewo */
wypełnienie: 5em 2em 8em 2em;
/* góra/poziom/dół */
wypełnienie: 5em 2em 8em;

Wyjście:

Rysuj linie wokół dopełnienia za pomocą obramowania

Stosując właściwość border, upewnij się, że używasz kolor ramki właściwość, aby nadać obramowaniu inny kolor niż tło. Możesz wybrać styl obramowania indywidualnie lub za jednym razem, korzystając z właściwości skróconej. To samo dotyczy szerokość granicy własność.

Możesz także ustawić promień-granicy nadać skrzynce zaokrąglone rogi o promieniu w px, Rem, emlub procent.

 /*************************
GRANICA
*************************/
/* Stosowanie właściwości obramowania */
/* Ustaw kolor obramowania */
kolor obramowania: rgb (148, 234, 255);
/* Wybierz styl obramowania */
styl obramowania: solidny;
styl obramowania w prawo: przerywany;
border-bottom-style: rowek;
styl obramowania po lewej: grzbiet;
/* skrót w stylu obramowania */
/* góra/prawo/dół/lewo */
styl obramowania: solidny, przerywany grzbiet rowka;
/* Ustaw szerokość obramowania */
granica-góra-szerokość: 4em;
border-right-szerokość: 2em;
obramowanie-dół-szerokość: 2em;
granica-lewo-szerokość: 2em;
/* skrót szerokości obramowania*/
/* góra/prawo/dół/lewo */
szerokość obramowania: 4em 2em 2em 2em;
/* góra/poziom/dół */
szerokość obramowania: 4em 2em 2em;
/* skrót własności granic */
/* obramowanie: 4em solid rgb (148, 234, 255); */
/* Ustaw promień obramowania */
promień graniczny: 5em;
promień graniczny: 20%;

Wyjście:

Dodaj przestrzeń między pudełkami z marginesem

Możesz wyśrodkować pudełko w poziomie za pomocą margines: 0 auto, pod warunkiem, że ma określoną szerokość.

 /*************************
MARGINES
*************************/
/* Stosowanie właściwości marginesów */
margines-góra: 4em;
margines prawy: 5em;
margines-dolny: 3em;
margines lewy: 5em;
/* Skrót depozytu zabezpieczającego */
/* góra/prawo/dół/lewo */
marża: 4em 5em 3em 5em;
/* góra/poziom/dół */
marża: 4em 5em 3em;
/* Korzystanie z automatycznego marginesu */
margines: 3em auto;

Wyjście:

Możesz określić właściwość margin przy użyciu jednej, dwóch, trzech lub czterech wartości. Wartości mogą być długością, wartością procentową lub słowem kluczowym, takim jak automatyczny. Rozumiem, jak to działa:

• Gdy określisz tylko jedną wartość, oznacza to, że wszystkie cztery strony będą miały ten sam margines.
• Gdy określisz dwie wartości, pierwsza wartość oznacza margines-góra oraz marża-dolna podczas gdy druga wartość określa margines w prawo oraz margines-lewy.
• Gdy określisz trzy wartości, pierwsza i ostatnia odnoszą się do margines-góra oraz marża-dolna odpowiednio. Średnia wartość dotyczy obszaru poziomego, tj. margines w prawo oraz margines-lewy.
• Gdy określisz wszystkie cztery wartości, zostaną one zastosowane odpowiednio do góry, prawej, dołu i lewej (w kolejności zgodnej z ruchem wskazówek zegara).

Pamiętaj, że możesz również użyć tych skrótów do właściwości dopełnienia i obramowania.

Zobacz też: Ściągawka z podstawowymi właściwościami CSS3

Czy kiedykolwiek korzystałeś z ujemnej marży? Aby to zwizualizować, wymazujmy Nie wyświetla się aby wyświetlić nasz drugi obraz, a następnie ustaw ujemny margines.

/* .wyświetlacz {
wyświetlanie: brak !ważne;
} */
.pole-treści {
wyświetlacz: elastyczny;
kierunek ugięcia: rząd;
wyrównaj-elementy: centrum;
kolor tła: #fdf;
wysokość: 20em;
szerokość: 30em;
wypełnienie: 5em 2em 8em;
styl obramowania: solidny, przerywany grzbiet rowka;
szerokość obramowania: 4em 2em 2em;
promień graniczny: 20%;
/* Korzystanie z ujemnego marginesu */
marża: 3em -20em 3em 5em;
}

Wyjście:

Model pudełkowy: tworzenie doskonałej strony internetowej w pikselach

Model pudełkowy pozwala zdefiniować przestrzeń między elementami, dodać obramowanie i łatwo zbudować złożony układ. Możesz od razu zacząć tworzyć niesamowitą stronę internetową. Tymczasem możesz odkrywać ramka-pudełko właściwości szczegółowo i pobaw się powyższym kodem.

Powinieneś zrozumieć, że istnieją inne metody układania treści w CSS. Należą do nich CSS Grid i CSS Flexbox. Gdy już opanujesz model pudełkowy, powinieneś kontynuować poznawanie tych alternatyw.

Samouczek CSS Flexbox: podstawy

Idealnie pozycjonuj swoje elementy HTML za pomocą CSS Flexbox.

Czytaj dalej

O autorze