{"id":4098,"url":"\/distributions\/4098\/click?bit=1&hash=4a2746815553d402e055c9b00a2035b35e47c0edcda5fd7253d5e57f885e8ecc","title":"\u0410\u0444\u0435\u0440\u0438\u0441\u0442\u043a\u0430, \u0440\u0435\u0431\u0451\u043d\u043e\u043a \u0438 \u043f\u0430\u043d\u043a \u2014 \u0447\u0442\u043e \u043e\u0434\u0435\u0436\u0434\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430\u0445?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"e6048338-fd6d-53fa-aaf4-387384748bf7"}

5 мар 2022 5.03.2022

Блочная модель документа

0 показов

150 открытий

В современной верстке выделяется 2 типа элементов:

• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

Блочные элементы

Они занимают всю доступную ширину родителя в которого вложены, из-за чего выталкивают соседствующие элементы не могут располагаться с ними на одной строке и переносятся под них.

<div class="block">Block Element #1</div> <div class="block">Block Element #2</div> <div class="block">Block Element #3</div>

Основные блочные элементы:

Это список основных блочных элементов, также практически все семантические теги являются блочными и в добавок к этому небольшому списку существует достаточно много блочных тегов.

<div>div element</div> <p>p element</p> <hr>

Списочные теги

Списочные теги используются для создания списка элементов, для вывода на страницу. Такие теги используются достаточно часто при верстке страниц. Также списочные теги являются блочными.

Маркированный список:

<ul> <li>Lorem ipsum.</li> <li>Similique, voluptas?</li> <li>Enim, et!</li> </ul>

Нумерованный список:

<ol> <li>Lorem ipsum.</li> <li>Beatae, fugit?</li> <li>Id, molestiae.</li> </ol>

Список описаний ( документация ):

<dl> <dt>Lorem</dt> <dd>Lorem ipsum dolor sit.</dd> <dt>Lorem ipsum.</dt> <dd>Lorem ipsum dolor sit.</dd> </dl>

Теги заголовков

Теги заголовков имеют семантическое значение для страницы, тег <h1> имеет наибольшее значение, является главным заголовком HTML документа. Использовать заголовки нужно в правильной последовательности от h1 до h6, если вы используете младший заголовок без старшего это будет ошибкой. Теги заголовков тоже являются блочными.

<h1>Lorem ipsum.</h1> <h2>Lorem ipsum.</h2> <h3>Lorem ipsum.</h3> <h4>Lorem ipsum.</h4> <h5>Lorem ipsum.</h5> <h6>Lorem ipsum.</h6>

Вкладывая одни блочные элементы в другие мы получаем возможность создавать более сложную верстку.

<div class="post"> <div class="post-title"> <h2>Hello world</h2> </div> <div class="post-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p> </div> </div>

Из примера выше видно, что в div c классом post вложенные другие элементы. На самом деле, вложенность может достигать любого уровня, но не стоит сильно увлекаться так как чем больше будет вложенность тем сложнее будет браузеру и компьютеру это все обрабатывать.

Как делать нельзя?

Нельзя вкладывать теги <p> друг в друга.

<p> Lorem ipsum dolor sit amet. <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </p>

Нельзя вкладывать заголовки друг в друга.

<h2> Some title <h3>Some subtitle</h3> <h3>Some another subtitle</h3> </h2>

ВАЖНО!

Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.

P.S. О строчных элементах напишу в следующем посте.

P.P.S. Больше уроков у меня на канале

#html #HTML #html5 #css #CSS #css3 #js #javascript #версткасайтов #верстка #разработка #сайты #frontend #верстальщик

Комментарии

Написать комментарий...

-7 комментариев

Раскрывать всегда

{
                                "tabs": [{"label":"\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 Main","isRecommendations":true},{"label":"Starfield","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 Starfield","searchUrl":"\/search\/v2\/themes?order_by=new&strict=true&rating=10,null&query=Starfield"},{"label":"Baldur\u2019s Gate 3","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 Baldurs Gate 3","searchUrl":"\/search\/v2\/themes?order_by=new&strict=true&rating=10,null&query=baldursgate || baldurs gate"},{"label":"Cyberpunk 2077","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 Cyberpunk 2077","searchUrl":"\/search\/v2\/themes?order_by=new&strict=true&rating=10,null&query=Cyberpunk 2077 || \u043a\u0438\u0431\u0435\u0440\u043f\u0430\u043d\u043a 2077"},{"label":"Armored Core VI ","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 Armored Core","searchUrl":"\/search\/v2\/themes?order_by=new&strict=true&rating=10,null&query=Armored Core"}],
                                "contentId": 1107660                            }