Plokitasandi ja sisemiste elementide erinevused

click fraud protection

HTML koosneb erinevatest elementidest, mis toimivad veebilehtede ehituskividena. Kõik need elemendid jagunevad ühte kahest kategooriast: plokitaseme elemendid või tekstisisesed elemendid. Nende kahe tüüpi elementide erinevuse mõistmine on oluline samm veebilehtede koostamisel.

Blokeeri taseme elemendid

Mis on siis ploki taseme element? Plokitasandiline element on HTML-element, mis alustab veebilehel uut joont ja laiendab kogu oma põhielemendi horisontaalse ruumi kogu laiust. See loob suured sisuplokid, näiteks lõigud või lehtede jaotused. Tegelikult on enamik HTML-elemente plokitaseme elemendid.

Blokitaseme elemente kasutatakse HTML-dokumendi kehas. Need võivad sisaldada tekstisiseseid elemente, samuti muid plokitaseme elemente.

Sisseehitatud elemendid

Erinevalt plokitaseme elemendist on tekstisisene element:

  • See võib alata joone sees.
  • See ei alusta uut joont.
  • Selle laius ulatub ainult niipalju, kui see on määratletud selle siltidega.

Tekstisisese elemendi näide on , mis muudab rasvases kirjas teksti sisu. Sisseehitatud element sisaldab üldjuhul ainult muid siseseid elemente või võib see üldse mitte midagi sisaldada, näiteks

instagram viewer

murda silt.

HTML-is on ka kolmas tüüpi element: need, mida üldse ei kuvata. Need elemendid pakuvad teavet lehe kohta, kuid neid ei kuvata veebibrauseris renderdamisel.

Näiteks:

  •  määratleb metaandmed.
  •  on HTML-dokumendi element, mis neid elemente hoiab.

Sisemise ja blokeeritava elemendi tüübi vahetamine

Elemendi tüüpi saate muuta tekstisiseseks plokiks või vastupidi, kasutades ühte järgmistest CSS-i omadustest.

  • kuva: plokk; 
  • kuva: reas; 
  • kuva: puudub;

The CSS kuva atribuut võimaldab teil muuta tekstisisese atribuudi blokeeringuks või ploki tekstisisesteks või mitte kuvada üleüldse.

Millal kuvari atribuuti muuta

Üldiselt jäta kuvaomadus rahule, kuid on mõningaid juhtumeid, kus tekstisiseste ja blokeeritud omaduste vahetamine võib olla kasulik.

  • Horisontaalse loendi menüüd: Loendid on plokitaseme elemendid, kuid kui soovite, et teie menüü kuvatakse horisontaalselt, peate loendi teisendavaks elemendiks teisendama, nii et iga menüüelement ei alga uuel real.
  • Päised tekstis: Mõnikord võiksite soovida, et päis jääks teksti, kuid säilitaks HTML-päise väärtused. Väärtuste h1 kuni h6 muutmine tekstisisesteks võimaldab tekstil, mis tuleb pärast sulgemismärgendit, jätkata samal real selle kõrval voolamist, selle asemel et alustada uuelt realt.
  • Elemendi eemaldamine: Kui soovite dokumendi elemendi täielikult eemaldada normaalne vool, saate ekraani seadistada
    mitte ühtegi
    Üks märkus, olge kuva kasutamisel ettevaatlik: puudub. Kuigi see stiil muudab elemendi tõepoolest nähtamatuks, ei soovi te seda kunagi kasutada SEO-põhjustel lisatud teksti peitmiseks, kuid ei soovi külastajatele kuvada. See on kindel viis, kuidas teie saiti karistatakse musta mütsi lähenemise eest SEO-le.

Levinud sisemise elemendi vormindamise vead

Üks levinumaid vigu, mida veebidisaini uustulnuk teeb, on proovida laiuselementi laiusele seada. See ei toimi, kuna konteineriboks ei määratle tekstisiseste elementide laiusi.

Sisesed elemendid eiravad mitut omadust:

  • laius
    ja
    kõrgus
  • max laius
    ja
    max-kõrgus
  • min-laius
    ja
    min-kõrgus

Microsoft Internet Explorer (asendatud Microsoft Edge'iga) on varem mõnda neist omadustest valesti rakendanud isegi tekstiruutudele. See ei vasta standarditele. See ei pruugi juhtuda Microsofti veebibrauseri uuemate versioonide puhul.

Kui peate määratlema elemendi laiuse või kõrguse, peaksite selle rakendama plokisisese elemendi jaoks, mis sisaldab teie teksti.

instagram story viewer