CSS asettelu - display ominaisuus

Display ominaisuus on tärkein CSS-ominaisuus, joka käsittelee asettelua.

display-ominaisuus

Display määrittää, näytetäänkö elementti ja kuinka sitä näytetään.

Jokaisella HTML-elementillä on oletusarvoinen display-arvo, joka riippuu sen elementtipästä. Suurin osa elementeistä on oletusarvoisena display-arvona block tai inlineElementti käyttää

Napsauta näyttääksesi paneelin

Tämä paneeli sisältää yhden <div>-elementin, joka on oletuksena piilotettu.（display: ei näy

Se määritellään CSS-tyyleillä, ja me käytämme JavaScriptiä näyttääksemme sen. (Vaihda display: näkyvä

)

Lohko-elementit (lohko-elementti)

Lohko-elementit alkavat aina uudesta rivistä ja vievät koko käytettävissä olevan leveyden (tavoitellen mahdollisimman paljon vasemmalle ja oikealle).

Tämä <div>-elementti on lohko-elementti.

  • Joitakin lohko-elementtien esimerkkejä:
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>

<section>

Rivinvaihdottomat elementit (rivinvaihdoton elementti)

Sisäänrakennetut elementit eivät aloita uutta riviä, vaan käyttävät vain tarvittavan leveyden.Tämä on kappaleessaElementti käyttää

Rivinvaihdoton <span>-elementti

  • Rivinvaihdottomien elementtien joitakin esimerkkejä:
  • <span>
  • <a>

<img>

display: ei näy; Display: ei näy;

Yleensä käytetään JavaScriptin kanssa piilottamaan ja näyttämään elementtejä ilman, että niitä poistetaan ja luodaan uudelleen. Jos haluat tietää, miten tämä voidaan tehdä, katso viimeinen esimerkki tällä sivulla.Oletusarvoisesti <script> display: ei näy;Elementti käyttää

。

Ylitä oletusarvo Display-arvon

Kuten edellä mainittiin, jokaisella elementillä on oletusarvo display-arvo. Voit kuitenkin ylittää sen.

muuttaa rivivaihdottomaa elementtiä lohko-elementiksi ja päinvastoin, mikä on hyödyllistä, kun halutaan, että sivu näyttää tietyllä tavalla samalla kun se noudattaa Web-standardeja. Yksi yleisimmistä esimerkeistä on luoda <li>

esimerkki

Elementti:
  li {
{}

Kokeile itse

display: rivinvaihdoton;Huomioi:Asettamalla elementin display-ominaisuus muuttaa vainNäyttötila display: näkyvä; Rivinvaihdot eivät ole sallittuja sisällä. Ne eivät muuta elementin tyyppiä. Siksi, elementin

Seuraavassa esimerkissä <span>-elementti näytetään lohko-elementtinä:

esimerkki

span {
  display: näkyvä;
{}

Kokeile itse

Seuraavassa esimerkissä <a>-elementti näytetään lohko-elementtinä:

esimerkki

a {
  display: näkyvä;
{}

Kokeile itse

Piilotetaanko elementti - display: ei näy vai visibility: piilotettu?

display: ei näy

visibility: piilotettu

Nollaa

asettamalla Display ominaisuus asetettu ei näy Elementti voidaan piilottaa. Sivu näyttää siltä, kuin elementtiä ei olisi siinä:

esimerkki

h1.piilotettu {
  display: ei näy;
{}

Kokeile itse

visibility: piilotettu; Elementti voidaan myös piilottaa.

Kuitenkin, elementti käyttää edelleen samaa tilaa kuin aikaisemmin. Elementti piilotetaan, mutta se vaikuttaa silti sijoitukseen:

esimerkki

h1.piilotettu {
  visibility: hidden;
{}

Kokeile itse

Lisää esimerkkejä

display: none; ja visibility: hidden; välillä olevat erot
Tämä esimerkki näyttää display: none; VS visibility: hidden;.
CSS:n ja JavaScript:n yhdistelmä sisällön näyttämiseen
Tämä esimerkki näyttää, miten CSS:ää ja JavaScript:ää käytetään elementin näyttämiseen napsautettuna.

CSS Display/Visibility-ominaisuudet

Ominaisuus Kuvaus
Display Määritetään, miten elementti näytetään.
Visibility Määritetäänkö elementin näkyvyys.