CSS box model/grid notatki 5.11

1. Box Model

• Każdy element w CSS składa się z:
  1. Content – zawartość elementu (tekst, obraz, itp.)
  2. Padding – odstęp między zawartością a borderem
  3. Border – obramowanie elementu
  4. Margin – odstęp między elementem a innymi elementami
• box-sizing:
  • content-box → domyślnie, szerokość = content, padding i border dodawane na zewnątrz
  • border-box → szerokość = content + padding + border (łatwiejsze liczenie)

2. Wycentrowane divy

• Poziome: margin: 0 auto;
• Poziome + pionowe: użycie flexboxdisplay: flex;
  justify-content: center;
  align-items: center;
  

3. Width / Height

• Można ustawiać w px, %, vh, vw, em
• min-width / max-width → ograniczają minimalną/maksymalną szerokość
• min-height / max-height → ograniczają wysokość

4. Padding, Margin, Border

• padding: 20px; → wypełnienie od zawartości do borderu
• margin: 20px; → odstęp od innych elementów
• border: 2px solid blue; → obramowanie

5. Overflow

• overflow: auto; → pojawiają się paski przewijania tylko jeśli zawartość nie mieści się w elemencie
• overflow-x / overflow-y → kontrola przewijania w poziomie/pionie

6. Display

• block → element zajmuje całą szerokość, nowa linia
• inline → w linii, nie można ustawić width/height
• inline-block → w linii, ale można ustawić width/height
• flex → włącza flexbox
• grid → włącza CSS Grid
• none → element niewidoczny

7. Position

• absolute → pozycjonowany względem najbliższego rodzica z position: relative
• fixed → pozycjonowany względem okna, nie przesuwa się przy scrollowaniu
• relative → względem normalnej pozycji elementu
• sticky → „przyklejony” do scrolla w określonym miejscu

8. Flexbox

• Flex container → element nadrzędny z display: flex
• Flex item → dzieci flex container
• Właściwości:
  • justify-content → wyrównanie w głównym kierunku
  • align-items → wyrównanie w kierunku poprzecznym
  • flex-grow / shrink / basis → jak item rośnie / kurczy się

9. CSS Grid

• display: grid → tworzy siatkę
• grid-template-columns: 1fr 2fr 1fr → proporcje kolumn (fr = fraction / część dostępnej przestrzeni)
• gap → odstępy między kolumnami i wierszami

10. Responsywność

• Jednostki elastyczne: %, vh, vw, em
• Media queries:@media (max-width: 600px) {
  .box { width: 95%; padding: 10px; }