Верстка блоками div давно уже стала стандартом и имеет ряд преимуществ перед табличной версткой. Однако на деле начинающие разработчики путаются в поведении этих самых блоков.
Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.
Что считать блочным элементом?
Область такого элемента на странице представлена прямоугольником, по умолчанию занимает все доступную ширину и начинается с новой строки.
Самым распространённым элементом, используемым в блочной верстке, является универсальный элемент
Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.
Добавим значение ширины для каждого блока:
Видно, что каждый блок согласно спецификации располагается с новой строки. Это их нормальное поведение.
Теперь возникает вопрос, как расположить блоки div на одной строке , друг за другом?
Для этого существует свойство , которое определяет, с какой стороны блок будет принудительно выровнен. При этом с другого края, он может обтекаться другими элементами.
Свойство float имеет следующие значения:
- left - блок выравнивается по левому краю, обтекание справа
- right - блок выравнивается по правому краю, обтекание слева
- none - обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.
Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:
В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством , которое управляет поведением плавающих элементов:
- left - запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
- rigth - запрещает обтекание элемента с правой стороны
- both - запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами
Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Блок 4 разместился с новой строки, как нам надо.
В данном случае мы знаем как располагаются другие блоки, потому в примере сразу указали clear:left. Бывают ситуации, когда мы точно не знаем, с какой стороны встретится плавающий блок, поэтому в таких случаях стоит указывать clear:both, отменяющий обтекание с обеих сторон. Теперь мы разобрались как расположить блоки div на одной строке горизонтально.
Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину - фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.
Как повлиять на блоки, если мы хотим разместить эти блоки по центру?
Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;
Почему собственно родителю мы дали класс.wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.
Возьмем разметку из предыдущих примеров и усовершенствуем её.
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Здесь вроде всё просто.
А если нам не нравится, что текст вплотную прилипает к краю родительского блока и хотим добавить поля без внесения изменений в разметку, только с помощью css. Добавим элементам свойство padding:
Блок 1. Lorem
Блок 2. Lorem ipsum
Блок 3. Lorem ipsum
Блок 4. Lorem
И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:
Блок 1: 10 + 200 + 10 = 220px
Блок 2: 10 + 150 + 10 = 170px
Блок 3: 10 + 100 + 10 = 120px
Блок 4: 10 + 450 + 10 = 470px
220 + 170 + 120 = 510px
Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.
Как поправить? Можно сделать следующее:
- Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.
- Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.
Используем второй вариант, получается так:
Блок 1. Lorem
Блок 2. Lorem ipsum
Блок 3. Lorem ipsum
Блок 4. Lorem
Теперь соберём всю полученную информацию воедино и попробуем создать простенький типовой трёхколоночный макет с резиновой версткой, который будет растягиваться максимально до 900px, после чего весь макет будет позиционироваться по центру.
Создаем разметку макета:
Пишем стили:
Body { max-width: 900px; /* ограничение максимальной ширины */ margin: 0 auto; } /* для всех блоков внутри body изменяем алгоритм расчета ширины блоков и добавляем все блокам поля 10px */ body div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; } .header { background: #CCA69E; padding: 10px; } .left-sidebar { width: 20%; background: #8ED9B6; float: left; } .content { float: left; width: 60%; } .right-sidebar { width: 20%; background: #FF9282; float: left; } .footer { background: #000; clear: both; /* запрещаем обтекание с обоих сторон, блок выводится с новой строки */ color: #ccc; }
Если что-то непонятно — спрашивайте в комментариях.
Еще каких-то десять лет назад в рунете наиболее часто использовалась так называемая табличная верстка. Ввиду того что стандарты некоторых браузеров значительно отличались друг от друга, приходилось искать решение, которое бы позволило правильно отобразить интернет-документ во всех приложениях. Но время шло, развивались стандарты, и на смену достаточно жесткой и негибкой табличной пришла хорошо изменяемая и отзывчивая Во главе угла такой технологии лежит принцип использования элементов
Возникновение
Усложнение веб-страниц и развитие компьютерной техники привело к тому, что веб-документ был разделен на две части — каркас (HTML-код) и оформление (таблицы стилей). Благодаря этому удалось достичь небывалого развития веба, результаты которого мы сейчас можем лицезреть на большинстве современных сайтов. Кроме улучшения процесса разработки
Стандарты и проверка
Тег
Теги
Для того чтобы создать действительно правильный документ, необходимо использовать следующую структуру тега
Использование классов и идентификаторов
Блок
Естественно, блочная структура документа вовсе не подразумевает использование только лишь одних тегов
Тег . HTML-свойстваКак уже было сказано выше, данный тег не изменяет оформление фрагмента страницы, а используется для создания семантической структуры с последующим оформлением посредством таблиц стилей. Использование закрывающего тега для этого элемента является обязательным.
Несмотря на то что многие современные браузеры смогут распознать такую ошибку, в некоторых случаях незакрытый тег может стать причиной «разваливания» структуры документа и его неверного отображения.
Так как данный элемент является блочным, то вмещенный в него контент будет начинаться с новой строки. Для изменения подобного поведения необходимо изменить параметры отображения блока свойством display. Кроме группирования вложенных элементов, тег
позволяет форматировать расположение контента внутри него. Для этого используется атрибут align, благодаря которому можно разместить текст или изображение по левому краю, по правому краю или по центру родительского элемента.Позиционирование блоков
Использование атрибута position позволяет изменить метод позиционирования выбранного элемента. Так, существует три типа позиционирования:
- Статическое (static) — используется по умолчанию. В этом случае элемент располагается в соответствии с позицией в HTML-коде.
- Относительное (relative). В данном случае расположение объекта рассчитывается так же, как и в случае со статическим позиционированием, но данное свойство позволяет изменять позицию для дочерних элементов.
- Положение его рассчитывается относительно элемента с относительным позиционированием.
Другие атрибуты
Для изменения позиции относительно точки начала координат используются атрибуты top и left. Значения могут быть как положительными, так и отрицательными. Ширина и высота блочного элемента задается атрибутами width и height соответственно. Если они не были указаны в таблицах стилей, то блок будет занимать всю ширину родительского элемента. Если контент блока не помещается по всей ширине «родителя», то тогда поведение элемента определяется атрибутом overflow.
Надеемся, данная стать помогла разобраться с вопросом о том, что такое
в HTML.
). Создавалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. С появлением тега
все вебмастера стали пользоваться им для создания "скелета" будущего сайта. Например, так может выглядеть структуру страницы сайта:
Синтаксис тега
...
HTML тег
является блочным элементом. Самым главным его атрибутом является class
. С помощью него можно создавать блоки с нужными стилями CSS .
Пример
. Использование блока div
Пример использования блока div
Пример использования блока div
Это элементарный пример использования тега
. Его возможности уходят далеко за рамки этого примера. Например, с помощью этого тега можно создавать красивые меню (см. как сделать выпадющее меню на css »)
Теперь рассмотрим подробно все атрибуты тега div
.
Атрибуты и свойства тега
- align="параметр"
- задает выравнивание. Может принимать следующие значения:
- center
- выравнивание текста по центру
- left
- выравнивание текста по левому краю
- right
- выравнивание текста по правому краю
- justify
- выравнивание по левому и правому краю
- title="текст"
- всплывающая подсказка к тегу. Почти никогда не используется.
- class="имя"
- определяет принадлежность к классу.
- style="стили через запятую"
- возможность задать стили.
Практические примеры использования
Давайте рассмотрим пару практических примеров с тегом
.
Пример. Вывод контента по центру с использованием div
Этот текст будет по центру
Преобразуется на странице в следующее:
Этот текст будет по центру
Теперь вместо тега
можно писать
и текст будет выведен по центру. Это соответствует требования стандарта HTML (валидация сайта).
Пример. Красивая рамка с div
Вывод текста в красивом блоке
Преобразуется на странице в следующее:
Вывод текста в красивом блоке
Пример. Реализация тизеров на сайте
Удобство тега div состоит в том, что он размещается блочно относительно друг друга. Практическим примером является вывод подряд идущих блоков, которые будут автоматически переноситься на новую строку при достижении конца.
Таких элементов можно сделать множество. В итоге Вы получаете что-то подобное.
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу коротко о теге
для чего он нужен, как им пользоваться.
Урок будет очень коротким, но очень важным и полезным. Если вы в дальнейшем будете создавать сайты, макеты, шаблоны, то вам придется очень часто видеть тег .
Когда-то, до царя Гороха,
для создания каркаса сайта использовали :
Теперь все изменилось! Вместо тега
для создания каркаса сайта стали использовать тег
.
○ тег <
div
>
тег
- это блочный элемент, внутри которого могут находиться другие теги, содержание веб страницы. Своего рода, это контейнер, который можно легко видоизменять и выводить в любом месте веб страницы с помощью . Без использования CSS тег
мало функционален. Но вы не заморачивайтесь и не кидайтесь сразу изучать основы CSS. Познакомьтесь с тегом
, пройдите полностью основы HTML и только тогда переходите к изучению CSS, иначе запутаетесь.
Итак, тег
, закрывающий тег обязателен.
содержимое
* атрибуты тега <
div
>
Чтобы выравнивать блок
с помощью CSS, используют атрибут align
:
align
- Center
- выравнивание блока по центру. Пример: align="center"
.
- Left
- выравнивание блока по левому краю (по умолчанию). Пример: align="left"
.
- Right
- выравнивание блока по правому краю. Пример: align="right"
.
блок будет размещен в левой части html страницы
блок будет размещен в правой части html страницы
блок будет размещен по центру html страницы
class
class - имя класса для связки с CSS оформлением. Пример: class="имя"
.
id
id - имя CSS идентификатора. Пример: id="#имя"
.
title
title – описание блока в виде всплывающей подсказки. Пример: title="описание"
.
Пример всплывающей подсказки
Как я и говорил, урок короткий, но, поверьте, очень важный. Удачи, жду вас на следующих своих уроках! Не пропустите.
Предыдущая запись
Следующая запись
Элемент
(от англ. division
- раздел, секция) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или с именем класса или идентификатора.Как и при использовании других блочных элементов, содержимое
всегда начинается с новой строки, после него также добавляется перенос строки.Синтаксис
...Закрывающий тег
Обязателен.
Пример
DIV
Почвообразовательный процесс физически
иссушает монолит в полном соответствии с законом Дарси.
В лабораторных условиях было установлено, что сушильный шкаф
теоретически возможен. Выветривание, несмотря на внешние
воздействия, однократно.
Конкреция пространственно трансформирует
пирогенный псевдомицелий, хотя этот факт нуждается в
дальнейшей тщательной экспериментальной проверке.
Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация
) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация
) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация
) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект
) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик
) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации
) - первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living
) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×
Браузеры
В таблице браузеров применяются следующие обозначения.
Как уже было сказано выше, данный тег не изменяет оформление фрагмента страницы, а используется для создания семантической структуры с последующим оформлением посредством таблиц стилей. Использование закрывающего тега для этого элемента является обязательным.
Несмотря на то что многие современные браузеры смогут распознать такую ошибку, в некоторых случаях незакрытый тег может стать причиной «разваливания» структуры документа и его неверного отображения.
Так как данный элемент является блочным, то вмещенный в него контент будет начинаться с новой строки. Для изменения подобного поведения необходимо изменить параметры отображения блока свойством display. Кроме группирования вложенных элементов, тег
Позиционирование блоков
Использование атрибута position позволяет изменить метод позиционирования выбранного элемента. Так, существует три типа позиционирования:
- Статическое (static) — используется по умолчанию. В этом случае элемент располагается в соответствии с позицией в HTML-коде.
- Относительное (relative). В данном случае расположение объекта рассчитывается так же, как и в случае со статическим позиционированием, но данное свойство позволяет изменять позицию для дочерних элементов.
- Положение его рассчитывается относительно элемента с относительным позиционированием.
Другие атрибуты
Для изменения позиции относительно точки начала координат используются атрибуты top и left. Значения могут быть как положительными, так и отрицательными. Ширина и высота блочного элемента задается атрибутами width и height соответственно. Если они не были указаны в таблицах стилей, то блок будет занимать всю ширину родительского элемента. Если контент блока не помещается по всей ширине «родителя», то тогда поведение элемента определяется атрибутом overflow.
Надеемся, данная стать помогла разобраться с вопросом о том, что такое
). Создавалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. С появлением тега
Синтаксис тега HTML тег Пример
. Использование блока div Пример использования блока div Это элементарный пример использования тега Теперь рассмотрим подробно все атрибуты тега div
. Давайте рассмотрим пару практических примеров с тегом Преобразуется на странице в следующее: Этот текст будет по центру Теперь вместо тега Преобразуется на странице в следующее: Вывод текста в красивом блоке Удобство тега div состоит в том, что он размещается блочно относительно друг друга. Практическим примером является вывод подряд идущих блоков, которые будут автоматически переноситься на новую строку при достижении конца. Таких элементов можно сделать множество. В итоге Вы получаете что-то подобное. Всем привет! Когда-то, до царя Гороха, для создания каркаса сайта использовали : Теперь все изменилось! Вместо тега ○ тег <
div
>
тег Итак, тег
* атрибуты тега <
div
>
Чтобы выравнивать блок align
class
class - имя класса для связки с CSS оформлением. Пример: class="имя"
.
id
id - имя CSS идентификатора. Пример: id="#имя"
.
title
title – описание блока в виде всплывающей подсказки. Пример: title="описание"
.
Как я и говорил, урок короткий, но, поверьте, очень важный. Удачи, жду вас на следующих своих уроках! Не пропустите. Предыдущая запись Элемент Как и при использовании других блочных элементов, содержимое Обязателен.
Результат данного примера показан на рис. 1. Рис. 1. Вид блоков, оформленных с помощью стилей Каждая спецификация проходит несколько стадий одобрения. Особняком стоит живой стандарт HTML (Living
) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно. В таблице браузеров применяются следующие обозначения.
Атрибуты и свойства тега
Практические примеры использования
Пример. Вывод контента по центру с использованием div
Пример. Красивая рамка с div
Пример. Реализация тизеров на сайте
Продолжаем изучать основы HTML.
В этом уроке я расскажу коротко о теге
Урок будет очень коротким, но очень важным и полезным. Если вы в дальнейшем будете создавать сайты, макеты, шаблоны, то вам придется очень часто видеть тег
для создания каркаса сайта стали использовать тег
Следующая запись Синтаксис
Закрывающий тег
Пример
Спецификация
Браузеры