Смотреть что такое "ДИВ" в других словарях. Блочная верстка тегов div HTML
Верстка блоками 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; }
Если что-то непонятно — спрашивайте в комментариях.
Элемент
Как и при использовании других блочных элементов, содержимое тега
Синтаксис
Параметры
align Задает выравнивание содержимого тегаЗакрывающий тег
Обязателен.
Пример 1. Использование тега
Описание параметров тега DIV
Параметр ALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Выравнивание содержимого контейнера
Синтаксис
Аргументы
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается?лесенкой?. Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается?рваным?. Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.Значение по умолчанию
Аналог CSS
Пример 2. Выравнивание текста
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Параметр TITLE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Добавляет поясняющий текст к контейнеру
Синтаксис
Аргументы
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.
Значение по умолчанию
Пример 3. Подсказка к тексту
ДИВ ДИВ
дива, в восточнославянской мифологии персонаж. Упомянут в средневековых «Словах»-поучениях против язычества (в форме «дива») и дважды в «Слове о полку Игореве»: приурочен к верху дерева («Дивъ кличетъ връху древа») и спускается вниз («уже връжеся дивъ на землю»). Демон и женский мифологический персонаж со сходным именем известен у западных славян (чеш. divy muž, diva žena, польск. dzivožona; сербо-лужицк. dziwja žona, dŸiwica, обычно связываемые с лесом), а также у южных славян (болг. самодива, синонимичное самовиле, см. Вилы
). Слово первоначально было связано, с одной стороны, с русским «диво» и родственными славянскими обозначениями чуда, с другой стороны - со славянскими и балтийскими словами в значении «дикий», происходящими из «божий»: ср.
укр. дивий - «дикий», старослав. «дивии», болг. «див», польск. dziwy, «дикий» при латыш. dieva zuosis, «дикий гусь» - первоначально в значении «гусь бога»; ср. также родственное хеттское šiu - «бог» в šiunaš huitar, «животные богов», т. е. «дикие звери»; и типологические кетские параллели - Esdδ Sel, «дикий олень», т. е. «олень бога Эся». Развитие в славянском отрицательных значений типа «дикий» иногда связывают с влиянием иранской мифологии, в которой родственное слово из общеиндоевропейского значения «бог» (см. также Дый
) превратилось в обозначение отрицательного мифологического персонажа - дэва (см. Дэвы
). В значении «бог» у иранцев выступило переосмысленное обозначение доли (др.-инд. bhaga): ср. слав. Бог;
оба эти взаимосвязанных процесса объединяют славянские и иранские языки и мифологии. След древнего индоевропейского значения «бог ясного неба» (см. Индоевропейская мифология
) можно видеть в мотиве падения Д. на землю, имеющем соответствия в древнеиранском (patat dyaoš, «сверзился с неба») и древнегреческом (διοπετής,«сверженный с неба»; ср. также хеттский миф о боге луны, упавшем с неба, и т. п.).
Лит.:
Иванов В. В.. Топоров В. Н„ К проблеме достоверности поздних вторичных источников в связи с исследованиями в области мифологии, в кн.: Труды по знаковым системам, т. в, Тарту, 1973.
В. В. Иванов, В. Н. Топоров.
(Источник: «Мифы народов мира».)
ДИВнебо, отец богов и людей, правитель Вселенной и создатель молний (тождествен Святовиту и Сварогу). Старинные русские памятники говорят о поклонении богу Диву, и если в этом свидетельстве вероятнее видеть указание на светлое небесное божество, то все-таки не может быть сомнения, что уже в отдаленной древности со словом «дивы» связывалось понятие о драконах и великанах туч. «Слово о полку Игореве» упоминает о диве, восседающем на дереве, подобно Соловью-разбойнику и мифическим змеям. Со словом «диво» однозначительно чудо, встречаемое в старинных рукописях в значении исполина, гиганта; Морское чудо (Морской Царь), владыка дожденосных туч, точно также как Лесное чудо - леший, обитатель облачных лесов.
(Источник: «Славянская мифология. Словарь-справочник.»)
Синонимы :
Смотреть что такое "ДИВ" в других словарях:
див - див/ … Морфемно-орфографический словарь
Див: Дивы Д.И.В. Часть имени или топонима Публий Лициний Красс Див Сен Пьер сюр Див (кантон) Бретвиль сюр Див Див сюр Мер Сен Пьер сюр Див Марк Лициний Красс Див (сын триумвира) См. также Div WWE Поиск Див … Википедия
Главный калибр Корпорации Тяжелого Рока. История этой трэш группы началась в первой половине 80 х в СПТУ 39, где волею судеб оказались вместе Виктор Алкаш Лемков и Сергей Лысый Тайдаков. Объединив усилия, они попробовали играть хард рок, но армия … Русский рок. Малая энциклопедия
А; м. Нар. поэт. Сказочное существо невиданно чудного или страшного вида. * * * ДИВ ДИВ, в восточнославянской мифологии один из духов дикой природы … Энциклопедический словарь
А, муж. Стар. редк.Отч.: Дивович, Дивовна.Производные: Дива.Происхождение: (От лат. divus божественный.) Словарь личных имён. Див а, м. Стар. редк. Отч.: Дивович, Дивовна. Производные: Дива. [От лат. divus божественный.] Словарь русских личных… … Словарь личных имен
див - 1 іменник чоловічого роду, істота у міфології див 2 іменник чоловічого роду диво рідко … Орфографічний словник української мови
ДиВ - «Движение и воздух» омская научно производственная фирма г. Омск, образование и наука Источник: http://www.regnum.ru/expnews/170584.html ДИВ Джугашвили Иосиф Виссарионович истор., СССР … Словарь сокращений и аббревиатур
В восточнославянской мифологии один из духов дикой природы … Большой Энциклопедический словарь
М. Сказочное существо; чудище, чудовище (в восточной мифологии). Толковый словарь Ефремовой. Т. Ф. Ефремова. 2000 … Современный толковый словарь русского языка Ефремовой
- (перс, div гений, санскр. div небо, лат. divinus божественный). 1) злой дух. 2) пугач филин, сова, ночн. ворон; зловещая птица. Словарь иностранных слов, вошедших в состав русского языка. Чудинов А.Н., 1910 … Словарь иностранных слов русского языка
Книги
- Дивіться, малята Що роблять кораблі , малята. Скільки транспорту на морі! Пасажирські та вантажні судна, катери, круїзні лайнери, вітрильники, підводні човни, криголами, військові кораблі, а ще: пором, барка, судно на повітряній подушці,…
- Сказ о том, как кожа спадает с ночи, и оголяются просторы для завоевания днём , Див Талалуев. Два брата-рыбака, живущих на краю царства земли Тирд и ловящих рыбу в экстремальной реке, из-за любви к яблокам случайно вмешались в чужую беду и следом угодили в череду событий. Происходящее…
Сегодня уже трудно найти сайт, где не использовался бы такой нужный и важный тег Благодаря этому тегу весь HTML
код документа имеет наглядную и логически понятную структуру. В которой легко разобраться не только верстальщику, но и другим специалистам, совместно работающим над одним проектом. Однако тег Классы (class)
и идентификаторы (id)
выполняют одни и те же задачи. Они задают разные стили для тега Рассмотрим на примере ниже следующий код HTML-разметки:
Зададим внешний вид HTML
документу с помощью CSS
файла стилей:
/* знак # перед именем - обозначение id */
#content {
/* (.) перед именем обозначает class */ Content { Имена id
и class
задает сам разработчик произвольно, исходя из смысловой нагрузки. Мы назвали их просто content
. Нельзя давать имена русскими буквами, можно использовать цифры, символ дефиса (-)
и подчеркивания (_)
. Мы видим два абсолютно одинаковых блока. К верхнему блоку применяется селектор id
, а к нижнему блоку применятся селектор class
. Вы спросите, где же разница между div-ами id и class
? Чисто внешне, пока никакой разницы, до тех пор, пока мы применяем по одному id
и class
на одну страницу. Различие кроется в самом названии id
, значит идентификатор, то есть уникальный. Главное отличие от классов в том, что селектор id
может использоваться на странице только один раз. Селектор class
, наоборот может применяться на одной странице бесконечное количество раз. Например: Content /* может применяться к любым тегам */ Так же стоит отметить, что у id
свойств выше приоритет, чем у свойств классов.
Этот пример наглядно демонстрирует, что несмотря на то, что class
с синим текстом находится ниже, текст все равно красный. Если бы id
не имел приоритета, то текст был бы синий. Кроме того конкретному тегу можно задавать несколько классов, перечисляя их через пробел. Такая система позволяет не создавать лишних классов, а использовать их более эффективно. У id
селектора разумеется такой возможности нет. Есть еще одно важное отличие, оно касается программистов. Если планируется обратиться к элементу HTML
документа через язык JavaScript
, то обязательно надо применять id
, реализовывать это через классы намного сложнее. Если на странице какой-нибудь из элементов, например, шапка сайта, меню, кнопка, используется только один раз, то надо применять id
. Селектор class
применяется к одному тегу или к разным тегам столько раз, сколько раз они прописаны на странице. Например, картинки, маркированные списки, абзацы. В заключении хочу дать дружественный совет всем тем, кто хочет научиться самостоятельно создавать сайты. Очень долго и не эффективно черпать знания о сайтостороении из статей и уроков. Обратите внимание на по данной тематике. Это один из лучших курсов для начинающих. Элемент Как и при использовании других блочных элементов, содержимое Обязателен.
Результат данного примера показан на рис. 1. Рис. 1. Вид блоков, оформленных с помощью стилей Каждая спецификация проходит несколько стадий одобрения. Особняком стоит живой стандарт HTML (Living
) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно. В таблице браузеров применяются следующие обозначения.Классы и идентификаторы
Повторение мать учения
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}
В чем тогда различие между class
и id
?
div.content /* применяется только к тегам div с классом.content */
div#content /* для id такая запись не имеет смысла, он уникален */
Когда лучше использовать id
, а когда class
?
Синтаксис
Закрывающий тег
Пример
Спецификация
Браузеры
Загрузка...Возможно вам будет интересно:
Последние статьи
