Ebben a cikkben a soron belüli blokkelemek tulajdonságait tárgyaljuk. Nagyon hasznos tulajdonsága a CSS-nek. Különféle címkékre alkalmazhatjuk. A CSS megjelenítési tulajdonságának része.
próbáld elkapni a java-t
Használat:
display: inline-block
A fenti tulajdonság alkalmazásával az elem soron belüliként és blokkként fog viselkedni a gyermekelemei számára. Értsük meg az inline és block elemeket.
Beépített elemek
Azokat az elemeket, amelyek nem kezdődnek új sorban, soron belüli elemeknek nevezzük. A főszöveg részeként vannak kombinálva, nem pedig külön műveletként. Ezek az elemek csak a szükséges helyet foglalják el. A bal és jobb oldali szóközök hozzáadhatók egy soros elemhez, de nem adható hozzá magasság a beágyazott elem felső vagy alsó kitöltéséhez vagy margójához.
Példa a soron belüli elemekre:
Példa:
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 Kimenet:
java a karaktert karakterláncba öntötte
Blokk elemek
Az új sorban kezdődő elemeket blokkelemeknek nevezzük. Egy blokk elem felveszi az adott tartalomhoz rendelkezésre álló teljes szélességet. Az inline-től eltérően ezekhez az elemekhez létezik felső és alsó margó. A blokkszintű elemek csak a törzscímkén belül jelenhetnek meg. A blokkszintű elemek nagyobb struktúrát hoznak létre, mint a beépített elemek.
Példa blokkelemekre:
,
adatszerkezetek java-ban
Példa:
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> Kimenet:
Soron belüli blokkelemek
Az inline-block megjelenítési értéke hasonlóan működik, mint az inline, egy kivétellel: az adott elem magassága és szélessége módosíthatóvá válik.
Példa:
java összehasonlító módszer
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> Kimenet:
Alább látható a kimeneti fájl, amely az összes elemet tartalmazza egy oldalon:
Kód
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>