CSS layout - display egenskab

display Egenskaben er den vigtigste CSS-egenskab til kontrol af layout.

display-egenskab

display Egenskaben bestemmer, om/hvordan elementet skal vises.

Hver HTML-element har en standard display-værdi, der afhænger af elementets type. De fleste elementers standard display-værdi er block eller inline.

Klik for at vise panelet

Dette panel indeholder et <div>-element, som som standard er skjult.（display: none

Det styles med CSS, og vi bruger JavaScript til at vise det. (Ændr til display: block

)

Blokkelementer (block element)

Blokkelementer starter altid en ny linje og optager hele tilgængelige bredde (så meget som muligt ud til venstre og højre).

Dette <div>-element er et blokkelement.

  • Nogle eksempler på blokkelementer:
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>

<section>

Indrykkede elementer (inline element)

Indrykkede elementer starter ikke en ny linje og optager kun den nødvendige bredde.Dette er en paragraf.

Indrykket <span>-element

  • Nogle eksempler på indrykkede elementer:
  • <span>
  • <a>

<img>

display: none; Display: none;

Som standard bruges de sammen med JavaScript til at skjule og vise elementer uden at skulle slette og oprette dem igen. Hvis du vil vide, hvordan du opnår dette mål, se sidste eksempel på denne side.<script> Elementer bruger display: none;.

Overskriv standard Display-værdi

Som nævnt tidligere har hver element en standard display-værdi. Men du kan overrive den.

At ændre indrykkede elementer til blokkelementer og omvendt, er meget nyttigt til at få siden til at se ud på en bestemt måde, samtidig med at man følger webstandarder.

En almindelig anvendelse er at generere indrykkede <li> Elementer:

eksempel

li {
  display: inline;
}

Prøv det selv

Bemærk:At sætte elementets display-egenskab ændrer kunelementets visningog ændrer ikke elementets type. Derfor, med display: block; Indrykkede elementer tillader ikke at indeholde andre blokkelementer.

Følgende eksempel viser <span>-elementet som et blokkelement:

eksempel

span {
  display: block;
}

Prøv det selv

Følgende eksempel viser <a>-elementet som et blokkelement:

eksempel

a {
  display: block;
}

Prøv det selv

Hvad er forskellen på at skjule et element - display: none eller visibility: hidden?

display: none

visibility: hidden

Reset

ved at bruge display Egenskaben sættes til none Elementet kan skjules. Elementet vil blive skjult, og siden vil vises som om elementet ikke er der:

eksempel

h1.gemt {
  display: none;
}

Prøv det selv

visibility: hidden; Elementet kan også skjules.

Men, elementet vil stadig bruge det samme rum som tidligere. Elementet vil blive skjult, men det vil stadig påvirke layoutet:

eksempel

h1.gemt {
  visibility: hidden;
}

Prøv det selv

Flere eksempler

Forskellen mellem display: none; og visibility: hidden;
Dette eksempel viser forskellen mellem display: none; og visibility: hidden;
Kombiner CSS og JavaScript til at vise indhold
Dette eksempel viser, hvordan man bruger CSS og JavaScript til at vise elementer ved klik.

CSS Display/Visibility egenskaber

Egenskab Beskrivelse
display Specificer hvordan elementet skal vises.
visibility Specificer om elementet skal være synligt eller ej.