CSS näyttö ominaisuus

Määrittely ja käyttö

display-ominaisuus määrittelee, minkä tyyppisen näyttökasin laidan elementti luo.

Kuvaus

Tämä ominaisuus käytetään määrittämään, minkä tyyppisen näyttökasin laidan elementti luo rakentamisen aikana. HTML-yksiköille, jos display-ominaisuutta käytetään huonosti, se voi olla vaarallista, koska se voi rikkoa HTML:ssä jo määritetyn näyttöjärjestyksen. XML:lle, koska XML:llä ei ole sisäänrakennettua tällaista järjestystä, display on ehdottoman välttämätön.

Huomautus:CSS2:ssa oli arvot compact ja marker, mutta koska ne eivät ole laajasti tuettuja, ne on poistettu CSS2.1:stä.

Katso myös:

CSS-opetusohjelma:CSS-sijainti

HTML DOM -viittauskirja:display-ominaisuus

Esimerkki

Luo sisäinen kehys kohdalle:

p.inline
  {
  display:inline;
  }

Kokeile itse

CSS-grammatiikka

display: value;

Atribuuttiarvo

Arvo Kuvaus
none Tämä elementti ei näytetä.
block Tämä elementti näytetään blokkinä, ja sen eteen ja jälkeen on rivinvaihto.
inline Oletus. Tämä elementti näytetään inline-elementtinä, eikä sen eteen tai jälkeen ole rivinvaihtoa.
inline-block Sisäinen blokkinen elementti (CSS2.1:ssä lisätty arvo).
list-item Tämä elementti näytetään listana.
run-in Tämä elementti näytetään blokkinä tai inline-elementtinä kontekstin mukaan.
compact CSS:ssä on arvo compact, mutta koska se ei ole laajasti tuettu, se on poistettu CSS2.1:stä.
marker CSS:ssa on arvo marker, mutta koska se ei ole laajasti tuettu, se on poistettu CSS2.1:stä.
table Tämä elementti näytetään lohkotaulukkona (samankaltainen kuin <table>), taulukon ympärillä on rivinvaihto.
inline-table Tämä elementti näytetään sisätaulukkona (samankaltainen kuin <table>), ilman rivinvaihtoa taulukon ympärillä.
table-row-group Tämä elementti näytetään yhtenä tai useampina riviyhteytenä (samankaltainen kuin <tbody>)
table-header-group Tämä elementti näytetään yhtenä tai useampina riviyhteytenä (samankaltainen kuin <thead>)
table-footer-group Tämä elementti näytetään yhtenä tai useampina riviyhteytenä (samankaltainen kuin <tfoot>)
table-row Tämä elementti näytetään taulukon rivinä (samankaltainen kuin <tr>)
table-column-group Tämä elementti näytetään yhtenä tai useampina sarakeyhteytenä (samankaltainen kuin <colgroup>)
table-column Tämä elementti näytetään taulukon sarakkeena (samankaltainen kuin <col>)
table-cell Tämä elementti näytetään taulukon soluna (samankaltainen kuin <td> ja <th>)
table-caption Tämä elementti näytetään taulukon otsikkona (samankaltainen kuin <caption>)
inherit Määritellään, että display-ominaisuuden arvo tulisi perittää vanhemmalta elementiltä.

Tekninen yksityiskohta

Oletusarvo: inline
Perinnäisyys: ei
Versio: CSS1
JavaScript-kieli: objekti.style.display="inline"

TIY-esimerkki

Miten elementti näytetään sisätekstinä
Tämä esimerkki näyttää, miten elementti näytetään sisätekstinä.
Miten elementti näytetään lohkotekstina
Tämä esimerkki näyttää, miten elementti näytetään lohkotekstina.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee täysin kyseistä ominaisuutta.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Huomautus:Jos on määritelty !DOCTYPE, Internet Explorer 8 (ja uudet versiot) tukee ominaisuusarvoja "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" ja "inherit".