CSS -uitleg - Die vertooneiendom
Die displayeiendom is die belangrikste CSS-eiendom vir die beheer van uitleg.
Die vertoon Eiendom
Die displayeienskap spesifiseer of/hoe 'n element vertoon word.
Elke HTML-element het 'n verstek vertoonwaarde, afhangende van watter tipe element dit is. Die verstek vertoonwaarde vir die meeste elemente is blockof
inline.
Klik om paneel te wys
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Blokvlak-elemente
'n Blokvlak-element begin altyd op 'n nuwe lyn en neem die volle breedte wat beskikbaar is op (strek uit na links en regs so ver as wat dit kan).
Voorbeelde van blokvlakelemente:
- <div>
- <h1> - <h6>
- <p>
- <vorm>
- <header>
- <voetskrif>
- <afdeling>
Inlyn elemente
'n Inlyn-element begin nie op 'n nuwe lyn nie en neem net soveel breedte op as wat nodig is.
Dit is ' n inlyn <span> element binne 'n paragraaf.
Voorbeelde van inlyn-elemente:
- <span>
- <a>
- <img>
Vertoon: geen;
display: none;word algemeen saam met JavaScript gebruik om elemente te versteek en te wys sonder om dit uit te vee en te herskep. Kyk na ons laaste voorbeeld op hierdie bladsy as jy wil weet hoe dit bereik kan word.
Die <script>element gebruik display: none;
as verstek.
Ignoreer die verstek vertoonwaarde
Soos genoem, het elke element 'n verstek vertoonwaarde. U kan dit egter ignoreer.
Om 'n inlyn-element na 'n blokelement te verander, of omgekeerd, kan nuttig wees om die bladsy op 'n spesifieke manier te laat lyk, en steeds die webstandaarde te volg.
'n Algemene voorbeeld is om inlyn- <li>elemente vir horisontale spyskaarte te maak:
Voorbeeld
li {
display: inline;
}
Let wel: Die stel van die vertoon-eienskap van 'n element verander net hoe die element vertoon word , NIE watter soort element dit is nie. Dus, 'n inlyn-element met display: block;word nie toegelaat om ander blokelemente daarin te hê nie.
Die volgende voorbeeld vertoon <span>-elemente as blokelemente:
Voorbeeld
span {
display: block;
}
Die volgende voorbeeld vertoon <a>-elemente as blokelemente:
Voorbeeld
a {
display: block;
}
Versteek 'n element - vertoon:geen of sigbaarheid:versteek?
display:none
visibility:hidden
Stel terug
Om 'n element te versteek kan gedoen word deur die displayeiendom op te
stel none. Die element sal versteek word, en die bladsy sal vertoon word asof die element nie daar is nie:
Voorbeeld
h1.hidden {
display: none;
}
visibility:hidden; verberg ook 'n element.
Die element sal egter steeds dieselfde spasie as voorheen inneem. Die element sal versteek word, maar beïnvloed steeds die uitleg:
Voorbeeld
h1.hidden {
visibility: hidden;
}
Meer voorbeelde
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |