Стилизация контейнеров для содержимого веб-страниц

Содержание:

Краткий обзор элемента

Давайте посмотрим на практике, как работает элемент <div>. Сотрите все, что есть в файле styles.css (если вы добавляли в него код из предыдущих мануалов серии). Затем добавьте следующее CSS правило для селектора тега <div>:

Сохраните файл styles.css. Затем откройте файл index.html, сотрите все, что там есть (кроме первой строки кода: <link rel=”stylesheet” href=”css/styles.css”>), и добавьте следующий фрагмент:

Обратите внимание, элемент состоит из открывающего и закрывающего тега, но не требует какого-либо контента. Сохраните файл index.html и перезагрузите его в браузере

Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»)

Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:

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

Чтобы попрактиковаться в создании классов для <div>, удалите из файла styles.css только что созданное CSS-правило и добавьте следующие три новых набора правил:

В этом фрагменте содержатся правила стиля для трех разных классов: div-1, div-2 и div-3

Обратите внимание, имена селекторов классов начинаются с точки

Сохраните файл styles.css и перейдите в файл index.html. Сотрите только что созданный элемент <div> и добавьте три новых элемента, применив к каждому из них класс, который соответствует селекторам CSS из файла styles.css:

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

Вы должны получить такой результат:

На вашей веб-странице будет три элемента

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

Вопросы и задачи по теме

Нумерация страниц в ворде: как сделать или убрать нумерацию страниц, тонкости настройки

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующий документ, посвященный белому тигру (внимательно изучите страницу перед выполнением):
Практическое задание № 26.

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

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

Тень элемента в CSS

Плавающие элементы в CSS

МЕНЮ

(adsbygoogle = window.adsbygoogle || []).push({});

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

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

Отступы в блочной верстке

Резервное копирование содержимого компьютера mac с помощью time machine

Помимо расположения блоков, немаловажным является задание отступов как между блоками, так и внутри них. Для этого, соответственно, используются свойства margin и padding.

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

margin: 20px 10px 0 40px

Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.

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

Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.

Как это работает

На высоком уровне, блочная система работает так:

Существует три основных компонента—контейнера, строки и столбцы.
Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
«Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.

Дивная верстка

Ориентация на динамичный и развиваемый результат — это систематизированная информация, то есть система блоков, связанных между собой отношениями смысла

Не суть важно, что взять за основу: таблицу, список или только блок

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

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

Div HTML: примеры использования на News4Auto.ru.

Наша жизнь состоит из будничных мелочей, которые так или иначе влияют на наше самочувствие, настроение и продуктивность. Не выспался — болит голова; выпил кофе, чтобы поправить ситуацию и взбодриться — стал раздражительным. Предусмотреть всё очень хочется, но никак не получается. Да ещё и вокруг все, как заведённые, дают советы: глютен в хлебе — не подходи, убьёт; шоколадка в кармане — прямой путь к выпадению зубов. Мы собираем самые популярные вопросов о здоровье, питании, заболеваниях и даем на них ответы, которые позволят чуть лучше понимать, что полезно для здоровья.

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

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

Координаты означают расстояние бокса от краев: означает, что бокс прижат к верхнему краю, — что отстоит на 10 пикселов от правого края и т.д. Любая из координат необязательна. В случае, если координаты не задают вертикального или горизонтального положения, то оно остается таким же, какое было бы без позиционирования. То есть в случае, когда у нас есть два произвольных бокса один за другим «box1» и «box2»:

… и второй мы позиционируем так:

… то по вертикали он останется прямо под первым боксов, а по горизонтали будет отстоять от левого края на 150 пикселов.

Стакан

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

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

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

Используя более принятые в CSS термины, этот стакан называется «содержащим блоком» (containing block).

Fixed

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

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

Автоматические размеры

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

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

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

Засада

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

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

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

Здесь видны две проблемы:

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

Использование классов и идентификаторов

Блок <div> HTML может определяться как идентификатором id, так и классом class. Отличие первого от второго в том, что id используется на странице документа только один раз. То есть его используют для определения уникальных элементов, которые более нигде не повторяются в коде страницы. Атрибут класса позволяет применять те же правила стилей к нескольким элементам. Такой подход значительно упрощает разработку и поддержку кода. Кроме того, один объект может иметь одновременно несколько классов. Для правильного распознания их просто разделяют пробелами.

Естественно, блочная структура документа вовсе не подразумевает использование только лишь одних тегов <div>. В структуре любой интернет-страницы всегда будут и другие элементы. Кроме того, сам по себе блочный элемент <div> может иметь совсем другой вид отображения. Делается это при помощи свойства display. Элемент может иметь строчное или даже табличное отображение, что позволяет значительно увеличить гибкость использования блока и создать сайт любой конфигурации.

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

Естественно можно комбинировать селекторы как захотим, например:

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет зелёным, убираем подчёркивание */

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

q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

Адаптивный фон, фиксированный контент

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

HTML

<section>
  <div class="wrapper"></div>
</section>

CSS

section {
  background-color: #ccc;
}

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Принцип работы margin-left: auto и margin-right: auto заключается в вычислении половины ширины окна просмотра и вычитании из неё ширины контента. То же самое можно сделать, используя padding.

CSS

section {
  padding: 1rem calc(50% - 585px);
}

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

CSS

section {
  padding: 1rem;
}

@media (min-width: 1170px) {
  section {
    padding: 1rem calc(50% - 585px);
  }
}

В качестве альтернативного решения можно использовать новую функцию CSS max(). Мы просто устанавливаем минимальный padding размером в 1rem, а вычисление 50% — 585px будет использовано в качестве другого значения.

CSS

section {
  padding: 1rem max(1rem, (50% - 585px));
}

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

 div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

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

div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */

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

Создать HTML структуру из 2 блоков:
```

<div class="item-responsive item-16by9">
  <div class="content"></div>
</div>



<div class="item-responsive item-4by3">
  <div class="content"></div>
</div>

<div class="item-responsive item-2by1">
  <div class="content"></div>
</div>

<div class="item-responsive item-1by1">
  <div class="content"></div>
</div>
```
Первый блок имеет 2 класса. С помощью класса установим блоку относительное позиционирование. Это необходимо выполнить для того, чтобы 2 блок (который будет иметь абсолютное позиционирование) располагался относительно него. Кроме этого данный класс также используется для того, чтобы перед содержимым соответствующих элементов () добавить псевдоэлемент . Этот элемент будет устанавливать необходимую высоту блока относительно его ширины с помощью CSS-свойства . Трюк данного метода заключается в том, что если свойству указывать значение не в пикселях, а в процентах, то оно будет рассчитываться браузером относительно его ширины. Таким образом, можно получить блок с необходимой высотой. Следующее действие — это указать 2 блоку абсолютное позиционирование и выровнять его по первому блоку.

Добавить на страницу следующий CSS код:

.item-responsive {
  position: relative; /* относительное позиционирование */
}
.item-responsive:before {
  display: block; /* отображать элемент как блок */
  content: ""; /* содержимое псевдоэлемента */
  width: 100%; /* ширина элемента */
}
.item-16by9 {
  padding-top: 56,25%; /* (9:16)*100% */
}
.item-responsive>.content {
  position: absolute; /* абсолютное положение элемент */
  /* положение элемента */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* При необходимости (для блоков, имеющих данные классы) */
.item-4by3 {
  padding-top: 75%; /* (3:4)*100% */
}
.item-2by1 {
  padding-top: 50%; /* (1:2)*100% */
}
.item-1by1 {
  padding-top: 100%; /* (1:1)*100% */
}

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Свойство clear

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

Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.

Дополним вышеуказанный пример новым элементом:

<div style="float:left;background:#FF00DC; width:300px;">Блок для контента</div>
<div style="float:left;background:#C0C0C0; width:100px;">Блок для сайдбара</div>
<div style="clear:both;background:#FFD800; width:400px;">Новый блок, расположенный снизу</div>

Результат:

Фон

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

а. Opera

б. Firefox

в. IE6, IE7

г. IE8, IE9

д. Safari, Chrome

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

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

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

XHTML 1.0CSS 2.1IE 7IE 8+CrOpSaFx

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

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

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

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

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

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

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

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