Razumijevanje CSS prikaza: Nema, Blokiraj, Inline i Inline-Block

Objašnjenje razlika između prikaza: nema i vidljivosti: skriveni, razumljivi prikaz: blok, inline i linijski blok

Fotografiju Alexandru Acea na Unsplash-u

Svojstvo prikaza jedna je od najčešće korištenih značajki razvoja CSS-a. Naša web stranica svaki HTML element tretira kao okvir, a sa svojstvom prikaza određujemo kako će se ovi okviri prikazati ili ćemo ih prikazati ili sakriti.

Svojstvo prikaza određuje ponašanje prikaza (vrsta okvira za prikazivanje) elementa. - W3

Postoje različite vrijednosti svojstva prikaza. U ovom djelu ću pokriti sljedeće dijelove:

  • prikaz: nema nasuprot vidljivosti: skriveno
  • prikaz: blok
  • zaslon: inline
  • zaslon: linijski blok

Slobodno pogledajte ovaj potpuni popis vrijednosti prikaza.

Zaslon: Nijedna vs. Vidljivost: Skrivena

Elemente možemo sakriti deklariranjem zaslona: nijedna vrijednost. Drugi način je proglasiti vidljivost: skrivenu umjesto prikaza: nijednu, ali postoji razlika između njih.

Da bismo pokazali razliku, sakrijmo jedan od okvira ispod:

Prvo skrivam plavu kutiju (# kutija-2) s prikazom: nijednu

# kutija-2 {
  prikaz: nijedan;
  širina: 100px;
  visina: 100px;
  pozadina: plava;
}
Zaslon: nitko ne uklanja element iz pogleda

Naša plava kutija sada je uklonjena s pogleda. Ona zapravo i dalje postoji u strukturi HTML, ali s prikazom: nijedan se element ne ponaša kao da je u potpunosti izbrisan. Kao rezultat, zeleni okvir zauzima prazno mjesto i automatski se pomiče lijevo.

No vidljivost: skriven ne uklanja element u potpunosti. Jednostavno čini element nevidljivim:

# kutija-2 {
  širina: 100px;
  visina: 100px;
  pozadina: plava;
  vidljivost: skrivena;
}
Plava kutija je sada nevidljiva, ali još uvijek je tu

Blok vs Inline

Jeste li ikad primijetili da neke HTML oznake poput

,

,