что такое блок в html

Блочная модель

что такое блок в html. 3 01. что такое блок в html фото. что такое блок в html-3 01. картинка что такое блок в html. картинка 3 01. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.1. Свойства, формирующие блочный элемент

Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.

что такое блок в html. 3 02. что такое блок в html фото. что такое блок в html-3 02. картинка что такое блок в html. картинка 3 02. Рис. 3.1. Свойства, формирующие блочный элемент

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

Пример 3.1.Использование свойства padding

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 3.3.

что такое блок в html. 3 03. что такое блок в html фото. что такое блок в html-3 03. картинка что такое блок в html. картинка 3 03. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.3. Поля вокруг текста

Значения полей не могут быть отрицательными.

Границы

Пример 3.2. Красная пунктирная линия

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.4.

что такое блок в html. 3 04. что такое блок в html фото. что такое блок в html-3 04. картинка что такое блок в html. картинка 3 04. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.4. Линия возле текста

Отступы

Отступом будем называть пустое пространство от внешнего края границы, полей или содержимого блока. Как уже упоминалось, границы с полями не обязательны и могут отсутствовать, так что способ формирования отступов зависит от ситуации. Как и в случае с полями, применяют выражения «верхний отступ» или «отступ сверху», и им подобные для других сторон. Обозначение «отступы» следует понимать как одинаковое значение отступов для всех сторон.

Для отступов характерны следующие особенности.

В примере 3.3 показано схлопывание отступов и их прозрачность.

Пример 3.3. Использование отступов

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.

что такое блок в html. 3 05. что такое блок в html фото. что такое блок в html-3 05. картинка что такое блок в html. картинка 3 05. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.5. Отступы в элементе

Ширина блока

Ширина блока это комплексная величина и складывается из нескольких значений свойств:

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

что такое блок в html. 3 06. что такое блок в html фото. что такое блок в html-3 06. картинка что такое блок в html. картинка 3 06. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.6. Ширина блока

Допустим, для слоя написан следующий стиль.

Ширина блока согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся (в CSS3 так суммировать можно, только поддерживается эта возможность далеко не всеми браузерами). В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два — поменять алгоритм блочной модели и воспользоваться вложенными слоями.

Алгоритм блочной модели

Табл. 3.1. Поддержка браузерами свойства box-sizing

БраузерInternet ExplorerChromeOperaSafariFirefox
Версия8.0+2.0+7.0+3.0+1.0+
Свойствоbox-sizing-webkit-box-sizingbox-sizing-webkit-box-sizing-moz-box-sizing

Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства одновременно (пример 3.4).

Пример 3.4. Ширина блока

XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx

Вложенные слои

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая — для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное — поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 3.5 показано использование вложенных слоев.

Пример 3.5. Вложенные слои

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.7.

что такое блок в html. 3 07. что такое блок в html фото. что такое блок в html-3 07. картинка что такое блок в html. картинка 3 07. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.7. Ширина блока в процентах

Преимуществом вложенных слоев является использование отступов ( box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить добавление дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.

Высота блока

что такое блок в html. 3 08. что такое блок в html фото. что такое блок в html-3 08. картинка что такое блок в html. картинка 3 08. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.8. Высота блока

Пример 3.6. Высота блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.9.

что такое блок в html. 3 09. что такое блок в html фото. что такое блок в html-3 09. картинка что такое блок в html. картинка 3 09. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.9. Высота блока в процентах

С высотой связана ещё одна особенность — при превышении содержимого блока его размеров при заданной высоте, содержимое начинается отображаться поверх блока (рис. 3.10).

что такое блок в html. 3 10. что такое блок в html фото. что такое блок в html-3 10. картинка что такое блок в html. картинка 3 10. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 3.10. Превышение размеров блока

Код, приводящий к подобному результату, приведен в примере 3.7.

Пример 3.7. Превышение размеров блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

что такое блок в html. 3 11a. что такое блок в html фото. что такое блок в html-3 11a. картинка что такое блок в html. картинка 3 11a. Рис. 3.1. Свойства, формирующие блочный элемент

что такое блок в html. 3 11b. что такое блок в html фото. что такое блок в html-3 11b. картинка что такое блок в html. картинка 3 11b. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 11. Использование свойства overflow

Если задать одновременно цвет фона и пунктирную границу блока, то становится заметно, что граница проходит внутри цветной области. Правда в разных браузерах наблюдается разночтение, в частности Internet Explorer до версии 7.0 включительно содержит ошибку, при которой фон выводится по внутреннему краю границы (рис. 12в). Начиная с версии 8.0 эта ошибка исправлена, и фон выводится по стандартам (рис. 12г). Браузеры Opera (рис. 12а), Firefox (12б), Safari и Chrome (рис. 12д) фон выводят правильно. Небольшие различия наблюдаются при отображении пунктирной рамки, но они не влияют на блочную модель.

что такое блок в html. 3 12a. что такое блок в html фото. что такое блок в html-3 12a. картинка что такое блок в html. картинка 3 12a. Рис. 3.1. Свойства, формирующие блочный элемент

что такое блок в html. 3 12b. что такое блок в html фото. что такое блок в html-3 12b. картинка что такое блок в html. картинка 3 12b. Рис. 3.1. Свойства, формирующие блочный элемент

что такое блок в html. 3 12c. что такое блок в html фото. что такое блок в html-3 12c. картинка что такое блок в html. картинка 3 12c. Рис. 3.1. Свойства, формирующие блочный элемент

что такое блок в html. 3 12d. что такое блок в html фото. что такое блок в html-3 12d. картинка что такое блок в html. картинка 3 12d. Рис. 3.1. Свойства, формирующие блочный элемент

что такое блок в html. 3 12e. что такое блок в html фото. что такое блок в html-3 12e. картинка что такое блок в html. картинка 3 12e. Рис. 3.1. Свойства, формирующие блочный элемент

Рис. 12. Отображение фона в браузере

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

Пример 3.8. Фон и граница

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид блока в браузерах будет практически одинаковым.

Источник

УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Уроки HTML и CSS

Урок 7. Блочная верстка web-сайта. Часть 1

Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.

1. Основные понятия

Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега

Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы (рис. 1). Содержимым блока может быть что угодно – текст, картинки, списки, формы для заполнения, меню навигации и т.п.

что такое блок в html. 7.1. что такое блок в html фото. что такое блок в html-7.1. картинка что такое блок в html. картинка 7.1. Рис. 3.1. Свойства, формирующие блочный элемент

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.

В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

что такое блок в html. 7.2. что такое блок в html фото. что такое блок в html-7.2. картинка что такое блок в html. картинка 7.2. Рис. 3.1. Свойства, формирующие блочный элемент

Контейнер будет содержать в себе пять блоков:

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:

CENTER – содержит основной текст страницы;

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

Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.

Описание web-страницы в основном делается в CSS документе.

2. «Фиксированный» дизайн методом блочной верстки

1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

2. Создайте HTML-документ и сохраните его в той же папке.

3. В самом начале HTML-документа впишите следующую строку:

Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает.

4. Одной строкой между тегами и присоедините документ mystyle.css к документу HTML (рисунок 3).

что такое блок в html. 7.3. что такое блок в html фото. что такое блок в html-7.3. картинка что такое блок в html. картинка 7.3. Рис. 3.1. Свойства, формирующие блочный элемент

5. В таблице стилей наберите код как на рисунке 4.

что такое блок в html. 7.4. что такое блок в html фото. что такое блок в html-7.4. картинка что такое блок в html. картинка 7.4. Рис. 3.1. Свойства, формирующие блочный элемент

# этот знак говорит, что элемент является уникальным атрибутом и используется в HTML документе в теге div один раз.

6. Добавьте в mystyle.css шапку сайта (рисунок 5).

что такое блок в html. 7.5. что такое блок в html фото. что такое блок в html-7.5. картинка что такое блок в html. картинка 7.5. Рис. 3.1. Свойства, формирующие блочный элемент

7. Добавим HTML документ следующий код между тегами body (рисунок 6).

что такое блок в html. 7.6. что такое блок в html фото. что такое блок в html-7.6. картинка что такое блок в html. картинка 7.6. Рис. 3.1. Свойства, формирующие блочный элемент

И у Вас должно получиться следующее (рис. 7).

что такое блок в html. 7.7. что такое блок в html фото. что такое блок в html-7.7. картинка что такое блок в html. картинка 7.7. Рис. 3.1. Свойства, формирующие блочный элемент

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

8. Откройте css-документ и добавьте следующий код (рисунок 8).

что такое блок в html. 7.8. что такое блок в html фото. что такое блок в html-7.8. картинка что такое блок в html. картинка 7.8. Рис. 3.1. Свойства, формирующие блочный элемент

Каждая строка кода имеет комментарий, заключенный в скобки /* комментарий */, который не отображается в браузере. Напомню, элементы со знаком # используются в теге div HTML-документа один только раз! Элемент clear содержит точку, которая идентифицирует его как class, может использоваться многократно, что и является различием между этими элементами. Теперь отразим все это в нашем HTML-документе.

9. Сразу после закрывающегося тега

что такое блок в html. 7.9. что такое блок в html фото. что такое блок в html-7.9. картинка что такое блок в html. картинка 7.9. Рис. 3.1. Свойства, формирующие блочный элемент

10. Откройте HTML-документ в браузере. Должно получиться такая div верстка (рисунок 10).

что такое блок в html. 7.10. что такое блок в html фото. что такое блок в html-7.10. картинка что такое блок в html. картинка 7.10. Рис. 3.1. Свойства, формирующие блочный элемент

11. Теперь добавьте блок footer самостоятельно. Браузер должен показать такую блочную верстку сайта (рисунок 11).

что такое блок в html. 7.11. что такое блок в html фото. что такое блок в html-7.11. картинка что такое блок в html. картинка 7.11. Рис. 3.1. Свойства, формирующие блочный элемент

Рассмотрим атрибуты relative и absolute.

Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

Рассмотрим простейший код.

что такое блок в html. 7.12. что такое блок в html фото. что такое блок в html-7.12. картинка что такое блок в html. картинка 7.12. Рис. 3.1. Свойства, формирующие блочный элемент

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

Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13.

что такое блок в html. 7.13. что такое блок в html фото. что такое блок в html-7.13. картинка что такое блок в html. картинка 7.13. Рис. 3.1. Свойства, формирующие блочный элемент

3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14). Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!

что такое блок в html. 7.14. что такое блок в html фото. что такое блок в html-7.14. картинка что такое блок в html. картинка 7.14. Рис. 3.1. Свойства, формирующие блочный элемент

Проблема решается довольно просто: родителю дополнительно задаётся position: relative;

4. Измените код своей таблицы стилей в соответствии с рисунком 15.

что такое блок в html. 7.15. что такое блок в html фото. что такое блок в html-7.15. картинка что такое блок в html. картинка 7.15. Рис. 3.1. Свойства, формирующие блочный элемент

5. Проверьте web-страничку в браузере. Результат на рисунке 16. Оцените разницу.

что такое блок в html. 7.16. что такое блок в html фото. что такое блок в html-7.16. картинка что такое блок в html. картинка 7.16. Рис. 3.1. Свойства, формирующие блочный элемент

Создать web-страницу, внешний вид которой изображен ниже на рисунке 17

что такое блок в html. 7.17. что такое блок в html фото. что такое блок в html-7.17. картинка что такое блок в html. картинка 7.17. Рис. 3.1. Свойства, формирующие блочный элемент

3. «Резиновый» сайт методом блочной верстки

В заданиях 1 и 2 мы рассмотрели «фиксированный» дизайн методом блочной верстки, т.к. все блоки имели точное значение по ширине и высоте в пикселах.

В случае «резинового» дизайна размеры блоков задаются в процентах от ширины экрана. По высоте размер блока может определяться содержимым блока.

Задание 3. Создадим «резиновый» блочный макет как на рисунке 18.

что такое блок в html. 7.18. что такое блок в html фото. что такое блок в html-7.18. картинка что такое блок в html. картинка 7.18. Рис. 3.1. Свойства, формирующие блочный элемент

1. Создайте HTML-документ с кодом, как на рисунке 19. Сохраните документ.

что такое блок в html. 7.19. что такое блок в html фото. что такое блок в html-7.19. картинка что такое блок в html. картинка 7.19. Рис. 3.1. Свойства, формирующие блочный элемент

2. Создайте таблицу стилей как на рисунке 20. Сохраните документ. Вы должны получить результат ка на рисунке 18.

3. Изменяя размеры браузера, проанализируйте поведение макета.

что такое блок в html. 7.20. что такое блок в html фото. что такое блок в html-7.20. картинка что такое блок в html. картинка 7.20. Рис. 3.1. Свойства, формирующие блочный элемент

4. Комбинированная блочная верстка

Комбинированная блочная верстка (div верстка) включает как блоки фиксированной ширины, так и блоки в процентном отношении к ширине экрана.

Задание 4. Создадим комбинированный блочный макет как на рисунке 21.

что такое блок в html. 7.21. что такое блок в html фото. что такое блок в html-7.21. картинка что такое блок в html. картинка 7.21. Рис. 3.1. Свойства, формирующие блочный элемент

1. Создайте HTML-документ с кодом, как на рисунке 22.

что такое блок в html. 7.22. что такое блок в html фото. что такое блок в html-7.22. картинка что такое блок в html. картинка 7.22. Рис. 3.1. Свойства, формирующие блочный элемент

2. Создайте таблицу стилей как на рисунке 23. Сохраните документ. Вы должны получить результат ка на рисунке 21.

3. Изменяя размеры браузера, проанализируйте поведение макета.

что такое блок в html. 7.23. что такое блок в html фото. что такое блок в html-7.23. картинка что такое блок в html. картинка 7.23. Рис. 3.1. Свойства, формирующие блочный элемент

Методом блочной верстки создайте web-страницу для сайта архитектурных проектов коттеджей так, как изображено на рис. 24. Изображение для шапки сайта (shapka_div.jpg).

Требования к макету:

Источник

Вёрстка страницы сайта

что такое блок в html. page layout. что такое блок в html фото. что такое блок в html-page layout. картинка что такое блок в html. картинка page layout. Рис. 3.1. Свойства, формирующие блочный элемент

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.

Как создать структуру страницы с помощью блоков (блочная вёрстка)

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.

Стандартная веб-страница содержит следующие секции:

что такое блок в html. structure main. что такое блок в html фото. что такое блок в html-structure main. картинка что такое блок в html. картинка structure main. Рис. 3.1. Свойства, формирующие блочный элементРис. 1. Основные секции страницы

что такое блок в html. container main. что такое блок в html фото. что такое блок в html-container main. картинка что такое блок в html. картинка container main. Рис. 3.1. Свойства, формирующие блочный элемент Рис. 2. Основные секции страницы с тегом-контейнером

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

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

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:

что такое блок в html. container header. что такое блок в html фото. что такое блок в html-container header. картинка что такое блок в html. картинка container header. Рис. 3.1. Свойства, формирующие блочный элементРис. 3. Шапка сайта с добавленными логотипом и ссылками

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

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

что такое блок в html. header collapse. что такое блок в html фото. что такое блок в html-header collapse. картинка что такое блок в html. картинка header collapse. Рис. 3.1. Свойства, формирующие блочный элементРис. 4. Эффект схлопывания блока-контейнера

Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:

что такое блок в html. header. что такое блок в html фото. что такое блок в html-header. картинка что такое блок в html. картинка header. Рис. 3.1. Свойства, формирующие блочный элементРис. 5. Очистка потока

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

что такое блок в html. hyperlinks header. что такое блок в html фото. что такое блок в html-hyperlinks header. картинка что такое блок в html. картинка hyperlinks header. Рис. 3.1. Свойства, формирующие блочный элементРис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

что такое блок в html. layout main. что такое блок в html фото. что такое блок в html-layout main. картинка что такое блок в html. картинка layout main. Рис. 3.1. Свойства, формирующие блочный элементРис. 7. Сетка основной части страницы

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

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

что такое блок в html. different height. что такое блок в html фото. что такое блок в html-different height. картинка что такое блок в html. картинка different height. Рис. 3.1. Свойства, формирующие блочный элементРис. 8. Разная высота элементов сетки

что такое блок в html. equal height. что такое блок в html фото. что такое блок в html-equal height. картинка что такое блок в html. картинка equal height. Рис. 3.1. Свойства, формирующие блочный элементРис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

4. Разметка подвала страницы

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

Источник

Блочная модель

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

Узнать как работает блочная модель CSS, из чего она состоит и как переключиться на альтернативную модель.

Блочные и строчные элементы

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

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

Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например,

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

Если элемент имеет тип отображения inline (строчный), то:

Экскурс: внутренний и внешний типы отображения

Здесь следует объяснить, что такое внутренние и внешние типы отображения. Как уже говорилось выше, каждый блок в CSS имеет внешний тип отображения, который определяет, блочный он или строчный.

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

Примечание: Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN Блочное и срочное расположение (en-US).

Тем не менее, блочное и строчное расположение — это поведение web-элементов по умолчанию. Как было сказано выше, это иногда называют нормальным потоком (normal flow), потому что при отсутствии какой-либо другой инструкции элементы имеют блочное или строчное расположение.

Примеры разных типов отображения

Мы можем видеть, как строчные элементы ( inline ) ведут себя в следующем примере. Элементы в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.

В примере вы можете заменить display: inline на display: block или display: inline-flex на display: flex для переключения между этими двумя режимами отображения.

Позже в этих уроках вы встретите такое понятие как flex-раскладка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства display может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в раскладке страницы.

В оставшейся части урока мы сосредоточимся на внешнем типе отображения.

Что такое блочная модель CSS?

Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Дополнительная сложность заключается в том, что существуют стандартная и альтернативная блочные модели.

Составляющие элемента

Составляя блочный элемент в CSS мы имеем:

Рисунок ниже показывает эти слои:

что такое блок в html. box model. что такое блок в html фото. что такое блок в html-box model. картинка что такое блок в html. картинка box model. Рис. 3.1. Свойства, формирующие блочный элемент

Стандартная блочная модель CSS

Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.

что такое блок в html. standard box model. что такое блок в html фото. что такое блок в html-standard box model. картинка что такое блок в html. картинка standard box model. Рис. 3.1. Свойства, формирующие блочный элемент

Примечание: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.

Альтернативная блочная модель CSS

Вы можете подумать, что довольно неудобно добавлять рамки и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).

что такое блок в html. alternate box model. что такое блок в html фото. что такое блок в html-alternate box model. картинка что такое блок в html. картинка alternate box model. Рис. 3.1. Свойства, формирующие блочный элемент

Примечание: Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.

Играем с блочными моделями

Примечание: вы можете найти решение этой задачи здесь.

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

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

что такое блок в html. box model devtools. что такое блок в html фото. что такое блок в html-box model devtools. картинка что такое блок в html. картинка box model devtools. Рис. 3.1. Свойства, формирующие блочный элемент

Внешние, внутренние отступы и рамки

Давайте рассмотрим эти свойства более подробно.

Внешний отступ (margin)

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

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

Схлопывание внешних отступов

Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания. Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.

В примере ниже есть два абзаца. Первому абзацу задан margin-bottom 50 пикселей. У второго абзаца margin-top 30 пикселей. Отступы схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму отдельных значений margin.

Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. margin collapsing. Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит.

Рамка

Для стилизации рамок существует большое количество различных свойств: четыре рамки, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.

Чтобы установить индивидуальные свойства для каждой из четырёх сторон, вы можете использовать:

Для установки ширины, стиля или цвета всех рамок используйте:

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

В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.

Внутренний отступ (padding)

Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.

Блочная модель и строчные элементы

Использование display: inline-block

Элемент с display: inline-block применяет ряд свойств блочного элемента, о которых мы уже знаем:

Проверьте свои навыки!

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

Заключение

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

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

Источник

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

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