Елементи на HTML: Блок-ниво наспроти вградени елементи

Која е разликата помеѓу блок-ниво и вградени елементи?

HTML е составен од различни елементи кои делуваат како градежни блокови на веб-страници. Секој од овие елементи спаѓа во една од двете категории - елементи на блок-ниво или елементи на вметнување. Разбирањето на разликата помеѓу овие два вида елементи е важен чекор во изградбата на веб-страници.

Блок елементи за елемент

Значи, што е елемент на ниво на блок? Елемент на ниво на блок е HTML елемент кој започнува нова линија на веб-страница и ја проширува целата ширина на достапниот хоризонтален простор на нејзиниот родителски елемент. Таа создава големи блокови на содржина како параграфи или поделби на страници. Всушност, повеќето HTML елементи се блок-ниво елементи.

Елементите на блок-ниво се користат во телото на HTML-документот. Тие можат да содржат елементи за вметнување, како и други елементи на блок-ниво.

Вградени елементи

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

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

Исто така постои и трет тип на елемент во HTML: оние кои воопшто не се прикажуваат. Овие елементи обезбедуваат информации за страната, но не се прикажуваат кога се претставени во веб-прелистувач.

На пример:

  • <стил> дефинира стилови и стилови.
  • дефинира мета податоци.
  • е елемент на HTML документ што ги содржи овие елементи.

Префрлување на Inline и блок елементи на елементите

Можете да го смените типот елемент од inline до блок или обратно, користејќи еден од овие својства на CSS:

  • дисплеј: блок;
  • дисплеј: внатрешен;
  • дисплеј: нема;

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

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

Во принцип, сакам да го оставам самото место на екранот сам, но има некои случаи каде што може да биде корисно замена на вградените и блок екраните.

  • Мени на хоризонтална листа: Списоците се елементи на ниво на блок, но ако сакате менито да се прикажува хоризонтално, треба да ја конвертирате листата во вграден елемент, така што секоја ставка од менито не започнува на нова линија.
  • Заглавија во текстот: Понекогаш можеби сакате заглавието да остане во текстот, но да ги задржите вредностите на заглавието на HTML. Промената на вредностите h1-h6 во линија ќе им овозможи на текстот што доаѓа по неговата завршна ознака да продолжи да тече до него на истата линија, наместо да започне со нова линија.
  • Отстранување на елементот: Ако сакате целосно да отстраните елемент од нормалниот проток на документот, можете да го поставите екранот на ниеден. Една забелешка, бидете внимателни при користење на екранот: нема. Додека тој стил навистина ќе направи елемент невидлив, никогаш не сакате да го користите ова за да скриете текст што го додадовте за причини за оптимизација, но не сакате да се прикажувате за посетителите. Тоа е сигурен начин да имате веб-сајт казнет за пристап со црна шапка до оптимизација.

Вообичаени грешки во форматирањето на елементите во вграден елемент

Една од најчестите грешки што новинарите на веб-дизајнот ги прави е да се постави ширина на вграден елемент. Ова не функционира бидејќи ширините на внатрешните елементи не се дефинирани од кутијата за контејнери.

Вградените елементи игнорираат неколку својства:

  • ширина и висина
  • макс-ширина и макс-висина
  • мин-ширина и мин-висина

Забелешка: Microsoft Internet Explorer (сега наречен Microsoft Edge) во минатото погрешно примени некои од овие својства дури и во вградени кутии. Ова не е усогласено со стандардите, и ова можеби не е случај со поновите верзии на веб-прелистувачот на Microsoft.

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

Уредено од Џереми Жирар на 2/3/17