Каква је разлика између нивоа блокова и елемената?
ХТМЛ се састоји од различитих елемената који дјелују као грађевински блокови веб страница. Сваки од ових елемената спада у једну од две категорије - елементи блок-нивоа или инлине елементи. Разумевање разлике између ова два типа елемената је важан корак у изградњи веб страница.
Елементи нивоа блокова
Дакле, шта је елемент на блока нивоу? Елемент на нивоу блока је ХТМЛ елемент који започиње нову линију на Веб страници и проширује пуну ширину расположивог хоризонталног простора његовог родитељског елемента. Он ствара велике блокове садржаја као што су параграфи или подељене странице. Заправо, већина ХТМЛ елемента су елементи блок-нивоа.
Елементи блок-нивоа се користе унутар тијела ХТМЛ документа. Они могу да садрже елементе елемента, као и друге елементе блок-нивоа.
Инлине Елементс
За разлику од елемента на нивоу блока, инлине елемент може:
- Почните унутар линије
- Не покреће нову линију
- Његова ширина се простире само ако је она дефинисана његовим ознакама.
Пример инлине елемента је ознака <стронг>, која чини фонт садржаја текста садржан у болдфаце-у. Инлине елемент обично садржи само друге инлине елементе, или уопће не може садржати ништа, као што је <бр /> бреак таг.
У ХТМЛ-у постоји и трећи тип елемента: они који уопште нису приказани. Ови елементи пружају информације о страници, али се не приказују када се приказују у Веб прегледачу.
На пример:
- <стиле> дефинира стилове и стилове.
- <мета> дефинише мета податке.
- <хеад> је ХТМЛ документ који садржи ове елементе.
Пребацивање линијских и блокираних типова елемената
Тип елемента можете променити од инлине до блокирања или обрнуто, користећи једну од ових ЦСС особина:
- дисплеј блок;
- дисплаи: инлине;
- приказ: нема;
Особина приказа ЦСС- а вам омогућава да промените инлине својство да блокирате, или блок за инлине или да се уопште не приказује.
Када променити својство приказа
У принципу, волим да сам оставим својство екрана самог, али постоје неки случајеви у којима могу бити корисне замјене у инлине и блока приказа.
- Менији хоризонталне листе: Листе су елементи блок-нивоа, али ако желите да се ваш мени приказује хоризонтално, морате претворити листу у инлине елемент тако да свака ставка у менију не почиње на новој линији.
- Заглавља у тексту: Понекад можда желите да заглавље остане у тексту, али да задржите вриједности ХТМЛ заглавља. Промена вредности х1 до х6 у инлине омогућиће текст који долази након затварања ознаке да настави да тече поред ње на истој линији, умјесто да се започне на новој линији.
- Уклањање елемента: Ако желите да потпуно уклоните елемент из нормалног тока документа, можете да поставите екран на ниједан. Једна напомена, будите пажљиви када користите екран: нема. Иако ће тај стил стварно учинити елемент невидљивим, никада не желите да га користите да сакријете текст који сте додали за СЕО разлоге, али не желите да се приказује за посетиоце. То је сигуран начин да ваш сајт буде кажњен због приступа СЕО-у у црној шешири.
Заједничке грешке у формату елементарних елемената
Једна од најчешћих грешака које новајлија Веб дизајна чини је покушај постављања ширине на инлине елементу. Ово не функционише јер кутије за контејнере не дефинишу ширине елемената.
Инлине елементи игноришу неколико особина:
- ширину и висину
- мак-ширина и мак-висина
- мин-ширина и мин-висина
Напомена: Мицрософт Интернет Екплорер (сада назван Мицрософт Едге) је у прошлости погрешно применио нека од ових особина чак и на инлине кутије. Ово није стандардно усклађено, а то можда неће бити случај са новијим верзијама Мицрософтовог веб прегледача.
Ако је потребно да дефинишете ширину или висину коју елемент треба покренути, то ћете желети да примените на елемент блок-ниво који садржи ваш инлине текст.
Исправио / ла Јереми Гирард дана 2/3/17