Разлике између блок-нивоа и уграђених елемената

click fraud protection

ХТМЛ састоји се од различитих елемената који делују као градивни блок веб страница. Сваки од ових елемената спада у једну од две категорије: елементи на нивоу блока или инлине елемент. Разумевање разлике између ове две врсте елемената важан је корак у изради веб страница.

Елементи нивоа блока

Па, шта је елемент на нивоу блока? Елемент на нивоу блока је ХТМЛ елемент који започиње нови ред на веб страници и проширује пуну ширину расположивог хоризонталног простора свог надређеног елемента. Ствара велике блокове садржаја попут пасуса или одељења страница. У ствари, већина ХТМЛ елемената су елементи на нивоу блока.

Елементи на нивоу блока користе се у телу ХТМЛ документа. Они могу садржати уграђене елементе, као и друге елементе на нивоу блока.

Инлине Елементс

За разлику од елемента на нивоу блока, уграђени елемент:

  • Може започети унутар црте.
  • Не започиње нови ред.
  • Његова ширина се протеже само онолико колико је дефинисана њеним ознакама.

Пример уграђеног елемента је , што чини фонт текста садржаја садржан подебљаним словима. Уграђени елемент обично садржи само друге уграђене елементе или уопште не може садржати ништа, као што је

instagram viewer

бреак таг.

У ХТМЛ-у постоји и трећа врста елемената: они који се уопште не приказују. Ови елементи пружају информације о страници, али се не приказују када се прикажу у веб прегледачу.

На пример:

  •  дефинише мета податке.
  •  је елемент ХТМЛ документа који садржи ове елементе.

Пребацивање врста линија и блокова елемената

Тип елемента можете да промените из уграђеног у блокирани или обрнуто, користећи једно од ових ЦСС својстава:

  • дисплеј блок; 
  • дисплеј: инлине; 
  • дисплеј: ниједан;

Тхе ЦСС својство дисплаи вам омогућава да промените уграђено својство у блокирано или блок у уграђено или да се не приказују уопште.

Када променити својство приказа

Генерално, оставите својство приказа на миру, али постоје неки случајеви у којима замена својстава приказа у реду и блока може бити корисна.

  • Менији хоризонталне листе: Листе су елементи на нивоу блока, али ако желите да се ваш мени приказује водоравно, листу морате претворити у уграђени елемент тако да свака ставка менија не започиње у новом реду.
  • Заглавља у тексту: Понекад ћете можда желети да заглавље остане у тексту, али да задржите вредности ХТМЛ заглавља. Промена вредности х1 до х6 у линију омогућиће да текст који долази након завршне ознаке настави да тече поред ње у истој линији, уместо да започне у новом реду.
  • Уклањање елемента: Ако желите да у потпуности уклоните елемент из документа нормалан проток, можете поставити екран на
    ниједан
    Једна напомена, будите опрезни када користите екран: ниједна. Иако ће тај стил заиста учинити елемент невидљивим, ви то никада не желите да користите да бисте сакрили текст који сте додали из СЕО разлога, али не желите да га прикажете посетиоцима. То је сигуран начин да ваша веб локација буде кажњена због приступа црном шеширу СЕО-у.

Уобичајене грешке у форматирању уграђених елемената

Једна од најчешћих грешака новопридошлих у веб дизајну је покушај постављања ширине уграђеног елемента. То не функционише јер ширина уграђених елемената није дефинисана оквиром контејнера.

Уграђени елементи занемарују неколико својстава:

  • ширина
    и
    висина
  • мак-видтх
    и
    мак-висина
  • мин-ширина
    и
    мин-висина

Мицрософт Интернет Екплорер (замењен Мицрософт Едге) је у прошлости погрешно применио нека од ових својстава чак и на уградне оквире. Ово није у складу са стандардима. То можда није случај са новијим верзијама Мицрософт веб прегледача.

Ако требате да дефинишете ширину или висину коју би елемент требало да заузме, то ћете желети да примените на елемент на нивоу блока који садржи ваш уграђени текст.

instagram story viewer