Model pudełka w CSS | Wyjaśnione

CSS, akronim kaskadowego arkusza stylów jest używany do stylizowania elementów HTML, a każda treść, którą widzisz na stronie internetowej, jest elementem w html e.G tekst, ikony, przyciski i obrazy. Każdy element zużywa trochę miejsca na stronie, a przestrzeń zajmowana przez element HTML jest znany jako pudełko tego elementu. Model pudełkowy może być reprezentowany jako obszar zajmowany przez element HTML, który ponadto składa się z kilku właściwości, takich jak wyściółka, margines i granice.

Ten zapis zapewni przewodnik krok po kroku po zrozumieniu modelu CSS Box i poznamy szczegółowo każdą z poniższych właściwości za pomocą przykładów:

• Obszar treści w modelu pudełka
• Wyściółka w modelu pudełka
• Granice w modelu pudełka
• Model marginesu w pudełku

Więc bez opóźnień kontynuujmy!

Obszar treści w modelu pudełka

Treść jest jedną z najważniejszych części modelu pudełka, który służy do wyświetlania tekstu, obrazów itp., a przestrzeń wymagana do wyświetlania treści jest znana jako obszar treści. Obszar zawartości można zmienić rozmiar za pomocą wysokość i szerokość nieruchomości.

Jest obecny w środku modelu pudełka i jest wyróżniony jako obszar niebieski na poniższym rysunku:

Wyściółka w modelu pudełka

Wyściółka jest niczym innym jak przestrzenią wokół treści, jest obecna poza treścią i wewnątrz obszaru granicznego. Możemy kontrolować wyściółkę każdej strony osobno lub możemy jednocześnie ustawić wyściółkę wszystkich stron wyściółka nieruchomość. Wyściółka jest podkreślona jako zielony obszar na rysunku podanym poniżej:

Border in Box Model

Granica pokazuje się wokół wyściółki i wewnątrz marginesu. Granice można ustawiać wokół dowolnego elementu HTML, możemy określić właściwości graniczne dla każdej strony i.mi. górny, lewy, prawy i dolny za pomocą T-TOP, lewica graniczna, prawna granica, właściwości dany graniczne odpowiednio. Możemy jednocześnie ustawić całą granicę za pomocą granica nieruchomość. Granica jest wyróżniona jako żółty obszar na rysunku podanym poniżej:

Model marginesu w pudełku

Przestrzeń poza granicą nazywa się marginesem. margines właściwość ustawia margines z każdej strony indywidualnie lub jako całość. Margines jest podkreślony jako obszar pomarańczowy na poniższym wymienionych rysunkach:

Przykład

Rozważmy przykład, aby zrozumieć całą koncepcję modelu pudełka:

Treść: element HTML obecny na środku pudełka
Model
Wyściółka: Wyściółka jest niczym innym jak przestrzenią wokół zawartości, jest obecna poza treścią i wewnątrz
Obszar graniczny
Granice: granica pokazuje się wokół wyściółki i wewnątrz marginesu
Margines: Przestrzeń poza oknem granicznym nazywa się marginesem

Powyższy fragment fragment ustawia szerokość zawartości 500px, wysokość 100px, granicę 5px i wyściółka 10px, w rezultacie pokazuje następujące dane wyjściowe:

Redoks linijki służy do obliczenia wysokości i szerokości, pokazuje całkowitą szerokość równa się 530, a całkowita wysokość równa się 130.

Jak zweryfikować szerokość i wysokość modelu pudełka

Całkowita szerokość = lewy margines + lewy granica + lewy padanie + szerokość obszaru zawartości + prawostopnia + prawej granicy + prawy margines
Szerokość = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px Całkowita wysokość = margines-top + top graniczny + Wysokość zawartości + wyściółka + bottom + border-bottom + margines-bottom
Wysokość = 0 + 5px + 10px + 100px + 10px + 5px + 0px = 130px

Wniosek

Model Box określa projekt i układ dowolnej strony internetowej, wykorzystując wiele właściwości CSS, takich jak granica, wysokość, szerokość, margines i wyściółka. Ten zapis wykazał kompleksowy przegląd modelu CSS Box, w którym nauczyliśmy się używać modelu pudełka do dostosowania układu dowolnego elementu HTML.