Блочная верстка тегов div html

Как не ошибиться с z-index?

Все элементы на странице позиционируются в трехмерном пространстве: в дополнение к вертикальному и горизонтальному позиционированию, элементы также располагаются вдоль оси Z. На первый взгляд, эта концепция кажется довольно простой: элементы с более высоким z-index отображаются поверх элементов с более низким z-index.

К сожалению, вещи могут быть более сложными, чем они кажутся на первый взгляд. Я вообще уверен, что это самое запутанное CSS-свойство. Уверен, что проблемы с z-index — самые распространенные и раздражающие, с которыми только можно встретиться во время работы с CSS. Но мы постараемся найти решение.

Начнем с начала: свойство z-index не работает со статичными элементами. Для того, чтобы сдвинуть элемент по оси Z, нужно определить позиционирование для элемента, как relative, absolute или fixed. Так что первая вещь, которую мы должны сделать — убедиться, что элемент правильно спозиционирован, прежде чем вообще задумываться о том, чтобы назначить ему z-index.

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

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

1. фон и границы элемента, который формирует групповой контекст
2. дочерние групповые контексты с отрицательными уровнями (первыми идут наименьшие)
3. внутри-потоковые, не-строчные, неспозиционированные потомки
4. не-спозиционированные плавающие элементы
5. внутри-потоковые, строчные, неспозиционированные потомки, включая таблицы и большинство строчных блоков
6. дочерние групповые контексты с уровнем 0 и спозиционированные потомки с уровнем 0
7. дочерние групповые контексты с положительными уровнями (от меньшего к большему)

Когда результат ужасает

Хорошо, это была самая основная информация о свойстве z-index. Знания об этом могут сэкономить вам много времени, и уменьшить количество проблем, уж будьте уверены. К сожалению, этого недостаточно. Это были ещё цветочки!

Дело в том, что каждый групповой контекст имеет свой собственный масштаб по оси Z. В основном, элемент A в групповом контексте 1 и элемент B в групповом контексте 2 не могут взаимодействовать посредством z-индексов. Это значит, что элемент A является частью группового контекста, который находится в самом низу порядка группировки, и нет возможности вывести его перед элементом B, который находится в другом групповом контексте, который имеет более высокий групповой порядок, даже если вы зададите ему очень высокий z-index.

Но подождите — на самом деле, все еще хуже. Элемент html формирует корневой групповой контекст. В таком случае, каждый спозиционированный (не-статичный) блок со значением z-index больше, чем auto создает новый групповой контекст. Ничего нового в этом нет. А вот здесь все становится довольно печально: некоторые CSS-свойства, совершенно не связанные с позиционировнием, создают новые групповые контексты. К примеру, opacity.

Да, да — свойство opacity создает новый групповой контекст. Так же действуют свойства transform и perspevtive. Но ведь это не имеет смысла, не так ли? Значит, что если у вас есть элемент с прозрачностью, отличающейся от 1, или с трансформацией, отличной от none — у вас есть потенциальная проблема.

К сожалению, каждая проблема с z-index уникальна, так что нет возможности предложить какое-либо универсально решение для всех проблем с z-index. Под конец можно вывести несколько заключений:

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

Форматирование

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<acronym>	Не поддерживается в HTML5. Определяет акроним. Используйте вместо данного элемента <abbr>.	Да	Да	Да	Да	Да	Да
<abbr>	Определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковиков.	Да	Да	Да	Да	Да	Да
<address>	Определяет контактную информацию (автор / владелец) документа или статьи.	Да	Да	Да	Да	Да	Да
<b>	Определяет жирное начертание текста.	Да	Да	Да	Да	Да	Да
<bdi>	Изолирует фрагмент текста, который отформатирован в другом направлении, то есть позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью.	Да	Да	Да	Да	Нет	Нет
<bdo>	Используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например — арабский).	Да	Да	Да	Да	Да	Да
<big>	Не поддерживается в HTML5.Шрифт, который отображается большего размера. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<blockquote>	Определяет блочную цитату (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа	Да	Да	Да	Да	Да	Да
<center>	Не поддерживается в HTML5.Определяет текст, который выровнен по центру. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<cite>	Предназначен для выделения названия произведений (по умолчанию — курсивом).	Да	Да	Да	Да	Да	Да
<code>	Предназначен для выделения части компьютерного кода (по умолчанию представлен моноширинным шрифтом).	Да	Да	Да	Да	Да	Да
<del>	Перечёркнутый (удалённый) текст	Да	Да	Да	Да	Да	Да
<dfn>	Используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, оно выделяется курсивом.	Да	Да	Да	Да	Да	Да
<em>	Экспрессивно-эмоциональное выделение текста	Да	Да	Да	Да	Да	Да
<font>	Не поддерживается в HTML5.Определяет цвет, размер и шрифт для текста. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<i>	Курсивное начертание текста	Да	Да	Да	Да	Да	Да
<ins>	Подчёркнутый текст, вставленный в документ.	Да	Да	Да	Да	Да	Да
<kbd>	Вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре.	Да	Да	Да	Да	Да	Да
<mark>	Выделенный/подсвеченный текст.	6.0	4.0	11.1	5.0	9.0	12.0
<meter>	Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение.	8.0	6.0	11.0	6.0	Нет	13.0
<pre>	Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк	Да	Да	Да	Да	Да	Да
<progress>	Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена.	8.0	16.0	11.0	6.0	10.0	12.0
<q>	Используется для выделения коротких цитат (строчная цитата).	Да	Да	Да	Да	Да	Да
<rp>	Определяет, что отображать браузеру, который не поддерживает тег <ruby>	5.0	38.0	15.0	5.0	5.5	12.0
<rt>	Помещает полезный текст фуриганы в составе элемента <ruby>	5.0	38.0	15.0	5.0	5.5	12.0
<ruby>	Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана).	5.0	38.0	15.0	5.0	5.5	12.0
<s>	Определяет текст, который больше не является правильным или актуальным.	Да	Да	Да	Да	Да	Да
<samp>	Результат вывода компьютерной программы или скрипта.	Да	Да	Да	Да	Да	Да
<small>	Шрифт, который отображается меньшим размером(мелкий/юридический шрифт).	Да	Да	Да	Да	Да	Да
<strike>	Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s>	Да	Да	Да	Да	Да	Да
<strong>	Текст, которому придают особое значение (важный текст).	Да	Да	Да	Да	Да	Да
<sub>	Текст с нижним индексом.	Да	Да	Да	Да	Да	Да
<sup>	Текст с верхним индексом.	Да	Да	Да	Да	Да	Да
<time>	Тег временной разметки (семантическая разметка).	6.0	4.0	11.1	5.0	9.0	12.0
<tt>	Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<u>	Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке.	Да	Да	Да	Да	Да	Да
<var>	Математические/переменные величины.	Да	Да	Да	Да	Да	12.0
<wbr>	Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL).	1.0	3.0	11.7	4.0	Нет	Да

Верстка форм

1. Не используйте для разметки групп инпутов и
   

   Почему?

   Html урок 6. фреймовая структура html

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

   А как надо?

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

   Например, так как используется для групп полей, а у каждого поля есть лейбл, каждой паре + обычно требуется обёртка, и здесь можно удобно использовать ненумерованные списки (). После этого можно всё позиционирование делать для списка и его элементов, и с раскладкой больше не будет никаких проблем. Чтобы вместе с инпутом не читалась информация об элементах списка, его нужно скрыть от скринридеров, задав .

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

   • Плохо
   • Хорошо

2. Не используйте вместо
   

   Почему?

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

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

   Как это увидеть?

   Посмотрите на форму без стилей:

   А как надо?

   Для одиночного текстового поля не нужны и , они для групп полей. Если такому полю требуется обёртка, можно использовать . Название поля нужно поместить в .

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

   • Плохо
   • Хорошо

   Теперь ничего не дублируется:

3. Не используйте для скрытия инпутов
   

   Почему?

   Инпуты, спрятанные таким образом, становятся полностью недоступны для скринридеров и навигации с клавиатуры

   Как это увидеть?

   Установите фокус в первое поле и перемещаясь по форме с помощью и стрелок попробуйте выбрать цвет кота:

   Ничего не получится, с клавиатуры выбор цвета недоступен.

   А как надо?

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

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

   Попробуйте теперь с помощью и стрелок выбрать цвет кота (чтобы выбрать цвет нажмите пробел):

   Всё работает.

Итого

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

Очистка потока (float clearing) — вопрос, старый, как мир

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

В основном, когда элемент содержит внутри себя плавающие (float) блоки, он “схлопывается” — принимает минимальную высоту. Это происходит оттого, что плавающие элементы выбиваются из общего потока элементов, так что блок, в который обернуты эти элементы, ведет себя так, как будто не содержит внутри себя никаких дочерних элементов.

Есть множество путей, позволяющих исправить подобное поведение. В прошлом приходилось добавлять пустой div со свойством clear: both после всех плавающих элементов, в конце контейнера. Также можно было этот div заменить тегом hr — тоже не самый лучший вариант.

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

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Вообще-то я солгал говоря, что это версия — самая последняя, но это определенно самый оптимизированный вариант. Если вам нужна поддержка IE 6/7, то вам понадобиться это дополнительный код:

.clearfix {
  *zoom: 1;
}

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

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

Полезно прочитать (англ.)

• http://www.w3.org/TR/html5/ — W3C Working Draft 10 Июня 2008.
• http://en.wikipedia.org/wiki/HTML_5 — О HTML 5.
• http://www.w3.org/TR/html5-diff/ — Разница между HTML 5 и 4.
• http://www.alistapart.com/articles/previewofhtml5 — Предобзор HTML 5.
• http://www.alistapart.com/articles/semanticsinhtml5 — Семантика HTML 5.
• http://www.builderau.com.au/program/html/soa/HTML-5-Editor-Ian-Hickson-discusses-features-pain-points-adoption-rate-and-more/0,339028420,339292515,00.htm — HTML 5 редактор Ян Хиксон обсуждает острые моменты, функционал и т.д. HTML 5
• http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/ — Будущее — за табличной вёрсткой (CSS).
• http://www.css3.info/preview/multi-column-layout/ — W3C предлагает новый способ организации текста “newspaper-wise,” в столбцы.

Примеры использования тегов div

Давайте разберем на практике несколько примеров как можно применить теги div на html странице. На простом примере мы создадим 4 блока на странице. Я буду всегда использовать в этом и дальнейших примерах программу Notepad++

Итак, давайте поясню. У нас есть конструкция
<!DOCTYPE html>  она годна для современных браузеров и поддерживает разметку html 5 про нее мы поговорим в дальнейших выпусках.

Далее открывается большой «родительский» контейнер
<html> . Он парный его нужно закрыть в конце обязательно! Потом идет открытие служебного тега
<head> , который тоже парный и в нем содержится служебная информация о кодировке
<meta charset> , самый главный seo заголовок страницы title, описание (его сюда я не включал, ибо нет необходимости, мы разбираем чисто технический аспект), сюда же подключают CSS стили, шрифты (библиотека Google Fonts), яваскрипты.

Следующим идет тег
<body> . В нем уже будет хранится вся наша разметка блоков и все контейнеры с тегами. Просто запомните его как огромную «бочку».

И вот, наконец, пошли наши контейнеры div.

<div class=»header»></div>
<div class=»sidebar»></div>
<div class=»content»></div>
<div class=»footer»></div>

1 2 3 4

<div class=»header»></div> <div class=»sidebar»></div> <div class=»content»></div> <div class=»footer»></div>

Важно! Они тоже парные их нужно также наряду с другими тегами закрывать. Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их

Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс

Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их. Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс.

Можно задавать не только атрибут class, но также можно использовать и id (идентификатор). Вы можете задать вопрос: «А какая мне разница, какой использовать?» Отвечу, для верстки можете применить любой способ. С одним лишь отличием — по приоритету
id имеет больше привилегий, чем
class .

Это я поясню в видео шпаргалке ниже.

У каждого свой стиль создания сайтов, мне больше нравится использовать именно class, поскольку эта запись в CSS отображается с точкой
.selector

Да, кстати, хочу сказать, что header, sidebar, content, footer — это все селекторы CSS, а они уже будут иметь атрибуты.

Итак, продолжаем разгребать кашу в головах пользователей. Div блоки с class мы создали теперь приступим к CSS.

Откроем внутри тега head css правила для нашей страницы, т.е оформим ее. Сделаем это вот так:

Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)

<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>Пример использования div тегов</title>
<style>
.header {
width:600px;
height:120px;
border:1px solid black;
}

.sidebar {
width:200px;
height:300px;
border:1px solid black;
float:left;
}

.content {
width:370px;
height:300px;
border:1px solid black;
margin-left:230px;
}

.footer {
width:600px;
height:130px;
border:1px solid black;
}
</style>
</head>
<body>
<div class=»header»></div>
<div class=»sidebar»></div>
<div class=»content»></div>
<div class=»footer»></div>
</body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>Примериспользованияdivтегов</title> <style> .header { width600px; height120px; border1pxsolidblack; } .sidebar { width200px; height300px; border1pxsolidblack; floatleft; } .content { width370px; height300px; border1pxsolidblack; margin-left230px; } .footer { width600px; height130px; border1pxsolidblack; } </style> </head> <body> <div class=»header»></div> <div class=»sidebar»></div> <div class=»content»></div> <div class=»footer»></div> </body> </html>

Чтобы увидеть границы наших div блоков я применил атрибут
border  и задал значение
1px,solid  — сплошная линия и выбрал цвет черный black.

Также вы наверняка обратили внимание, что у селектора
.sidebar я добавил атрибут
floatleft;  Это обеспечивает «обтекание» других блоков по левому краю. Вот что получилось бы, если мы уберем этот элемент:

Теперь предлагаю вашему вниманию видео урок, где я подробно рассказываю про возможности html div верстки. Смотрите внимательно и просто повторяйте. Ниже можете скачать исходник с нашим примером

Спасибо за внимание!

Скачать Исходник

DIV верстка сайта

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

Давайте посмотрим этот процесс, на примере стандартной страницы, включающей в себя шапку, блок контента, сайдбар и футер.

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

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

• MAIN
• header
• nav
• content
• footer

Блок Main используется как контейнер для всего содержимого. Header — шапка сайта. Nav — блок навигации. Content — основная информация и контент. Footer — подвал сайта.

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

• MAIN
  • header
  • nav
  • content
  • footer

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

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

HTML div блоки и верстка

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

Здесь располагался логотип Тут телефон
Здесь был сайдбарС пунктами меню	Раздел меню 1	Раздел меню 2	Раздел меню 3

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

Ее значение в сайтостроении действительно велико. Теперь создавать сайты и управлять блоками html стало проще простого. Сайты стали получаться красивыми, интересными. Теперь весь мир верстает ими только в путь.

Вот так теперь можно изобразить упрощенно модель использования div html блоков.

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

Разбираем абсолютное позиционирование

Позиционирование — довольно хитрая штука. Многие новички застревают на моментах, когда нужно спозиционировать элемент на странице. И они обычно слабо используют, или наоборот — злоупотребляют — свойством position. Это свойство определяет, как будет сдвинут элемент относительно какой-то стороны (top, right, bottom и left). Оно принимает четыре значения:

static — значение по умолчанию, смещения не работают

relative — сдвигается визуальный слой, но не сам элемент

absolute — сдвигается элемент в окружающем контексте (первого не-статичного предка)

fixed — элементы позиционируются в области просмотра, неважно, какова его позиция в DOM

Обычно проблема возникает при использовании position: absolute. Возможно, вы уже сталкивались с подобным: задаете элементу абсолютную позицию, так как хотите, чтобы он смещался относительно верхнего правого угла родительского элемента (например, как маленькая кнопка закрытия модельного окна, или что-то похожее)

.element {
  position: absolute;
  top: 0;
  left: 0;
}

… а он отображается в верхнем правом углу окна. А вы думаете: “какого фига?”. На самом деле, это предопределенное поведение браузера. Ключевое слово здесь — контекст.

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

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

Вот простой пример, показывающий то, о чем мы только что говорили. Два родительских элемента, у каждого внутри дочерний элемент, который спозиционирован абсолютно значениями top: 0 и right: 0. Слева родительский элемент спозиционирован относительно (ожидаемое поведение). Справа родительский элемент оставлен статичным (неверно).

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Когда применять высоту/ширину в 100%?

Высота в 100%

Давайте сперва разберемся с менее сложным примером. Когда использовать height: 100%? Вообще-то многие из нас как минимум единожды задавались вопросом “какого черта? Я рассчитывал на то, что моя страница будет как минимум занимать всю высоту экрана!” Я прав?

Для того, чтобы ответить на этот вопрос, необходимо понимать, что на самом деле означает свойство height: 100%: полную высоту родительского элемента. Это далеко не означает “всю высоту экрана”. Так что если вы хотите, чтобы ваш контейнер занимал всю высоту экрана, height: 100% недостаточно.

Почему? Потому, что родительский элемент вашего контейнера (body) имеет высоту по умолчанию auto, что означает, что его размер определяется содержимым. Так что можете попробовать проставить height: 100% и для элемента body — это все равно не даст желаемого эффекта.

Почему? Потому, что родительский элемент тега body (html) имеет высоту по умолчанию auto, что означает, что его размеры зависят от содержимого. А что если попробовать задать элементу html height: 100%? Работает!

Почему? На самом деле потому, что корневой элемент (html) — это не самый последний родительский блок на странице — есть еще окно просмотра (viewport). Проще говоря — это окно браузера. Так что если задать height: 100% элементу html, вы сделаете его высоту, равной высоте браузера. Вот так-то просто.

Результат нашей истории отражен в следующем коде:

html, body, .container {
  height: 100%;
}

А что если у родительского элемента задан min-height, но не задан height?

Roger Johansson недавно выявил проблему с height: 100% в случае когда у родительского элемента нет назначенной высоты, но для него задана минимальная высота. Я не буду углубляться в описание, но в итоге решение состоит в том, что родительскому элементу нужно задать высоту в 1px, так чтобы дочерний элемент мог растянуть его до min-height.

.parent {
  min-height: 300px;
  height: 1px; /* Необходим для того, чтобы дочерний элемент раскрылся на всю высоту min-height */
}

.child {
  height: 100%;
}

Ширина в 100%

Теперь давайте разберемся с параметром width: 100%. Сразу напомню, что, как и с высотой, настройка width: 100% — это указание, что элемент должен быть такой же ширины, как и родительский элемент. Никаких сюрпризов здесь нет.

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

Если мы добавим внутреннее поле и границы к вашему элементу, которому выставлена ширина width: 100%, то этот элемент уже не будет вписываться в родительский — он будет выходить за его пределы. Все это из-за полей и границ. И именно поэтому свойство width должно было бы называться content-width (шириной контента). Пожалуйста, рассмотрите следующий пример, чтобы понять, что я имею в виду:

Ширина родительского элемента равна 25em. Ширина дочернего элемента равна 100% (от его родительского элемента), но также имеет поля размером 1em (1em слева, 1em справа. В сумме по горизонтали это будет 2em), а также границу в 0.5em (всего 1em по горизонтали), что приводит к тому, что результирующая ширина дочернего элемента состовит 25em(100%) + 2em + 1em = 28em. Хмм… Хьюстон, похоже, у нас проблема.

Есть четыре способа поправить положение дел. Первый, и определенно лучший — избегать установки width: 100%, особенно если в этом нет пользы, как в данном случае. Дочерний элемент является блочным элементом, что автоматически расширяет его до ширины родительского элемента (без той проблемы, что мы видим выше). К сожалению, если мы имеем дело со строчно-блочными элементами, то можно воспользоваться следующим фиксом.

Можно не использовать width: 100%, и выставить конкретную ширину элементу самостоятельно. В нашем случае, это 20 — (2 + 1) = 22em. Надо сказать, что это решение плоховато, так как нужно вручную вычислять необходимую ширину элемента. Поищим другой способ!

Третьим вариантом будет использование calc(), чтобы автоматизировать вычисления: width: calc(100% — 3em). Все равно плохо. Во-первых, нам нужно вычислять сумму горизонтальных полей + вертикальных границ. Во-вторых, calc() поддерживается не самым лучшим образом в браузерах (его не поддерживают IE 8, Safari 5, Opera 12 и стандартный браузер Android).

Четвертый вариант — использовать свойство box-sizing: border-box. По существу, она меняет поведение модели контейнера так, что свойство width отражает суммарную ширину элемента, границы и поля включены. Хорошие новости заключаются в том, что поддержка браузерами этого свойства довольно хороша (все, кроме IE 7- и Opera 9).

Поток HTML документа

Если вспомнить о том, что язык HTML позволяет структурировать гипертекстовую информацию, то становится понятно, что любой сайт, по своей сути, является набором блоков: картинки, текст, ссылки и тд. Мы сейчас не говорим конкретно о блоках DIV, но это тесно связанные темы.

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

Основными представителями этих двух категорий, являются тэги div и span.

Соответственно, если речь идет о нормальном HTML потоке, все блоки div будут располагаться друг под другом, а span в линию.

Как вы понимаете, строчными элементами не получится создать нормальную разметку для сайта. Поэтому несколько лет назад, на смену табличной верстке, решили применять верстку на основе блоков DIV.

CSS стили

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

Float

Для начала, давайте познакомимся со свойством, которое позволяет расположить блок DIV справа или слева на странице или относительно родительского контейнера.

Свойство float имеет четыре значения: none, right, left, inherit.

Нас интересует значение «слева» и «справа».

Значение float указывает на то, с какой стороны будет отображаться наш блок. Все прочие блоки будут обтекать его с противоположной стороны.

В нашем случае, для блока навигации мы должны указать значение left, а для основного контента значение right. Вот как это будет выглядеть в файле стилей:

.nav {
float:left;
}

.content {
float:right;
}

Кстати, можно задать свойство только для блока навигации. Блок с контентом будет автоматически расположен справа от навигации. Это будет достигнуто, благодаря обтеканию, которое получается при задании свойства float.

Отступы в CSS: margin и padding

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

Давайте представим, что нам необходимо сделать таким образом, чтобы наш основной блок MAIN, имел небольшой отступ от шапки сайта. Это можно реализовать, если назначить для блока div с классом main, свойство margin. Оно отвечает за внешние отступы блока.

Свойство margin имеет следующие значения: {1,4} | inherit.

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

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

.main {
margin-top:10px;
}

Теперь наш блок main будет иметь верхний отступ в 10 пикселей.

Теперь давайте оформить блок с навигацией и контентом. Представьте, что у нас уже есть готовый сайт. Все ссылки в навигации вплотную прилегают к левому краю страницы. А текст в блоке контента наоборот, вплотную прилегает к правой стороне. Довольно не приятное оформление. Нам нужно сделать внутренние отступы.

За это отвечает свойство padding, имеющее следующие значения: {1, 4} | inherit

Здесь тот же принцип, что и со свойством margin — можно задавать отступ для каждой стороны отдельно.

Давайте для начала отодвинем ссылки в навигации от левого края на 15 пикселей. Затем текст в блоке контента на 20 пикселей от правой стороны. В итоге наш CSS код немного дополнится:

.nav {
float:left;
padding-left: 15px;
}

.content {
float:right;
padding-right: 20px;
}

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

Видео к статье: