У чым розніца паміж блокам ўзроўню і радковыя элементы?
HTML складаецца з розных элементаў, якія выступаюць у якасці будаўнічых блокаў вэб-старонак. Кожны з гэтых элементаў патрапіць у адну з дзвюх катэгорый - ці блокавых элементаў або ўбудаваных элементаў. Разуменне розніцы паміж гэтымі двума тыпамі элементаў з'яўляецца важным крокам у стварэнні вэб-старонак.
Блок элементаў Level
Так што элемент ўзроўню блока? Элемент блочнага ўзроўню з'яўляецца HTML-элемент, які пачынае новы радок на вэб-старонцы і распасціраецца на ўсю шырыню даступнага гарызантальнага прасторы свайго бацькоўскага элемента. Гэта стварае вялікія блокі кантэнту, як абзацы або старонкі падраздзяленняў. На самай справе, большасць HTML элементаў з'яўляюцца элементамі ўзроўню блока.
Элементы ўзроўня блока выкарыстоўваюцца ў целе HTML дакумента. Яны могуць утрымліваць убудаваныя элементы, а таксама іншыя элементы ўзроўня блока.
радковыя элементы
У адрозненне ад элемента ўзроўню блока, убудаваны элемент можа:
- Пачатак у радку
- Не пачаць новы радок
- Яго шырыня распасціраецца толькі пастолькі, паколькі яно вызначаецца яго тэгамі.
Прыклад радковага элемента з'яўляецца <моцнага> тэга, які робіць шрыфт тэкставага кантэнту, якія змяшчаюцца ў тоўстым шрыфце. Убудаваны элемент звычайна змяшчае толькі іншыя ўбудаваныя элементы, ці ён не можа ўтрымліваць нічога, такія як разрыў тэг
.
Існуе таксама трэці тып элемента ў HTML: тыя, якія не адлюстроўваюцца на ўсіх. Гэтыя элементы падаюць інфармацыю пра старонку, але не адлюстроўваюцца пры візуалізацыі ў вэб-браўзэры.
Напрыклад:
- <Стыль> вызначае стылі і табліцы стыляў.
- вызначае мета-дадзеныя.
- <Галава> элемент дакумента HTML, які змяшчае гэтыя элементы.
Пераключэнне тыпаў Инлайн і блокавага элемент
Вы можаце змяніць тып такога элемента ад убудаванага ў блоку, ці наадварот, выкарыстоўваючы адзін з гэтых уласцівасцяў CSS:
- Дысплей: блок;
- Дысплей: убудаваны;
- Дысплей: не;
CSS ўласцівасць дысплея дазваляе змяняць инлайн ўласцівасць блакаваць або блок ўбудоўваць ці не адлюстроўвацца.
Калі Змена уласцівасцяў экрана
Увогуле, я хацеў бы пакінуць ўласцівасць дысплея ў адзіночку, але ёсць некаторыя выпадкі, калі свапирования ўбудаваных і блок адлюстраванне уласцівасцяў могуць быць карыснымі.
- Гарызантальны спіс меню: Спісы з'яўляюцца блокавымі элементамі, але калі вы хочаце , каб ваша меню для адлюстравання па гарызанталі, неабходна пераўтварыць спіс радковага элемента так , каб кожны пункт меню не пачаць на новую радку.
- Загалоўкі ў тэксце: Часам вы можаце захацець загаловак , каб захаваць у тэксце, але захаваць значэнне загалоўка HTML. Змена h1 праз значэння h6 ўбудоўваць дазволіць тэкст, які прыходзіць пасля закрыцця тэга, каб працягваць цечу побач з ёй на тым жа радку, замест таго каб пачаць на новым радку.
- Выдаленне элемента: Калі вы хочаце , каб цалкам выдаліць элемент з дакумента нармальнага патоку , вы можаце ўсталяваць дысплей на нішто. Адна заўвага, будзьце асцярожныя пры выкарыстанні дысплея: none.While, што стыль будзе, на самай справе, зрабіць элемент нябачным, вы ніколі не хочаце выкарыстоўваць гэтую функцыю, каб схаваць тэкст, які вы дадалі ў мэтах SEO, але не хоча, каб паказаць для наведвальнікаў. Гэта верны спосаб, каб ваш сайт парушае чорны капелюшы падыход да SEO.
Тыповыя памылкі Инлайн элемент фарматавання
Адна з самых распаўсюджаных памылак, пачатковец у вэб-дызайн робіць спрабуе ўсталяваць шырыню на радковага элемента. Гэта не працуе, так як убудаваныя элементы шырыня не вызначаны вокнамі кантэйнера.
Убудаваныя элементы ігнаруюць некалькі уласцівасцяў:
- шырыня і вышыня
- макс-шырыня і вышыня макс-
- мін-шырыня і вышыня мін
Заўвага: Microsoft Internet Explorer (цяпер называецца Microsoft Грань) ужо ў мінулым, няправільна ужыў некаторыя з гэтых уласцівасцяў нават ўбудоўваць скрынкі. Гэта не адпавядае стандартам, і гэта не можа быць у выпадку з новымі версіямі вэб-браўзэра Microsoft.
Калі вам трэба вызначыць шырыню або вышыню , што элемент павінен прыняць, вы будзеце жадаць , каб прымяніць гэта да элемента ўзроўню блока , які змяшчае свой убудаваны тэкст.
Пад рэдакцыяй Джэрэмі Girard на 2/3/17