Beth yw'r gwahaniaeth rhwng lefel y bloc ac elfennau mewn llinell?
Mae HTML yn cynnwys elfennau amrywiol sy'n gweithredu fel blociau adeiladu tudalennau gwe. Mae pob un o'r elfennau hyn yn perthyn i un o ddau gategori - naill ai elfennau lefel bloc neu elfennau mewn llinell. Mae deall y gwahaniaeth rhwng y ddau fath o elfennau hyn yn gam pwysig wrth adeiladu tudalennau gwe.
Eitemau Lefel Bloc
Felly beth yw elfen lefel bloc? Mae elfen lefel bloc yn elfen HTML sy'n dechrau llinell newydd ar dudalen We ac mae'n ymestyn lled llawn gofod llorweddol ei elfen rhiant. Mae'n creu blociau mawr o gynnwys fel paragraffau neu adrannau tudalen. Mewn gwirionedd, mae'r rhan fwyaf o elfennau HTML yn elfennau lefel bloc.
Defnyddir elfennau lefel bloc o fewn corff y ddogfen HTML. Gallant gynnwys elfennau mewn llinell, yn ogystal ag elfennau eraill ar lefel bloc.
Inline Elfennau
Mewn cyferbyniad ag elfen lefel bloc, gall elfen inline:
- Dechreuwch o fewn llinell
- Nid yw'n dechrau llinell newydd
- Mae ei lled yn unig yn ymestyn cyn belled ag y mae ei tagiau wedi ei ddiffinio.
Enghraifft o elfen inline yw'r tag , sy'n gwneud ffont y cynnwys testun sydd wedi'i gynnwys mewn boldface. Yn gyffredinol, dim ond elfennau inline eraill y mae elfen inline yn eu cynnwys yn unig, neu ni all gynnwys dim o gwbl, megis y tag egwyl
.
Mae yna hefyd drydedd math o elfen yn HTML: y rhai nad ydynt wedi'u harddangos o gwbl. Mae'r elfennau hyn yn darparu gwybodaeth am y dudalen ond nid ydynt yn cael eu harddangos wrth eu rendro mewn porwr gwe.
Er enghraifft:
-
yn diffinio arddulliau a steiliau arddull. - yn diffinio meta data.
- yw'r elfen ddogfen HTML sy'n dal yr elfennau hyn.
Newid Mathau Elfen Mewnol a Bloc
Gallwch newid math elfen o mewn llinell i bloc, neu i'r gwrthwyneb, gan ddefnyddio un o'r eiddo CSS hyn:
- arddangos: bloc;
- arddangos: inline;
- arddangos: dim;
Mae'r eiddo arddangos CSS yn gadael i chi newid eiddo mewnol i blocio, neu bloc i mewn llinell, neu beidio â dangos o gwbl.
Pryd i Newid yr Eiddo Arddangos
Yn gyffredinol, hoffwn adael yr eiddo arddangos yn unig, ond mae rhai achosion lle gall cyfnewid eiddo mewnol ac arddangos bloc fod yn ddefnyddiol.
- Bwydlenni rhestr llorweddol: Mae'r rhestri yn elfennau lefel bloc, ond os ydych chi am i'ch bwydlen gael ei arddangos yn llorweddol, mae angen ichi drosi'r rhestr i elfen fewnol fel na fydd pob eitem ddewislen yn dechrau ar linell newydd.
- Penawdau yn y testun: Weithiau, efallai y byddwch am i bennawd aros yn y testun, ond cadwch y gwerthoedd pennawd HTML. Bydd newid y gwerthoedd h1 trwy h6 i mewnline yn caniatáu testun a ddaw ar ôl ei tag cau i barhau i lifo nesaf ato ar yr un llinell, yn hytrach na dechrau ar linell newydd.
- Dileu'r elfen: Os ydych am gael gwared ar elfen yn gyfan gwbl o lif arferol y ddogfen, ni allwch osod yr arddangosfa i ddim. Un nodyn, byddwch yn ofalus wrth ddefnyddio arddangosfa: none.While bydd yr arddull honno, yn wir, yn gwneud elfen anweledig, chi byth yn dymuno defnyddio hyn i guddio testun a wnaethoch am resymau SEO, ond nid ydych am arddangos i ymwelwyr. Mae hynny'n ffordd ddiddorol i gael eich safle yn cael ei gosbi am ymagwedd het du i SEO.
Elfen Gyffredin yn Fformatio Trafferthion
Un o'r camgymeriadau mwyaf cyffredin y mae newydd-ddyfodiad i wneud dylunio gwe yn ceisio gosod lled ar elfen inline. Nid yw hyn yn gweithio oherwydd nad yw blwch y cynhwysydd yn diffinio elfennau mewnol.
Mae elfennau inline yn anwybyddu sawl eiddo:
- lled ac uchder
- max-lled ac uchder-uchder
- lled-lygaid a uchder-min
Nodyn: Mae Microsoft Internet Explorer (a elwir bellach yn Microsoft Edge) wedi defnyddio rhai o'r eiddo hyn yn anghywir er mwyn gosod blychau mewnol. Nid yw hyn yn cydymffurfio â safonau, ac efallai na fydd hyn yn wir gyda fersiynau newydd o borwr gwe Microsoft.
Os oes angen i chi ddiffinio'r lled neu'r uchder y dylai elfen ei gymryd, bydd angen i chi wneud cais i'r elfen lefel bloc sy'n cynnwys eich testun mewnol .
Golygwyd gan Jeremy Girard ar 2/3/17