TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Samouczek modelu pudełkowego CSS

2

CSS to doskonałe narzędzie do projektowania stron internetowych. Popularność wynika nie tylko z łatwości obsługi, ale także z solidnych funkcji. CSS wpływa na każdy pojedynczy element na stronie internetowej. Dlatego każdy projektant stron internetowych, który jest głównym programistą dla prostych projektantów układów, powinien znać podstawy CSS. Model pudełkowy w CSS jest podstawą do definiowania układów i pozycjonowania elementów na stronie. W tym artykule szczegółowo omówimy podstawy modelu pudełkowego CSS. Ponadto omówimy również, jak analizować model pudełka elementu w przeglądarce.



Co to jest model skrzynki CSS?

W przypadku korzystania z CSS każdy element HTML na stronie internetowej jest traktowany jako prostokątne pole. Stąd koncepcja ta nazywana jest modelem skrzynkowym. Pomaga to w łatwym zdefiniowaniu układu strony internetowej i pozycjonowaniu elementów tak, aby były wyrównane zgodnie z potrzebami. W modelu pudełkowym zawartość elementu HTML jest umieszczona w środku, a za nią następuje dopełnienie, obramowanie i margines, jak pokazano poniżej:

Samouczek modelu pudełkowego CSS

Element modelu pola CSS

  • Margines – jest to obszar wokół granicy i zawsze jest przezroczysty. Celem marginesu jest zapewnienie niezbędnego odstępu między elementami oraz od krawędzi przeglądarki.
  • Border – jest to widoczna linia wokół zawartości i obszaru dopełnienia. Generalnie służy do zapewnienia konturu elementu i może mieć dowolny kolor i szerokość.
  • Padding – przestrzeń pomiędzy rzeczywistą treścią a obramowaniem nazywana jest padding. Gdy zawartość ma widoczne linie brzegowe, należy mieć trochę dopełnienia. Pomoże to stworzyć przestrzeń między treścią a obramowaniem.
  • Treść – rzeczywista zawartość, taka jak tekst i obraz między tagami HTML.

Powiązane: Samouczek jednostek CSS dla początkujących.

Przykład elementu modelu pudełkowego

Zróbmy prosty przykład tworzenia akapitu w znacznikach div, aby wyjaśnić koncepcję modelu pudełkowego. CSS powinien wyglądać jak poniżej:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; } </style>

Zwróć uwagę, że kod CSS dla marginesów i dopełnienia zawiera wymiary odpowiednio dla górnej, lewej, dolnej i prawej strony.

A kod HTML do wstawienia treści z powyższym css to:

<div class="box-model"> <p>This is a test content to explain how CSS box model will look like. This is a paragraph with different padding, different margin and border of 10px.</p> </div>

Wynik powyższego kodu będzie wyglądał jak poniżej w przeglądarce. Jak wspomniano, margines nie jest widoczny, ponieważ jest przezroczysty.

Samouczek modelu pudełkowego CSS

Wyświetlanie modelu pudełka CSS elementu w przeglądarce IE 11

Jak sprawdzić model skrzynki CSS w przeglądarce?

Warto zapoznać się z teorią w praktyczny sposób. Możesz zobaczyć model skrzynki CSS elementu bezpośrednio z przeglądarki internetowej. Tutaj pokazujemy zrzut ekranu z przeglądarką Google Chrome. Metoda pozostaje taka sama dla wszystkich innych przeglądarek, takich jak Firefox, Edge i Safari.

  • Otwórz dowolną stronę internetową i kliknij prawym przyciskiem myszy element, który chcesz poznać.
  • Możesz kliknąć prawym przyciskiem myszy dowolny tekst, obraz, wideo lub puste miejsce.
  • Wybierz opcję „Sprawdź element", aby otworzyć konsolę programisty.
  • Ma lewy panel do przeglądania HTML i prawy do przeglądania CSS.
  • Możesz zobaczyć model pola CSS wybranego elementu w zakładce „Układ” w prawym panelu.
  • Nawiązując do powyższego przykładowego kodu – wszystkie obramowania, marginesy i dopełnienia będą pasować do dokładnych wymiarów zdefiniowanych w CSS.

Uwaga, możesz wyświetlić znaczniki HTML elementu w przeglądarce Google Chrome w zakładce „Elementy”. Odpowiedni CSS i model pudełkowy można zobaczyć w zakładce „Style”, jak pokazano na poniższym obrazku.

Samouczek modelu pudełkowego CSS

Wyświetlanie modelu ramki CSS elementu w przeglądarce Chrome

Obliczanie szerokości i wysokości elementu w CSS Box Model

Teraz, gdy zrozumiałeś koncepcję modelu pudełkowego CSS. Za każdym razem, gdy definiujesz wysokość i szerokość elementu, całkowita szerokość i całkowita wysokość tego elementu powinny obejmować margines, dopełnienie i szerokość obramowania. Dodajmy wysokość i szerokość do powyższego przykładu kodu CSS:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; width: 300px; height: 200px; } </style>

Powiązane artykuły:


Teraz każdy element, który wywołuje styl klasy CSS „box-model”, powinien być pozycjonowany z następującą całkowitą szerokością i całkowitą wysokością.

  • Całkowita wysokość = wysokość + górny margines + dolny margines + górne wypełnienie + dolne wypełnienie + szerokość obramowania = 200 + 30 + 5 + 10 + 10 + 10 = 265 pikseli.
  • Całkowita szerokość = szerokość + lewy margines + prawy margines + lewe dopełnienie + prawe dopełnienie + szerokość obramowania = 300 + 15 + 5 + 0 + 5 + 10 = 335px.

Cały układ strony zostanie zaprojektowany z uwzględnieniem całkowitej szerokości i całkowitej wysokości każdego elementu.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów