Elementy układu strony (1)

Elementy układu strony (1)

Display

Jednym z elementów, przy pomocy których można kontrolować układ strony www przy pomocy css jest “display“. Każdy element na stronie www ma właściwość blok lub inline.

  • element blokowy zaczyna się w nowej linii, rozciąga się na całą szerokość strony lub elementu rodzica, można mu nadać szerokość lub wysokość. Elementy blokowe to: div, h1 – h6, p, form, header, footer, section
  • elementy inline jak span, a img – znajdują się wewnątrz paragrafu i zajmują tyle miejsca ile wynosi ich szerokość

Najprosztszy przykład od nagłówki h1-h6, które są blokowe i zaczynają się od nowej linii. Aby utraciły właściwość blokową tak aby na przykład kolejny element znalazł się w tej samej linii trzeba im nadać właściwość inline. Właściwość inline będzie powodowała, że elemnty li będą się ustawiać w jednej linii a nie jeden pod drugim.

display: none – usuwa element ze strony tak jakby go nie było. Podobny efekt można uzyskać przez zastosowanie visibility:hidden ale wtedy elementu nie widać ale jakby jest nadal gdyż zajmuje miejsce na stronie, tylko nie jest widoczny.

Szerokość elementów blokowych

Elementom blokowym można nadać szerokość i marginesy. Aby wypośrodkować element można ustawić jego szerokość i zastosować margin: 0 auto; wtedy marginesy prawy i lewy są ustawione na auto czyli element jest wypośrodkowany. Ustawienie stałej szerokości powoduje, że jeśli okno przeglądarki zmniejszy się poniżej tej szerokości to przeglądarka wstawi pasek przesuwania w poziomie. Jest to element niepożądany. Rozwiązaniem tego problemu będzie ustawienie max-width, tak żeby element miał maksymalną szerokość w przypadku gdy okno przeglądarki jest większe.

box-sizing

Właściwość box-sizing okresla czy szerokość i wysokość elementu jest liczona z dopełnieniem i brzegiem.

Domyślnie wielkość elementu jest liczona wliczając padding i border (content-box). W praktyce oznacza to, że padding trzeba odjąć tak aby uzyskać rzeczywistą wielkość elementu. Czyli jeśli dodamy padding to prawdziwa wielkość elementu zwiększa się o padding.

  • box-sizing: content-box –  padding i border zmieniają szerkośc i wysokości elementu
  • box-sizing: padding-box –  padding nie zmienia szerkości i wysokości elementu
  • box-sizing: border-box –  padding i border nie zmieniają szerkości i wysokości elementu

Najczęściej używa się content-box czyli domyslne ustawienie lub border-box. Można to wytłumaczy w ten sposób, że jeśli nadamy elementowi szerokość 200 px i padding 50px to w przypadku content-box ten element na stronie będzie miał szerokość 300px gdyż po bokach zostanie dodane po 50px. Gdy ustawimy border-box to element na stronie będzie miał szerokość 200px a jego padding schowa się w środku, czyli zwęzi zawartość tego elementu. Czyli tekst zawarty w elemencie zostanie zwężony o padding.

border-box przydaje się przy projektowaniu stron dla urządzeń mobilnych.

Na stronie https://css-tricks.com/box-sizing/ podane są sposoby na ustawienie border-box generalnie dla wszystkich elementów na stronie:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

 

 

 

 

artykuł ten stanowi proste streszczenie turoriala na podstawie: http://learnlayout.com/display.html, jeśli chcesz dogłębnie poznać temat zajrzyj tam

One Comment
Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.