Hver er munurinn á blokk-stigi og inline þætti?
HTML samanstendur af ýmsum þáttum sem virka sem byggingareiningar vefsíðna. Hvert þessara þætti fellur í einn af tveimur flokkum - annaðhvort blokkastig þættir eða inline þættir. Að skilja muninn á þessum tveimur þáttum er mikilvægt skref í að byggja upp vefsíður.
Block Level Elements
Svo hvað er blokkarþáttur? Eining í blokkastigi er HTML-þáttur sem byrjar nýja línu á vefsíðu og nær yfir alla breidd á tiltæku láréttu plássi foreldrahlutans. Það skapar stórar blokkir af efni eins og málsgreinum eða síðudeildum. Reyndar eru flestir HTML þættir þættir í blokkum.
Einstaklingar í blokkastigi eru notaðir í líkamanum í HTML skjalinu. Þeir geta innihaldið inline þætti, auk annarra blokk stig stigum.
Inline Elements
Í mótsögn við blokk stig stigi, innbyggður þáttur getur:
- Byrjaðu á línu
- Byrjar ekki nýjan línu
- Breidd hennar nær aðeins eins langt og það er skilgreint með merkjum hennar.
Dæmi um inline frumefni er merkið, sem gerir letur innihald texta sem er inni í feitletrun. Innihaldseining inniheldur venjulega aðeins aðra inline þætti, eða það getur innihaldið ekkert yfirleitt, svo sem
brotmerkið.
Það er einnig þriðja tegund þáttur í HTML: þeir sem ekki birtast yfirleitt. Þessir þættir veita upplýsingar um síðuna en ekki birtast þegar þær eru birtar í vafra.
Til dæmis:
-
skilgreinir stíl og stíll. - skilgreinir metagögn.
- er HTML skjalið sem inniheldur þessar þættir.
Skipta innlínu- og blokkarþáttategundum
Þú getur breytt tegund frumefnisins frá inline til að loka, eða öfugt, með því að nota eina af þessum CSS eiginleikum:
- sýna: blokk;
- sýna: inline;
- sýna: ekkert;
Eiginleikar CSS sýna þér kleift að breyta innri eignum til að loka, eða blokk til inline, eða ekki að sýna yfirleitt.
Hvenær á að breyta skjánum
Almennt langar mig til að láta sýna eignina einn, en það eru nokkrar tilfelli þar sem skipta á milli og loka sýna eiginleika geta verið gagnlegar.
- Lítil listalistar: Listar eru blokkarþættir, en ef þú vilt að valmyndin þín birtist lárétt, þá þarftu að breyta listanum yfir í innsláttarþætti þannig að hver valmyndaratriði byrjar ekki á nýjum línu.
- Fyrirsagnir í textanum: Stundum gætir þú að haus verði í textanum, en haltu HTML heitum gildi. Með því að breyta h1 í gegnum h6 gildi til inline leyfir texti sem kemur eftir lokunarmerki þess að halda áfram að flæða við hliðina á því í sömu línu, í stað þess að byrja á nýjum línu.
- Einingin fjarlægð: Ef þú vilt fjarlægja einingar alveg úr venjulegu flæði skjalsins geturðu stillt skjáinn að engum. Ein athugasemd, vertu varkár þegar þú notar skjá: none.While þessi stíll mun örugglega gera frumefni ósýnilegt, viltu aldrei nota þetta til að fela texta sem þú hefur bætt við af SEO ástæðum, en vilt ekki birta fyrir gesti. Það er öruggur leið til að hafa síðuna þína refsað fyrir svarta húfu nálgun að SEO.
Common Inline Element Formatting Mistök
Eitt af algengustu mistökum sem nýliði á vefhönnun gerir er að reyna að stilla breidd á inline frumefni. Þetta virkar ekki vegna þess að breidd innlögnsþáttar eru ekki skilgreind í gámaslóðinni.
Inline þættir hunsa nokkra eiginleika:
- breidd og hæð
- hámarksbreidd og hámarkshæð
- mín breidd og lágmarkshæð
Til athugunar: Microsoft Internet Explorer (nú kölluð Microsoft Edge) hefur áður notað ranga eiginleika þessara eiginleika, jafnvel við inline box. Þetta er ekki staðlað í samræmi við þetta og þetta gæti ekki verið við nýrri útgáfur af vafra Microsoft.
Ef þú þarft að skilgreina breidd eða hæð sem þáttur ætti að taka upp, þá þarftu að beita því að efnisþáttunum á blokkinni sem inniheldur inline textann þinn.
Breytt af Jeremy Girard á 2/3/17