Forskellene mellem blokniveauer og integrerede elementer

HTML består af forskellige elementer, der fungerer som byggestenene til websider. Hvert af disse elementer falder i en af to kategorier: elementer på blokniveau eller et inline-element. At forstå forskellen mellem disse to typer elementer er et vigtigt skridt i opbygningen af websider.

Bloker niveauelementer

Så hvad er et element på blokniveau? Et element på blokniveau er et HTML-element, der begynder en ny linje på en webside og udvider den fulde bredde af det tilgængelige vandrette rum i dets overordnede element. Det skaber store blokke af indhold som afsnit eller sidedelinger. Faktisk er de fleste HTML-elementer blokelementer.

Elementer på blokniveau bruges i HTML-dokumentets brødtekst. De kan indeholde integrerede elementer såvel som andre elementer på blokniveau.

Inline Elements

I modsætning til et element på blokniveau er et inline-element:

Det kan begynde inden for en linje.
Det starter ikke en ny linje.
Dens bredde strækker sig kun så langt, som den er defineret af dens tags.

instagram viewer

Et eksempel på et integreret element er , hvilket gør skrifttypen til tekstindholdet indeholdt i fed skrift. Et integreret element indeholder normalt kun andre integrerede elementer, eller det kan slet ikke indeholde noget som f.eks
bryde tag.

Der er også en tredje type element i HTML: dem, der slet ikke vises. Disse elementer giver oplysninger om siden, men vises ikke, når de gengives i en webbrowser.

For eksempel:

definerer metadata.
er HTML-dokumentelementet, der indeholder disse elementer.

Skift af inline- og blokelementtyper

Du kan ændre typen af et element fra indbygget til blokering eller omvendt ved hjælp af en af disse CSS-egenskaber:

```
display: blok; 
```
```
display: inline; 
```
```
display: ingen;
```

Det CSS display-egenskab giver dig mulighed for at ændre en indbygget egenskab, der skal blokeres, eller en blok til indbygget eller ikke at vise overhovedet.

Hvornår skal displayejendommen ændres

Generelt skal du lade skærmejendommen være alene, men der er nogle tilfælde, hvor ombytning af indbyggede og blokerende skærmegenskaber kan være nyttige.

Vandrette listemenuer: Lister er elementer på blokniveau, men hvis du ønsker, at din menu skal vises vandret, skal du konvertere listen til et integreret element, så hvert menupunkt ikke starter på en ny linje.
Overskrifter i teksten: Nogle gange vil du muligvis have et overskrift i teksten, men vedligeholde HTML-overskriftsværdierne. Hvis du ændrer h1 til h6-værdierne til indbygget, kan teksten, der kommer efter dens lukkemærke, fortsætte med at flyde ved siden af den på samme linje i stedet for at starte på en ny linje.
Fjernelse af elementet: Hvis du vil fjerne et element helt fra dokumentet normal strømning, kan du indstille displayet til
```
ingen
```
En note, vær forsigtig, når du bruger skærm: ingen. Mens denne stil faktisk gør et element usynligt, vil du aldrig bruge dette til at skjule tekst, som du har tilføjet af SEO-grunde, men ikke ønsker at blive vist for besøgende. Det er en sikker måde at få dit websted straffet for en sort hat tilgang til SEO.

Fælles integrerede elementformateringsfejl

En af de mest almindelige fejl, en nykommer i webdesign laver, er at forsøge at indstille en bredde på et integreret element. Dette fungerer ikke, fordi bredde på integrerede elementer ikke er defineret af containerboksen.

Integrerede elementer ignorerer flere egenskaber:

```
bredde
```
og
```
højde
```
```
maks. bredde
```
og
```
maks. højde
```
```
min bredde
```
og
```
min-højde
```

Microsoft Internet Explorer (erstattet af Microsoft Edge) har tidligere forkert anvendt nogle af disse egenskaber, selv på indbyggede kasser. Dette overholder ikke standarder. Dette er muligvis ikke tilfældet med nyere versioner af Microsofts webbrowser.

Hvis du har brug for at definere bredden eller højden, som et element skal tage op, skal du anvende det på elementet på blokniveau, der indeholder din integrerede tekst.