Blokinio lygio ir įterptųjų elementų skirtumai

HTML yra sudaryta iš įvairių elementų, kurie veikia kaip tinklalapių sudedamosios dalys. Kiekvienas iš šių elementų skirstomas į vieną iš dviejų kategorijų: bloko lygio elementus arba įterptinius elementus. Suprasti skirtumą tarp šių dviejų tipų elementų yra svarbus žingsnis kuriant tinklalapius.

Blokuoti lygio elementus

Taigi, kas yra bloko lygio elementas? Bloko lygio elementas yra HTML elementas, kuris pradeda naują interneto puslapio eilutę ir išplečia visą jo pagrindinio elemento horizontalios erdvės plotį. Tai sukuria didelius turinio blokus, tokius kaip pastraipos ar puslapių padalijimas. Tiesą sakant, dauguma HTML elementų yra bloko lygio elementai.

Bloko lygio elementai naudojami HTML dokumento tekste. Juose gali būti inline elementų, taip pat kitų blokų lygio elementų.

Įterpti elementai

Skirtingai nuo bloko lygio elemento, įterptinis elementas:

• Tai gali prasidėti linijoje.
• Tai nepradeda naujos linijos.
• Jo plotis tęsiasi tik tiek, kiek jį apibrėžia žymos.

Įterptojo elemento pavyzdys yra

, todėl teksto šriftas yra paryškintas. Įterptasis elementas paprastai turi tik kitus įterptinius elementus arba jame negali būti nieko, pavyzdžiui,
pertraukos žyma.

HTML yra ir trečiasis elementų tipas: tie, kurie visai nerodomi. Šie elementai teikia informaciją apie puslapį, tačiau nerodomi, kai pateikiami žiniatinklio naršyklėje.

Pavyzdžiui:

•  apibrėžia meta duomenis.
•  yra HTML dokumento elementas, kuriame yra šie elementai.

Tiesioginių ir blokinių elementų tipų perjungimas

Naudodami vieną iš šių CSS ypatybių, galite pakeisti elemento tipą iš tiesioginio į blokinį arba atvirkščiai.

• rodyti: blokuoti; 

• rodyti: įterptas; 

• rodyti: nėra;

The CSS rodyti ypatybę leidžia pakeisti tiesioginę ypatybę į bloką arba bloką į įterptą arba nerodyti iš viso.

Kada pakeisti ekrano ypatybę

Apskritai palikite ekrano ypatybę ramybėje, tačiau yra atvejų, kai gali būti naudinga pakeisti eilutines ir blokuojamas ekrano ypatybes.

• Horizontalaus sąrašo meniu: Sąrašai yra blokų lygio elementai, tačiau jei norite, kad jūsų meniu būtų rodomas horizontaliai, turite konvertuoti sąrašą į tiesioginį elementą, kad kiekvienas meniu punktas neprasidėtų naujoje eilutėje.
• Antraštės tekste: Kartais galite norėti, kad antraštė liktų tekste, tačiau išlaikykite HTML antraštės vertes. Pakeitus h1 – h6 reikšmes į įterptines, tekstas, atsirandantis po uždaromosios žymos, galės toliau tekėti šalia tos pačios eilutės, o ne pradėti naują eilutę.
• Elemento pašalinimas: Jei norite visiškai pašalinti elementą iš dokumento normalus srautas, galite nustatyti ekraną į

  nė vienas

  Viena pastaba, būkite atsargūs naudodami ekraną: nėra. Nors šis stilius iš tikrųjų padarys elementą nematomą, niekada nenorite jo naudoti norėdami paslėpti tekstą, kurį pridėjote dėl SEO, tačiau nenorite rodyti lankytojams. Tai patikimas būdas jūsų svetainei nubausti už juodos kepurės požiūrį į SEO.

Dažniausios tiesioginio elemento formatavimo klaidos

Viena iš dažniausiai pasitaikančių klaidų, kurias daro naujokas interneto dizaino srityje, yra bandymas nustatyti įterptojo elemento plotį. Tai neveikia, nes įterptųjų elementų pločių neapibrėžia konteinerio dėžutė.

Įterpti elementai nepaiso kelių savybių:

• plotis

  ir

  ūgio

• maks. plotis

  ir

  max-aukštis

• min pločio

  ir

  min aukščio

Jei reikia apibrėžti plotį ar aukštį, kurį elementas turėtų užimti, turėsite tai pritaikyti bloko lygio elementui, kuriame yra jūsų įterptasis tekstas.