Atšķirības starp bloka līmeņa un iekšējiem elementiem

HTML sastāv no dažādiem elementiem, kas darbojas kā tīmekļa lapu veidošanas bloki. Katrs no šiem elementiem ietilpst vienā no divām kategorijām: bloka līmeņa elementi vai iekšējais elements. Izpratne par atšķirību starp šiem diviem elementu veidiem ir svarīgs solis tīmekļa lapu izveidē.

Bloka līmeņa elementi

Kas tad ir bloka līmeņa elements? Bloka līmeņa elements ir HTML elements, kas sāk jaunu līniju tīmekļa lapā un paplašina tā vecākā elementa pieejamās horizontālās telpas visu platumu. Tas rada lielus satura blokus, piemēram, rindkopas vai lapu sadalījumu. Patiesībā lielākā daļa HTML elementu ir bloka līmeņa elementi.

Bloka līmeņa elementi tiek izmantoti HTML dokumenta pamattekstā. Tajos var būt iekļauti elementi, kā arī citi bloku līmeņa elementi.

Iekļautie elementi

Atšķirībā no bloka līmeņa elementa, iekļauts elements:

Tas var sākties vienā līnijā.
Tas nesāk jaunu līniju.
Tās platums sniedzas tikai tik tālu, cik to nosaka tagi.

Iekļautā elementa piemērs ir , kas teksta teksta fontu padara treknrakstā. Inline elements parasti satur tikai citus inline elementus, vai arī tajā var būt vispār nekas, piemēram,

instagram viewer

salauzt tagu.

HTML ir arī trešais elementu veids: tie, kas vispār netiek rādīti. Šie elementi sniedz informāciju par lapu, bet netiek parādīti, kad tie tiek atveidoti tīmekļa pārlūkprogrammā.

Piemēram:

definē metadatus.
ir HTML dokumenta elements, kas satur šos elementus.

Iekšējo un bloķēto elementu veidu pārslēgšana

Izmantojot vienu no šīm CSS īpašībām, varat mainīt elementa tipu no teksta uz bloku vai otrādi.

```
displejs: bloks; 
```
```
displejs: inline; 
```
```
displejs: nav;
```

The CSS displeja rekvizīts ļauj mainīt iekļauto rekvizītu uz bloku vai bloku uz iekļauto vai nerādīt pavisam.

Kad mainīt displeja rekvizītu

Parasti atstājiet displeja rekvizītu mierā, taču ir daži gadījumi, kad var būt noderīgi mainīt un bloķēt displeja rekvizītus.

Horizontālā saraksta izvēlnes: Saraksti ir bloku līmeņa elementi, taču, ja vēlaties, lai jūsu izvēlne tiktu rādīta horizontāli, saraksts jāpārvērš par iekļauto elementu, lai katrs izvēlnes vienums nesāktos jaunā rindā.
Galvenes tekstā: Dažreiz jūs varētu vēlēties, lai galvene paliktu tekstā, taču saglabājiet HTML galvenes vērtības. Mainot h1 līdz h6 vērtības uz inline, teksts, kas nāk pēc tā beigu taga, turpinās plūst blakus tam pašā rindā, nevis sākt ar jaunu līniju.
Elementa noņemšana: Ja vēlaties pilnībā noņemt elementu no dokumenta normāla plūsma, varat iestatīt displeju uz
```
neviena
```
Viena piezīme. Esiet piesardzīgs, lietojot displeju: neviens. Lai gan šis stils patiešām padarīs elementu neredzamu, jūs nekad to nevēlaties izmantot, lai paslēptu tekstu, kuru pievienojāt SEO iemeslu dēļ, bet kuru nevēlaties parādīt apmeklētājiem. Tas ir drošs veids, kā jūsu vietne tiek sodīta par melnās cepures pieeju SEO.

Bieži iekļautās elementa formatēšanas kļūdas

Viena no visbiežāk pieļautajām kļūdām, ko pieļauj Web dizaina jaunpienācējs, ir mēģinājums iestatīt inline elementa platumu. Tas nedarbojas, jo konteinera kaste nenosaka iekšējo elementu platumus.

Iekļautie elementi ignorē vairākas īpašības:

```
platums
```
un
```
augstums
```
```
max platums
```
un
```
max-augstums
```
```
min platums
```
un
```
min-augstums
```

Microsoft Internet Explorer (aizstāts ar Microsoft Edge) agrāk dažus no šiem rekvizītiem ir nepareizi lietojis pat iekšējām lodziņām. Tas neatbilst standartiem. Tas var nenotikt ar jaunākām Microsoft tīmekļa pārlūkprogrammas versijām.

Ja jums ir jānosaka platums vai augstums, kas elementam jāaizņem, tas jāpielieto bloka līmeņa elementam, kurā ir iekļauts teksts.