Rozmiar boksu w CSS: obliczanie rozmiarów bloków

Podczas projektowania stron internetowych bardzo ważne jest dokładne wskazanie rozmiaru elementów. Jeśli obliczenia nie powiedzie się, cały układ może "zepsuć się", powodując uszkodzenie wyglądu witryny. Aby uniknąć błędów, ważne jest dokładne zrozumienie sposobu, w jaki przeglądarki obliczają dane bloków i jak zarządzać tym algorytmem za pomocą właściwości box-sizing CSS.

Wzór bloku CSS

Wszystkie węzły dokumentu posiadające blokowy typ wyświetlania są opisane za pomocą modelu blokowego. Według niej, w strukturze elementu zestawione są następujące gałęzie lub pola:


  • treść-pole, które zawiera treść samego bloku - tekst i węzły potomne;
  • padding-box, który zajmuje całą przestrzeń w ramie z wewnętrznymi wcięciami lub wyściółką;
  • border-box, obejmuje również samą granicę.
  • Dodatkowo, dla bloku można określić wcięcia zewnętrzne lub marginesy, oddzielając je od sąsiednich elementów lub między rodzicami. Każde z wymienionych pól może być nieobecne lub puste.
    Jest to podstawowa koncepcja CSS, bez której prawie niemożliwe jest tworzenie pięknych złożonych układów.

    Określanie faktycznego rozmiaru elementu

    Najważniejszą rzeczą dla przeglądarki jest content-boxing, ponieważ jest to semantyczna część dowolnego bloku. Dlatego, gdy instalator określa dane za pomocą właściwości width i height, odnoszą się one dokładnie do treści. Ponadto, wewnętrzne i zewnętrzne wcięcia i szerokość ramki są dodawane do pewnych wewnętrznych wymiarów pudełka.

    .block {
    szerokość: 200 pikseli;
    wysokość: 100 pikseli;
    wierzch ochraniacza: 20 pikseli;
    padding-bottom: 20px;
    wyściółka - lewa: 10 pikseli;
    padding-right: 10px;
    granica: 5px ciało stałe;
    }

    Pomimo faktu, że element blokowy jest ustawiony na szerokość 200 pikseli, w rzeczywistości zajmie on 230 pikseli na stronie, biorąc pod uwagę klatkę i dopełnienie boczne. Podobnie, wykonywane jest obliczenie wysokości: zamiast oczekiwanych 100 pikseli, jednostka zajmie do 150 w pionie.



    Powiązane publikacje