Forståelse af CSS-skærm: Ingen, Blok, Inline og Inline-Blok

En forklaring af forskellene mellem display: ingen og synlighed: skjult, forståelsesdisplay: blok, inline og inline-block

Foto af Alexandru Acea på Unsplash

Displayegenskapen er en af ​​de mest almindeligt anvendte funktioner i CSS-udvikling. Vores webside behandler hvert HTML-element som en boks, og med visningsegenskabet bestemmer vi, hvordan disse felter skal vises, eller om vi skal vise eller skjule dem.

Displayegenskapen specificerer visningsadfærden (typen af ​​gengivelsesboks) for et element. - W3

Der er forskellige værdier for visningsejendommen. Jeg vil dække følgende dele i dette stykke:

  • display: ingen vs. synlighed: skjult
  • display: blok
  • display: inline
  • display: inline-block

Se gerne denne komplette liste over visningsværdier.

Skærm: Ingen vs. Synlighed: Skjult

Vi kan skjule elementer ved at erklære en visning: ingen værdi. En anden måde er at erklære synlighed: skjult i stedet for visning: ingen, men der er en forskel mellem dem.

For at vise forskellen, lad os skjule en af ​​felterne nedenfor:

Først skjuler jeg den blå boks (# boks-2) med display: ingen

# boks-2 {
  display: ingen;
  bredde: 100px;
  højde: 100px;
  baggrund: blå;
}
Display: ingen fjerner et element fra visningen

Vores blå boks er nu fjernet fra visningen. Det findes faktisk stadig på HTML-strukturen, men med visning: intet opfører et element sig, som om det er helt slettet. Som et resultat tager den grønne boks det tomme sted og bevæger sig automatisk til venstre.

Synlighed: skjult fjerner ikke et element helt. Det gør bare elementet usynligt:

# boks-2 {
  bredde: 100px;
  højde: 100px;
  baggrund: blå;
  synlighed: skjult;
}
Den blå boks er usynlig nu, men den er stadig der

Blok mod Inline

Har du nogensinde bemærket, at nogle HTML-tags som

,

,