Jokainen verkkosivun elementti on suorakulmainen laatikko. CSS: n näyttöominaisuus määrittää, kuinka suorakulmainen ruutu käyttäytyy. Yleisesti käytettyjä arvoja on vain muutama:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Kaikkien elementtien oletusarvo on linjassa. Useimmat "User Agent -tyylitaulukot" (oletustyylit, joita selain soveltaa kaikkiin sivustoihin) palauttaa monet elementit "estämään". Käydään läpi nämä kaikki ja käsitellään sitten joitain muita vähemmän yleisiä arvoja.
Linjassa
Elementtien oletusarvo. Ajattele elementtejä, kuten , tai ja kuinka tekstin kääriminen niihin elementteihin tekstijonossa ei riko tekstin kulkua.
Elementti on 1px punainen reunus. Huomaa, että se on oikeassa linjassa muun tekstin kanssa.
Sisäinen elementti hyväksyy marginaalin ja täytteen, mutta elementti on silti linjassa, kuten voit odottaa. Reuna ja pehmuste työntävät muita elementtejä vain vaakasuoraan, ei pystysuunnassa.
Sisäinen elementti ei hyväksy heightja width. Se vain jättää sen huomiotta.
Sisäinen esto
Elementiksi asetettu inline-blockon hyvin samanlainen kuin inline siinä mielessä, että se asetetaan linjassa tekstin luonnollisen kulun kanssa ("perusviivalla"). Erona on, että pystyt asettamaan a-arvon widthja heightjota noudatetaan.
Lohko
blockSelaimen UA-tyylitaulukko asettaa useita elementtejä . Ne ovat yleensä kontti elementtejä, kuten , ja
. Teksti myös "estää" kuten
ja
. Lohkotason elementit eivät istu linjassa, vaan rikkovat niiden ohi. Oletuksena (ilman leveyttä) ne vievät niin paljon vaakasuoraa tilaa kuin pystyvät.
Kaksi elementtiä, joilla on punaiset reunat, ovat
s jotka ovat lohkotason elementtejä. Niiden välissä oleva elementti ei istu linjassa, koska lohkot hajoavat inline-elementtien alapuolelle.
Sisäänkäynti
Ensinnäkin tämä ominaisuus ei toimi Firefoxissa. Sana on, että sen teknisiä tietoja ei ole määritelty riittävän tarkasti. Aloittaaksesi sen ymmärtämisen, se on kuin jos haluat otsikkoelementin istuvan linjassa sen alla olevan tekstin kanssa. Kelluva se ei toimi eikä mikään muu, koska et halua otsikon olevan sen alapuolella olevan tekstielementin lapsi, haluat sen olevan oma itsenäinen elementtinsä. "Tukevissa" selaimissa se on seuraava:
Älä kuitenkaan luota siihen.
Flexbox
displayOmaisuus käytetään myös uusien fangled ulkoasu menetelmiä kuten flexboxiin.
.header ( display: flex; )
Flexbox-syntaksissa on joitain vanhempia versioita, joten tutustu tähän artikkeliin syntaksiin, kun käytät flexboxia parhaan selaintuen kanssa. Muista lukea tämä Flexboxin täydellinen opas.
Virtausjuuri
flow-rootNäyttöarvo luo uuden ”block alustuksen yhteydessä”, mutta on muuten kuin block. Uusi BFC auttaa asioissa, kuten kellukkeiden tyhjentämisessä, mikä poistaa hakkeroiden tarpeen.
.group ( display: flow-root; )
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
Kromi
Firefox
IE
Reuna
Safari
58
53
Ei
79
13
Matkapuhelin / tabletti
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Ruudukko
Näyttöominaisuus asettaa aluksi myös ruudukon asettelun.
body ( display: grid; )
Tässä on ruudukon asetteluopas, joka sisältää selaimen tukikaavion.
Ei mitään
Poistaa elementin kokonaan sivulta. Huomaa, että vaikka elementti on edelleen DOM: ssa, se poistetaan visuaalisesti ja muulla mahdollisella tavalla (et voi valita sitä tai sen lapsia, näytönlukijat jättävät sen huomiotta jne.).
Taulukon arvot
On olemassa joukko näyttöarvoja, jotka pakottavat muut kuin taulukkoelementit toimimaan kuten taulukkoelementit, jos tarvitset sitä. Se on harvinaista, mutta joskus se antaa sinun olla "semanttisempi" koodisi kanssa samalla kun käytetään taulukoiden ainutlaatuisia paikannusvoimia.
