Блочная модель документа последнее испытание: Последнее испытание — Блочная модель документа — HTML Academy

Leave a Comment / Разное / By /

Блочная модель | Основы современной верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

Представьте себе процесс строительства дома. Условно его можно разделить на несколько этапов: возведение структуры дома и его отделка. При возведении дома мы заливаем фундамент, возводим стены, устанавливаем крышу. После этого уже переходим к покраске дома, устанавливаем окна и занимаемся декорированием.

Процесс создания верстки можно описать похожими процессами. В ней так же важна роль возведения структуры и отделки. Для этого существуют несколько основных типов элементов:

  • Блочные элементы (Block level). Эти элементы отвечают за каркас страницы.
  • Строчные элементы (Inline level). Они помогают нам в процессе стилизации страницы или добавления функциональных частей.

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

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

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

Представьте, что у вас есть шкаф и коробки с шириной, равной ширине шкафа. В этом случае мы не можем поставить коробки рядом друг с другом, так как для этого у нас не будет пространства.

Единственное решение — класть коробки друг на друга. Блочные элементы ведут себя точно таким же образом.

В HTML-разметке такие коробки могли бы выглядеть следующим образом:

<div>Коробка №1</div>
<div>Коробка №2</div>
<div>Коробка №3</div>

На примере этой разметки уже стало понятно, что элемент <div> является блочным элементом. Он занимает всю доступную ширину, и из-за этого другие элементы не встают с ним в один ряд.

Стоит отдельно отметить понятие «занимает всю доступную ширину». Что же именно скрывается за этой доступной шириной? Ширина всей страницы, ширина экрана или ширина дороги близ деревни Ракушки? На самом деле доступная ширина — вся доступная ширина родителя

. То есть, если наш блок лежит внутри <body>, то эта ширина будет равна именно ширине <body>. Стоит изменить ширину <body>, так сразу изменится и ширина блочного элемента внутри.

Какие же еще элементы являются блочными? На самом деле их так много, что просто делать перечисление не очень верно. В процессе углубления в верстку вы сами обнаружите, какие элементы являются блочными. Основными же блочными элементами являются:

  • <div>
  • <p>
  • Теги списков: <ul>/<ol>/<li>
  • Заголовки: <h2>/<h3>/<h4>/<h5>/<h5>/<h6>

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

<div>
  <div>
    <h2>Заголовок статьи</h2>
  </div>
  <div>
    <p>А здесь находится текст статьи</p>
  </div>
</div>

Как вы видите, внутрь блочных элементов <div> мы положили другие такие же блоки, а также заголовок и параграф. Такая вложенность может достигать любого уровня.

Важно: хоть HTML и позволяет бесконечно вкладывать блоки друг в друга, лучше сохранять здравый смысл. Дело в том, что процесс вывода верстки достаточно долгий для браузеров. На это тратится довольно много ресурсов. И чем больше вложенность блоков друг в друга, тем сложнее браузеру и компьютеру все это обработать

Вложенность блочных элементов друг в друга ограничена только несколькими пунктами:

  1. Нельзя вкладывать заголовки в заголовки
  2. Нельзя вкладывать параграфы в параграфы

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

Для создания блочного элемента используется тег <div>. Он не имеет никаких дополнительных стилей, кроме блочного отображения. Этим тегом оборачивается связанная информация, создаются каркасы компонентов. Но тег не является семантичным, то есть не несет смысловой нагрузки. Подробнее о семантических элементах будет в следующем уроке

Строчные элементы

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

Давайте добавим в прошлый пример строчный элемент:

<div>
  <div>
    <h2>Заголовок статьи</h2>
  </div>
  <div>
    <p>А <a href="#">здесь</a> находится текст статьи</p>
  </div>
</div>

Что произошло? Мы обернули слово здесь в ссылку, которая уведет пользователя в то место, которое мы укажем. Что произойдет в браузере при добавлении этого тега? Ссылка станет синего цвета и появится подчеркивание. Но сам текст останется на месте, так как ширина ссылки будет равна ширине слова здесь.

Если представить наши строчные элементы в виде коробок, то они расположатся следующим образом:

Это главная отличительная черта строчных элементов. Помимо этого есть важная особенность, связанная с применением свойств width и height в CSS. Для строчных элементов эти свойства не работают

. Их применение не даст никакого эффекта.

Наиболее часто используемыми строчными элементами являются:

  • <span>
  • <a>
  • Теги выделения текста: <i>/<em>/<b>/<strong>

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

<span>
  Длинный текст, который мы обернули в строчный элемент span. Внутри span мы
  также можем вставить тег <i>i</i>, <strong>strong</strong> и так далее.
</span>

Используйте <span> для дополнительных стилей внутри блочных элементов, например параграфов. Например,

<p>Хекслет — <span>онлайн</span> курсы по программированию</p>

Теперь можно использовать <span> для создания дополнительных стилей, например для другого цвета или шрифта

Важно: не вкладывайте внутрь строчных элементов блочные. Это нарушает семантику и усложняет чтение кода

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

Еще до работы с CSS полезно понимать, как браузер выводит элементы на вашу страницу. Помимо естественных свойств высоты и ширины, любой элемент на странице может иметь следующие свойства:

  • padding — Внутренние отступы элемента
  • margin — Внешние отступы от элемента
  • border — Видимые границы элемента

Каждое из них не просто выполняет ту функцию, которая указана, но и напрямую влияет на конечные значения высоты и ширины элемента.

Представьте, что у нас есть квадрат со стороной 150 пикселей. Мы добавили к нему рамку в 2 пикселя, внутренний отступ в 10 пикселей с каждой стороны и по 20 пикселей внешнего отступа с каждой стороны.

Сколько места будет занимать наш квадрат на странице? Для этого нам надо суммировать все значения.

Ширина: 150px (начальная ширина) + 2px (граница справа) + 2px (граница слева) + 10px (внутренний отступ справа) + 10px (внутренний отступ слева) + 20px (Внешний отступ справа) + 20px (Внешний отступ слева) = 214px

Высота: 150px (начальная высота) + 2px (граница сверху) + 2px (граница снизу) + 10px (внутренний отступ сверху) + 10px (внутренний отступ снизу) + 20px (Внешний отступ сверху) + 20px (Внешний отступ снизу) = 214px

Дополнительное задание

Воспользуйтесь любым онлайн сервисом, который умеет преобразовывать HTML разметку. Например, https://htmlcodeeditor.com/ .

Вставьте в левую область следующую разметку:

<div>
  <div>
    <h2>Заголовок статьи</h2>
  </div>
  <div>
    <p>А здесь находится текст статьи</p>
  </div>
</div>

Попробуйте изменять блочные и строчные теги, добавлять и удалять их. Посмотрите, как будет меняться поведение.

Дополнительные материалы
  1. Верстка текста. Списки — HTML Basics: Урок 3

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Данная страница не существует!

  • О центре

    • История

    • Структура

    • Совет Директоров

    • Руководство

    • Специалисты

      • Помним

    • Дирекция специальных проектов

    • Дирекция научно-технических проектов и экспертиз

    • Вакансии

    • Научные школы

    • Партнеры

    • Технологическая платформа «Строительство и архитектура»

    • Членство в организациях

    • Лицензии

    • Раскрытие информации

      • Отчетность 2019

      • Непрофильные активы

    • Противодействие коррупции

    • Социальная ответственность

  • Услуги

    • В сфере подземного строительства

      • Геологические изыскания

      • Инженерные изыскания

    • В сфере бетонного строительства

    • В высотном и уникальном строительстве

    • Проектирование

    • Управление проектами

      • Проект реконструкции

    • Экспертиза

      • Обследование зданий

    • Технологический и ценовой аудит (ТЦА)

    • Галерея проектов

    • Ультразвуковой контроль сплошности свай и ультразвуковой контроль сплошности стен в грунте

    • Акустическое обследование фундаментных плит

    • Сейсмоакустический контроль сплошности свай

    • Сейсмоакустический контроль сплошности фундаментов и плит, поиск дефектов и пустот

    • Динамические испытания свай по волновой теории удара

    • Статические испытания свай

    • Теплоконтроль сейсмичности при бетонировании свай

  • Новости

    • Новости Центра

    • Новости отрасли

    • Календарь мероприятий

    • СМИ о нас

    • Отзывы организаций

    • Закупки

  • Центр
    сертификации

  • Заказчику

    • Оборудование

    • Контакты

  • Научно —
    техническая
    деятельность

    • Научные и инновационные разработки в области строительства и их внедрение

    • Научно-исследовательские (теоретические, поисковые и прикладные) работы

    • Научно-технический совет (НТС)

    • Научно-техническое сопровождение

    • Нормативно-технические документы

      • Разработка СТУ

    • Сотрудничество

    • BIM-технологии

    • Интеллектуальная собственность

    • Корпоративные издания

  • Научно —
    образовательная
    деятельность

    • Сведения об образовательной деятельности

    • Диссертационный совет

    • Информация о защитах диссертаций

    • Аспирантура

    • Подготовка диссертаций без освоения программы подготовки научно-педагогических кадров в аспирантуре

    • Прикрепление для сдачи кандидатских экзаменов

    • Докторантура

    • Повышение квалификации

    • Учебные программы Центра информационного моделирования

    • Психология личностного роста в профессиональной деятельности

    • ПК СТАРКОН. Обучение.

    • Кафедра Иностранных языков и кафедра Философии

    • Кафедра Строительные сооружения, конструкции и материалы

  • Вакансии

  • Контакты

    • Обратная связь

Блочная модель — Изучите веб-разработку

  • Предыдущая
  • Обзор: строительные блоки
  • Следующий

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

Предпосылки: Базовая компьютерная грамотность, установлено базовое программное обеспечение, базовые знания работа с файлами, основы HTML (изучение Введение в HTML) и представление о том, как работает CSS (изучите Первые шаги CSS.)
Цель: Чтобы узнать о блочной модели CSS, из чего состоит блочная модель и как ее переключиться на альтернативную модель.

В CSS есть два типа блоков — блочные блоки и встроенные блоки . Тип относится к тому, как блок ведет себя с точки зрения потока страниц и по отношению к другим блокам на странице. Коробки имеют внутренний дисплей типа и внешний дисплей типа .

В общем, вы можете установить различные значения для типа дисплея, используя свойство display , которое может иметь различные значения.

Если коробка имеет тип внешнего дисплея блок , затем:

  • Коробка перейдет на новую строку.
  • Свойства width и height учитываются.
  • Отступы, поля и границы заставят другие элементы быть отодвинутыми от поля.
  • Коробка выдвинется в линейном направлении, чтобы заполнить пространство, доступное в ее контейнере. В большинстве случаев коробка становится такой же ширины, как и ее контейнер, заполняя 100% доступного пространства.

Некоторые элементы HTML, например

и

, по умолчанию используйте блок в качестве внешнего типа отображения.

Если блок имеет тип внешнего отображения встроенный , тогда:

  • Блок не будет переходить на новую строку.
  • Свойства width и height не применяются.
  • Будут применяться вертикальные отступы, поля и границы, но другие встроенные блоки не будут отодвигаться от блока.
  • Будут применены горизонтальные отступы, поля и границы, которые заставят другие встроенные блоки отойти от блока.

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

Блоки также имеют внутренний тип отображения , который определяет расположение элементов внутри этого блока.

Блочный и встроенный макет — это то, как по умолчанию все работает в Интернете. По умолчанию и без каких-либо других инструкций элементы внутри коробки также располагаются в обычный поток и ведут себя как блочные или встроенные блоки.

Вы можете изменить тип внутреннего дисплея, например, установив display: flex; . Элемент по-прежнему будет использовать тип внешнего отображения block , но это изменит тип внутреннего отображения на flex . Любые непосредственные дочерние элементы этого блока станут гибкими элементами и будут вести себя в соответствии со спецификацией Flexbox.

Когда вы перейдете к более подробному изучению CSS Layout, вы столкнетесь с flex и различные другие внутренние значения, которые могут иметь ваши блоки, например grid .

Примечание: Чтобы узнать больше о значениях отображения и о том, как блоки работают в блочном и встроенном макете, ознакомьтесь с руководством MDN «Блочный и встроенный макет».

В приведенном ниже примере есть три разных HTML-элемента, каждый из которых имеет тип внешнего отображения block .

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *