Cascading Style Sheets (CSS) är ett stilmallsspråk som används för att beskriva hur HTML- och XML-dokument presenteras visuellt. Med hjälp av CSS kan utvecklare styra och ändra stil, utseende och layout för element på webbsidor.
Till exempel kan utvecklare ändra teckensnitt, färger, bakgrunder, svävningseffekter och till och med göra sina webbsidor responsiva för att anpassa sig till olika skärmstorlekar och enheter. Dessutom tillåter CSS varumärken och utvecklare att enkelt skapa webbsidor som har konsekventa stilar som passar deras varumärkesfärger.
När du skapar ett HTML-dokument som standard kommer HTML-elementen att visas i exakt den ordning som de visas i källkoden. Detta kallas det normala flödet.
I ett normalt flöde, där layouten för HTML-element inte har ändrats, kan vi gruppera HTML-element i två grupper baserat på hur elementen visas på en sida.
Dessa grupper är inline-element och blockelement. Låt oss titta på dessa två grupper för att få en bättre förståelse för hur HTML-element visas.
För att följa med, skapa en ny mapp och skapa en index.html-fil och en app.css-fil i mappen. Du kan ge filerna ett valfritt namn. Tilläggen är dock .html respektive .css.
Öppna HTML-filen i en kodredigerare och klistra in följande kod:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Display Property</title> <link rel="stylesheet" href="https://wilku.top/which-css-display-style-is-best-for-you/app.css"> </head> <body> </body> </html>
Koden ovan länkar skapar en grundläggande HTML-kod eller mall där vi kan börja skapa webbsidor. Den länkar också index.html till app.css-filen så att vi kan ändra och kontrollera hur HTML-element visas med CSS.
All HTML-kod som presenteras senare i artikeln kommer att läggas till i
-taggarna. Vår CSS-fil kommer att vara tom i början.Innehållsförteckning
Blockelement
Blockelement är element som tar upp hela det tillgängliga horisontella utrymmet där de visas och skapar en ny linje före och efter elementet. Den tar också upp en vertikal höjd som motsvarar höjden på innehållet, vilket skapar block.
Några exempel på element på blocknivå inkluderar divs
, oordnade listor
- , ordnade listor
- och rubriker som
,
,
och så vidare.
Ett exempel på detta visas nedan:
<body> <h1>adminvista.com</h1> <p>adminvista.com is an online publication that produces high-quality articles on Technology, Business, and Fintech to help businesses and people grow. Some of the topics covered include:</p> <p>Some of the topics covered by adminvista.com include:</p> <ul> <li>Programming</li> <li>Cyber Security</li> <li>Digital Forensics</li> <li>Productivity</li> <li>Gaming</li> </ul> </body>När du öppnar HTML-dokumentet i en webbläsare och inspekterar sidan visas resultatet nedan:
Lägg märke till att
-elementet som innehåller rubriken adminvista.com tar upp hela det tillgängliga horisontella utrymmet, och stycket som kommer efter det skjuts till nästa rad. Så här beter sig blockelement.
Inline element
Inline-element är element som passar tillsammans med andra element på samma rad och bara tar upp så mycket bredd som behövs för att de ska visas. Inline-element börjar inte på en ny rad, och de trycker inte heller andra element till en ny rad.
Inline-element bryter inte innehållsflödet. De flyter i innehållet utan att skapa distinkta block. Några exempel på inline-element inkluderar spann , ankartaggar , ingångar och tid
, bland andra. Tänk på koden nedan, som modifierar vår tidigare kod så att den inkluderar inline-element:
<body> <h1>adminvista.com</h1> <p>adminvista.com <span>I AM A SPAN ELEMENT</span> is an online publication that produces high-quality articles on Technology, Business, and Fintech to help businesses and people grow. Some of the <a href="https://wilku.top/which-css-display-style-is-best-for-you/adminvista.com.com">topics</a> covered include:</p> <p>Some of the topics covered by adminvista.com include:</p> <ul> <li>Programming</li> <li>Cyber Security</li> <li>Digital Forensics</li> <li>Productivity</li> <li>Gaming</li> </ul> </body>Resultatet av att inspektera den nya HTML-sidan visas nedan:
Lägg märke till hur -elementet passar i samma linje med annat innehåll utan att bryta innehållsflödet på sidan. Så här beter sig inline-element.
Visa egendom
Som vi just har sett är HTML-element som standard antingen blockelement eller inline-element, vilket avgör hur de visas och vilken inverkan de har på det normala innehållsflödet i ett HTML-dokument.
Som webbutvecklare kanske du vill ändra detta standardbeteende i HTML-element. Det vill säga ha ett element som som standard är ett blockelement behandlas som ett inline-element eller vice versa. Till exempel kanske du vill att en h1, som som standard är ett blockelement, ska vara ett inline-element, eller en , som som standard är inline, ska vara ett blockelement.
För att ändra standardbeteendet för block och inline-element använder vi egenskapen display. Display-egenskapen är en CSS-egenskap som låter dig ändra eller ställa in om ett element ska behandlas som ett inline-element eller ett blockelement.
Med hjälp av egenskapen display kan du ändra ett element som som standard är ett blockelement till ett inline-element och vice versa.
För att se detta i praktiken, lägg till följande kod i CSS-filen du skapade och uppdatera HTML-sidan i webbläsaren.
h1 { display: inline; background-color: paleturquoise; } p { display: inline; background-color: palevioletred; } span { display: block; background-color: darkolivegreen; } ul { background-color: yellow; }Koden ovan använder egenskapen display för att ändra
– och
-elementen, som är standardblockelement, till inline. Det ändrar också -elementet, som som standard är infogat till att blockera, och lägger till olika bakgrundsfärger till elementen för enkel åtskillnad. Det slutliga HTML-dokumentet, efter att ha gjort ändringar i vår CSS-fil, visas nedan:
Lägg märke till att
-elementet, som ockuperade ett helt block tidigare, nu delar samma linje med
-elementet, som också ockuperade ett helt block. Spännelementet med en bakgrundsfärg av olivgrönt upptar nu ett helt block även om dess standardbeteende är att passa i samma linje med andra element.
Viktig skillnad mellan inline- och blockelement
Förutom deras inverkan på det normala innehållsflödet på en sida. Det finns en annan viktig skillnad mellan inline- och blockelement.
Med inline-element, om elementet har en bredd- och/eller en höjdegenskap, kommer egenskaperna att ignoreras. Därför kan du inte ändra bredden eller höjden på ett inline-element.
Dessutom, om du lägger till en marginal till ett inline-element, kommer marginalen endast att respekteras horisontellt. Den vertikala marginalen på ett inline-element ignoreras.
Om du lägger till utfyllnad till ett inline-element, respekteras det endast horisontellt. Så mycket som vaddering också kommer att dyka upp vertikalt, kommer det inte att respekteras av resten av elementen. Därför kommer utfyllnaden inte att störa resten av innehållet ovanför eller under inline-elementet.
För att se detta i praktiken, radera eller kommentera all kod i CSS-filen och lägg till följande kod:
span { height: 500px; width: 400px; margin: 20px; background-color: darkolivegreen; } a { padding: 20px; border: 1px solid black; }Den resulterande HTML-sidan visas nedan:
Lägg märke till att så mycket som -elementet hade en höjd- och en bredd-egenskap, har dess höjd och bredd inte ändrats. Dessutom tillämpas marginalen som läggs till på alla sidor i -elementet endast horisontellt.
Med blockelement respekteras egenskaperna för bredd och höjd. Marginal och stoppning som appliceras på blockelement respekteras också och träder i kraft i alla riktningar.
För att se detta i praktiken, lägg till följande kod till den befintliga CSS-filen:
h1 { height: 50px; width: 200px; border: 1px solid black; padding: 50px; margin: 35px; background-color: aquamarine; }Den resulterande HTML-koden visas nedan:
Lägg märke till att bredden, höjden, marginalen och stoppningen som lades till h1, ett blockelement, har respekterats i alla riktningar.
Från skillnaden i hur bredd, höjd, marginal och utfyllnad tillämpas på inline- och blockelement, får vi ett tredje visningsvärde som kan användas med display-egenskapen för att ändra hur element visas. Detta är inline-block.
Inline-block element
Ett inline-block-element beter sig som ett inline-element; det vill säga att den passar tillsammans med andra element i samma linje utan att skjuta element till en annan linje. Men till skillnad från inline-element, respekteras bredden, höjden, marginalen och stoppningen av inline-blockelement.
Därför skulle du använda visningsalternativet inline-block när du vill att ett element ska bete sig som ett inline-element men ändå låter dig lägga till bredd, höjd, marginal och utfyllnad som kommer att tillämpas på elementet som om det vore ett block element. Det vill säga att egenskaperna kommer att tillämpas och respekteras i alla riktningar.
För att se detta i praktiken, radera eller kommentera all kod i CSS-filen och lägg till följande kod:
span { display: inline-block; background-color: darkolivegreen; height: 50px; width: 200px; margin: 10px; padding: 10px; border: 1px solid black; }CSS-koden ovan ställer in display-egenskapen för till inline-block. är ett inline-element som standard. Koden lägger sedan till en bredd, höjd, marginal och utfyllnad till -elementet. Resultatet visas nedan:
Lägg märke till att bredden, höjden, marginalen och utfyllnaden som har lagts till i -elementet har respekterats, och span-elementet visas fortfarande som ett inline-element.
Så här beter sig inline-block-element. Tidigare försökte vi lägga till samma egenskaper till -elementet, men de respekterades inte eftersom var ett inline-element vid den tiden.
Inline vs. Inline-Block
Skillnaderna mellan inline och inline-block visas nedan:
KänneteckenInlineInline-BlockVisningsbeteendeDen påverkas av line-height-egenskapen.Respektera horisontella marginaler och utfyllnad.Bredd och höjdIgnorerar egenskaperna för bredd och höjd.Respekterar egenskaperna för bredd och höjd.Marginer och utfyllnadIgnorerar horisontella marginaler och utfyllnad.Flöden inom innehållet startar inte på en ny line.Line heightPåverkas av line-height-egenskapen.Den påverkas av line-height-egenskapen. Horisontell layoutIgnorerar egenskaperna för textjustering och textjustering. Svarar på egenskaper för textjustering och textjustering.
Som du kan se skiljer sig inline- och inline-block-element i hur vissa CSS-egenskaper beter sig när de appliceras på dem.
När ska man använda Inline och Inline-Block
Som utvecklare kan du använda inline-alternativet när du vill att ditt HTML-innehåll ska flöda inom samma rad utan att orsaka radbrytningar. Till exempel, när du arbetar med inline-textnivåelement som , och , är det vettigt att använda inline-alternativet, vilket är deras standardbeteende.
Å andra sidan, använd inline-block när du vill att ett element ska bete sig som ett blockelement men ändå flyta inom innehållet utan att orsaka radbrytningar och trycka resten av innehållet till nya rader. Det vill säga, använd inline-block om du vill ha kontroll över ett elements bredd, höjd, marginal och utfyllnadsegenskaper men ändå att elementet ska vara en del av inlineflödet.
Slutsats
CSS har inline-, block- och inline-visningsalternativ, som kan användas för att ändra eller styra hur element visas på en webbsida. Vi använder egenskapen display för att ställa in ett element att vara inline, block eller inline-block.
Som webbutvecklare är det viktigt att förstå skillnaden mellan inline-, block- och inline-blockelement. Använd artikeln för att bekanta dig med dem och börja använda visningsegenskapen i dina projekt för att få mer övning.
Därefter kan du också utforska några CSS Grid Generatorer för att bygga komplexa layouter visuellt.
- , listobjekt