CSS layout - display egenskap

display är den viktigaste CSS-egenskapen för att kontrollera layouten.

display-egenskapen

display egenskapen definierar om och hur elementet ska visas.

Varje HTML-element har en standard display-värde som beror på dess elementtyp. De flesta element har som standard display-värde block eller inline.

Klicka för att visa panelen

Detta panel innehåller ett <div>-element som är dolt som standard.（display: none

det är stylets sätt att sättas, och vi använder JavaScript för att visa det. (Ändra display: block

)

Block-element (block element)

Block-element börjar alltid på en ny rad och tar upp all tillgänglig bredd (sträcker sig så långt till vänster och höger som möjligt).

Detta <div>-element är ett block-element.

  • Några exempel på block-element:
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>

<section>

inline-element (inline element)

inline-element börjar inte på en ny rad och tar bara upp den nödvändiga bredden.Detta är en paragraf med.

Inline <span>-element

  • Några exempel på inline-element:
  • <span>
  • <a>

<img>

display: none; Display: none;

som standard används ofta tillsammans med JavaScript för att dölja och visa element utan att behöva ta bort och skapa dem igen. Om du vill veta hur du uppnår detta mål, se det sista exemplet på denna sida.<script> element använder display: none;.

Överskriv standard Display-värdet

Som nämnts tidigare har varje element en standard display-värde. Men, du kan överskriva det.

Att ändra en inline-element till en block-element och vice versa är mycket användbart för att göra sidan visa sig på ett specifikt sätt samtidigt som man följer webbstandarden.

Ett vanligt exempel är att skapa inlines för att uppnå horisontella menyer. <li> element:

exempel

li {
  display: inline;
}

Prova själv

Observera:att sätta elementets display-egenskap kommer bara att ändraelementets visningsstiloch förändrar inte elementets typ. Därför, med display: block; en inline-element tillåter inte att andra block-element innehålls i den.

Nedan visas ett exempel på hur <span>-elementet visas som en block-element:

exempel

span {
  display: block;
}

Prova själv

Nedan visas ett exempel på hur <a>-elementet visas som en block-element:

exempel

a {
  display: block;
}

Prova själv

Hur döljer man element - display: none eller visibility: hidden?

display: none

visibility: hidden

Återställ

genom att använda display egenskapen sätts till none Element kan döljas. Elementet kommer att vara dolt och sidan kommer att visa sig som om elementet inte finns där:

exempel

h1.hidden {
  display: none;
}

Prova själv

visibility: hidden; Element kan också döljas.

Men, elementet kommer fortfarande att ta upp samma utrymme som tidigare. Elementet kommer att vara dolt, men det kommer att påverka layouten:

exempel

h1.hidden {
  visibility: hidden;
}

Prova själv

Mer exempel

Skillnaden mellan display: none; och visibility: hidden;
Detta exempel visar display: none; VS visibility: hidden;
Kombinera CSS och JavaScript för att visa innehåll
Detta exempel visar hur man använder CSS och JavaScript för att visa element vid klick.

CSS Display/Visibility egenskaper

Egenskap Beskrivning
display Specificera hur elementet ska visas.
visibility Specificera om elementet bör vara synligt.