, etc.
Inline elementer
I modsætning til et blokelement ombryder et inline-element ikke ny linje, men er placeret på samme linje som det forrige element. Sådanne elementer er normalt placeret inde i blokelementer, og deres bredde afhænger kun af indholdet og CSS-indstillinger. En anden forskel mellem et inline-element og et blokelement er, at det kun kan indeholde indhold og andre inline-elementer. Blokelementer kan ikke indlejres i inline-elementer.
Eksempler på inline-elementer: , , , , ![]()
etc.
Bemærk: I HTML5 spiller rækkefølgen, som tags er indlejret i, ikke en sådan rolle. Elementer er ikke længere blot opdelt i blok og inline, men er grupperet efter mening og formål, der repræsenterer indholdskategorier.
CSS-visningsegenskab: Ændring af elementtype
Ved hjælp af ekstremt nyttige egenskaber visning i CSS kan få et blokelement til at fremstå som et inline-element og omvendt. For at et blokelement skal opføre sig som et inline-element (dvs. ikke skal oversættes til en ny linje), skal du skrive en regel for det:
Display: inline;
Hvis du vil vise et inline-element som et blokelement (så der er et linjeskift før og efter elementet), skal du skrive følgende:
Display: blok;
Handling (display:inline) og (display:blok)
Du kan også lave en "hybrid" - et blokelement med opførsel som et element med små bogstaver. I dette tilfælde vil alt indholdet af sådanne blokelementer blive vist som sædvanligt, men blokkene vil opføre sig som inline-elementer, idet de står på linje på en linje efter hinanden og kun vikles ind på en ny linje, når det er nødvendigt. Kollapsende margen i sådanne tilfælde ophører med at virke. For at omdanne et element til et bloklinjeelement skal du skrive:
Display: inline-blok;
Handling (display:inline-blok)
Yderligere i vejledningen: CSS grænseegenskab. Du lærer, hvordan du tilføjer rammer til websideelementer, og hvilke tilpasninger du kan anvende på dem ved hjælp af Cascading Style Sheets.
HTML ( Hypertext Markup Language) elementer blev historisk set kategoriseret som enten "blokniveau"-elementer eller "inline"-elementer. Inline-elementer er dem, der kun optager pladsen afgrænset af de tags, der definerer elementet, i stedet for at bryde flowet af indholdet. I denne artikel vil vi undersøge HTML-inline-elementer, og hvordan de adskiller sig fra elementer på blokniveau.
Et inline-element starter ikke på en ny linje og fylder kun så meget bredde som nødvendigt.
Inline vs. elementer på blokniveau: en demonstration
Dette demonstreres nemmest med et simpelt eksempel. Først en simpel CSS, som vi skal bruge:
Fremhæv (baggrundsfarve:#ee3;)
Inline
Lad os se på følgende eksempel, der viser et inline-element:
Følgende span er en inline element; dens baggrund er blevet farvet for at vise både begyndelsen og slutningen af det inline-elements indflydelse.
Det følgende afsnit er en
element på blokniveau;
dens baggrund er blevet farvet for at vise både begyndelsen og slutningen af elementets indflydelse på blokniveau.
CSS (ikke vist i standard læsetilstand) bruges også:
Brødtekst ( margin: 0; polstring: 4px; kant: 1px fast #333; ) .highlight (baggrundsfarve:#ee3; )
Gengivet ved hjælp af samme CSS som før, får vi:
Kan du se forskellen? Det
Element ændrer fuldstændigt tekstens layout og opdeler den i tre segmenter: teksten før
Derefter
"s tekst, og til sidst teksten efter
Ændring af elementniveauer
Du kan ændre visuel præsentation af et element ved hjælp af CSS display-egenskaben. For eksempel, ved at ændre værdien af displayet fra "inline" til "block" , kan du bede browseren om at gengive det inline-element i en blokboks i stedet for en inline-boks og omvendt. Men at gøre dette vil ikke ændre på kategori og indholdsmodel af elementet. For eksempel, selvom visningen af span-elementet ændres til "blok", vil det stadig ikke tillade at indlejre et div-element inde i det.
Begrebsmæssige forskelle
Kort sagt, her er de grundlæggende konceptuelle forskelle mellem inline- og blokniveauelementer:
Indholdsmodel Generelt kan inline-elementer kun indeholde data og andre inline-elementer. Du kan ikke placere blokelementer i inline-elementer. Formatering Som standard tvinger inline-elementer ikke en ny linje til at begynde i dokumentflowet. Blokelementer forårsager på den anden side typisk et linjeskift (selvom som normalt , dette kan ændres ved hjælp af CSS).
Liste over "inline" elementer
Følgende elementer er inline som standard (selvom blok- og inline-elementer ikke længere er defineret i HTML 5, brug
