Block, inline ja inline-block
Ymmärrätte block-, inline- ja inline-block-näyttötilojen erot.
Block, inline ja inline-block on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
display-ominaisuus
display-ominaisuus on yksi CSS:n tärkeimmistä ominaisuuksista. Se määrittää, miten elementti osallistuu asettelun kulkuun: luoko se lohkotason laatikon, inline-laatikon vai jotain siltä väliltä.
Lohkoelementit
Lohkoelementit alkavat uudelta riviltä ja venyvät täyttämään säilönsä koko leveyden. Voit määrittää niille leveyden, korkeuden, marginin ja paddingin kaikille sivuille.
Oletusarvoisia lohkoelementtejä ovat div, p, h1-h6, section ja article.
<div>I'm a block element — full width, centered.</div>
Inline-elementit
Inline-elementit sijoittuvat tekstin sekaan. Ne eivät aloita uutta riviä. width- tai height-arvon määrittämisellä ei ole vaikutusta. Ylä- ja alamarginit ohitetaan, mutta vaakasuuntaiset marginit ja padding toimivat.
Oletusarvoisia inline-elementtejä ovat span, a, strong, em ja img.
<p>This is <span>an inline span</span> inside a paragraph.</p>
Inline-block-elementit
display: inline-block on yhdistelmä. Elementit sijoittuvat inline-tyyliin ilman pakotettua rivinvaihtoa, mutta tukevat leveyttä, korkeutta ja kaikkia box-mallin ominaisuuksia lohkoelementtien tapaan.
<a class="btn" href="#">Click Me</a>
Inline-block navigoinnissa
Ennen Flexboxia inline-block-arvoa käytettiin vaakasuuntaisiin navigointipalkkeihin. Haittapuolena on, että HTML-lähdekoodin välilyönnit luovat kohteiden väliin pieniä aukkoja.
<ul><li>Home</li><li>About</li><li>Contact</li></ul>
Inline-välin poistaminen
Inline-block-elementtien väliin jäävän aukon voi poistaa määrittämällä vanhemmalle font-size: 0 ja palauttamalla fonttikoon lapsielementeissä tai poistamalla välilyönnit HTML:stä.
<ul><li>One</li><li>Two</li><li>Three</li></ul>
Inline-blockin korvaaminen Flexillä
Modernissa CSS:ssä vanhemman display: flex on suositeltu tapa toteuttaa vaakasuuntaiset asettelut ilman välilyönneistä johtuvia ongelmia. inline-block on edelleen hyödyllinen yksittäisen elementin mitoituksessa.
Display-tyypin muuttaminen
Minkä tahansa elementin display-tyypin voi muuttaa CSS:llä. Tätä käytetään usein linkkien muotoilemiseen painikkeiden kaltaisiksi tai luettelokohteiden asettamiseen vaakasuuntaan.
<a class="button" href="#">Button</a>
<ul><li>Item 1</li><li>Item 2</li></ul>
Table-display-arvot
CSS tarjoaa arvot display: table, display: table-row, display: table-cell ja niin edelleen, jotta taulukkoasettelu voidaan ottaa käyttöön muissa kuin taulukkoelementeissä. Niitä tarvitaan nykyään harvoin, mutta niistä on hyötyä pystysuuntaisessa keskittämisessä vanhemmissa ympäristöissä.
Flow root: display: flow-root
display: flow-root luo uuden lohkon muotoilukontekstin ilman overflow: hidden-arvon sivuvaikutuksia. Se tyhjentää floatit ja estää margincollapse-ilmiön vuotamisen säilön ulkopuolelle.
<div class="clearfix">Contains floated children without collapsing.</div>
Anonyymit laatikot
Kun lohko- ja inline-elementtejä on sisaruksina sekaisin, selain käärii irrallisen inline-sisällön anonyymeihin lohkolaatikoihin. Tämä toiminta ei näy suoraan, mutta se selittää odottamattomia muutoksia asettelussa.
Pikatarkistus
Mikä display-arvo mahdollistaa width-arvon määrittämisen ja pitää elementin samalla inline-virrassa?
Kertaus
Lohkoelementit täyttävät koko leveyden ja alkavat uudelta riviltä. Inline-elementit sijoittuvat tekstin sekaan ja ohittavat width- ja height-arvot. Inline-block yhdistää molemmat: se sijoittuu inline-virtaan, mutta sille voi määrittää leveyden ja korkeuden. Nykyaikaisissa asetteluissa Flexbox ja Grid ovat suositeltavampia kuin inline-block-ruudukot.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Block, inline ja inline-block” ilmainen?
Kyllä – oppitunnin ”Block, inline ja inline-block” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Block, inline ja inline-block”?
Ymmärrätte block-, inline- ja inline-block-näyttötilojen erot. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Block, inline ja inline-block”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Block, inline ja inline-block
- Visibility ja display: none
- Overflow: scroll, clip ja auto
- CSS Reset ja Normalize