Šiame straipsnyje aptarsime eilutinio bloko elementų ypatybes. Tai labai naudinga CSS savybė. Galime pritaikyti įvairioms žymoms. Tai yra CSS rodymo nuosavybės dalis.
JAV miesto pavadinimas
Naudojimas:
display: inline-block
Taikant pirmiau nurodytą ypatybę, elementas veiks kaip įterptasis ir blokuojamas antriniams elementams. Supraskime įterptuosius ir blokinius elementus.
Įterpti elementai
Elementai, kurie neprasideda naujoje eilutėje, yra žinomi kaip įterptieji elementai. Jie sujungiami kaip pagrindinio teksto dalis, o ne kaip atskiras veiksmas. Šie elementai užima tik reikiamą erdvę. Tarpai kairėje ir dešinėje gali būti pridėti prie įterptinio elemento, bet negalima pridėti aukščio į viršutinį ar apatinį užpildymo elementą arba paraštę.
Įterptinių elementų pavyzdys:
Pavyzdys:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag Išvestis:
ištrinti failą java
Blokuoti elementai
Elementai, prasidedantys nauja linija, yra žinomi kaip blokiniai elementai. Bloko elementas įgauna visą to turinio plotį. Skirtingai nei įterptoji, šiems elementams yra viršutinė ir apatinė paraštė. Bloko lygio elementai gali būti rodomi tik turinio žymoje. Bloko lygio elementai sukuria didesnę struktūrą nei eilutiniai elementai.
Bloko elementų pavyzdys:
,
„Java“ masyvo sąrašo rūšiavimas
Pavyzdys:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> Išvestis:
Eilutiniai bloko elementai
Inline-block rodymo reikšmė veikia panašiai kaip įterptoji, išskyrus vieną išimtį: to elemento aukštis ir plotis tampa keičiami.
Pavyzdys:
prižiūrimas mašininis mokymasis
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> Išvestis:
Žemiau pateikiamas išvesties failas, naudojant visus elementus viename puslapyje:
Kodas
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>