Šajā rakstā mēs apspriedīsim iekļauto bloku elementu īpašumu. Tas ir ļoti noderīgs CSS īpašums. Mēs to varam pielietot dažādiem tagiem. Tā ir daļa no CSS displeja īpašuma.
sarakstu kārtot pēc java
Lietošana:
display: inline-block
Lietojot iepriekš minēto rekvizītu, elements darbosies kā iekļauts un bloķēs tā pakārtotajiem elementiem. Sapratīsim iekļautos un bloka elementus.
Iekļautie elementi
Elementus, kas nesākas jaunā rindā, sauc par iekļautajiem elementiem. Tie ir apvienoti kā galvenā teksta daļa, nevis atsevišķa darbība. Šie elementi aizņem tikai nepieciešamo vietu. Iekļautajam elementam var pievienot atstarpes pa kreisi un pa labi, taču nevar pievienot augstumu iekļautā elementa augšējai vai apakšējai polsterējumam vai piemalei.
Iekļauto elementu piemērs:
Piemērs:
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 Izvade:
java vizualizētājs
Bloku elementi
Elementus, kas sākas jaunā rindā, sauc par bloka elementiem. Bloka elements iegūst visu šim saturam pieejamo platumu. Atšķirībā no iekļautās, šiem elementiem ir augšējā un apakšējā piemale. Bloka līmeņa elementi var parādīties tikai pamatteksta tagā. Bloka līmeņa elementi veido lielāku struktūru nekā iekļautie elementi.
Bloka elementu piemērs:
,
java aste
Piemērs:
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> Izvade:
java iterate karte
Iekļautie bloka elementi
Iekļautā bloka displeja vērtība darbojas līdzīgi kā iekļautā, ar vienu izņēmumu: šī elementa augstums un platums kļūst maināmi.
Piemērs:
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> Izvade:
Zemāk ir izvades fails, kurā izmantoti visi elementi vienā lapā:
Kods
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>