Что такое div в html
Перейти к содержимому

Что такое div в html

  • автор:

Разница между и

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

Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как и это своего рода «перенос» содержания на новую строку (вроде разрыва страницы или разрыва строки в текстовых редакторах).

Чтобы увидеть как работают элементы используем три из них и установим для них ширину, высоту и фон.

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

В CSS мы пишем класс .container , который связан с тегом .
.container

Посмотрим на это в браузере.

Похоже на один большой прямоугольник. Как насчёт отделить теги друг от друга?

.container

Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый отступом снизу в 10 пикселей. Пришло время проверить эффект в браузере.

Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.

В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:

  • inline (строчные);
  • block (блочные);
  • inline-block (строчно-блочные).

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

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

По умолчанию, у строчных элементов стилевое свойство display установлено как inline . Для блочных элементов его значение block , а для строчно-блочных элементов inline-block . Теперь вы можете объяснить, из-за чего тег не переносит текст на новую строку. Потому что это строчный элемент, а значит в CSS у него свойство display установлено как inline . С учётом этого код ниже:

один два три

Браузер отобразит в одну линию:

Однако можно изменить это поведение, добавив одну строку в CSS:

span

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

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

Вообще, хорошей идеей будет не злоупотреблять тегом , если это возможно.

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

  

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

Ещё раз, давайте сравним новый (справа) и старый код (слева).

А теперь посмотрим, как новый код отображается в браузере!

Наша форма теперь выглядит превосходно!

HTML тег

Элемент является обычным контейнером для содержимого, который не несет в себе никакого семантического смысла. Он используется для группирования в одном блоке логически связанных между собой элементов с целью разметки и стилизации. Обычно его используют только тогда, когда никакой другой семантический элемент (article, section и т.д.) не является более целесообразным.

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

Содержимым тега может быть любой другой элемент HTML: абзац, изображение, ссылка, другой блок с контентом (т.е. другой div вместе со всем своим содержимым).

Атрибуты

Стиль по умолчанию

Пример

Блок красного цвета
Выравниваем текст по центру

Результат данного примера в окне браузера:

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

<div></p><div class='code-block code-block-11' style='margin: 8px 0; clear: both;'>
<!-- 11dvdigital -->
<script src=

» width=»355″ height=»165″ />

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Элемент div

Элемент div (от англ. » div ision» ‒ «раздел, блок») разбивает документ на отдельные части (разделы, подразделы, объекты), а так же форматирует стиль содержимого. С помощью данного элемента можно создавать на web-странице объекты различной сложности (блоки с текстом, меню, элементы меню, скрытые/открытые разделы страницы, кнопки и прочее).

Примечание

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

», переноситься на следующую (новую) строку.

HTML тег

Тег — пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.

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

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

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

Для применения стилей внутри параграфа используется тег .

Синтакс

Тег

— парный, состоит из двух частей, открывающего (

) и закрывающего (

) тегов.

Пример

html> html> head> title>Использование тега <div> title> head> body> h1> Тег <div> h1> div style="background-color:#8ebf42"> p> Мы использовали тег <div>, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет span style="color:#1c87c9"> этого слова span> мы использовали тег <span>. p> p> Обратите внимание, что тег <div> является блочным элементом, до и после него добавляется разрыв строки. p> div> body> html>

Результат

divexample1

Расположение блоков

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

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

Флексбокс¶

Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Пример

html> html> head> title>Заголовок документа title> style> .flex-container < display: flex; align-items: center; /* Подставьте другое значение и посмотрите результат */ width: 90%; height: 300px; background-color: #1c87c9; > .flex-container > div < width: 25%; padding: 5px 0; margin: 5px; background-color: lightgrey; text-align: center; font-size: 35px; > style> head> body> div class="flex-container"> div>1 div> div>2 div> div>3 div> div> body> html>

Результат

divexample2

CSS свойство float ¶

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

Пример

html> html> head> title>Заголовок страницы title> style> .content < overflow: auto; border: 3px solid #666666; > .content div < padding: 10px; > .content a < color: darkblue; > .blue < float: right; width: 45%; background: #1c87c9; > .green < float: left; width: 35%; background: #8ebf42; > style> head> body> div class="content"> div class="blue"> p>Параграф в блоке div. p> a href="#">Гиперссылка в теге div. a> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> ul> div> div class="green"> p>Параграф в блоке div. p> ol> li>Элемент списка 1 li> li>Элемент списка 1 li> ol> div> div> body> html>

Результат

divexample3

Отрицательные отступы ¶

Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.

Пример

html> html> head> title>Заголовок окна веб-страницы title> style> .content div < padding: 2%; > .content a < color: darkblue; > .main-content < width: 30%; margin-left: 32%; > .blue < width: 25%; margin-top: -10%; background: #1c87c9; > .green < width: 20%; margin: -35% auto auto 70%; background: #8ebf42; > style> head> body> div class="content"> div class="main-content"> a href="#">Гиперссылка в теге div. a> div> div class="blue"> p>Параграф в теге div. p> a href="#">Гиперссылка в теге div. a> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> ul> div> div class="green"> p>Параграф в теге div. p> ol> li>Элемент списка 1 li> li>Элемент списка 2 li> ol> div> div> body> html>

Результат

divexample4

Позиционирование Relative + absolute positioning¶

Комбинация разных типов позиционирования для вложенных элементов — один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative , а для дочернего position: absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.

Пример

html> html> head> title>Заголовок документа title> style> .content < position: relative; height: 400px; border: 1px solid #666666;> .content div < position: absolute; width: 35%; padding: 10px; > .blue < right: 20px; bottom: 0; background: #1c87c9; > .green < top: 10px; left: 15px; background: #8ebf42; > style> head> body> div class="content"> div class="blue"> p>Параграф в теге div. p> div> div class="green"> p>Параграф в теге div. p> div> div> body> html>

Результат

divexample5

position: relative не влияет на позиционирование элементов в нормальном потоке, если вы не добавляете смещения.

Атрибуты

Атрибут Значение Описание
align left
right
center
justify
Используется для выравнивания содержимого тега .
Не поддерживается в HTML5.
Вместо атрибута align вы можете использовать CSS свойство text-align.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

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

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