Основные принципы div верстки сайта. блочная модель документа

Контейнер внутри полноэкранного раздела

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

Структура HTML-страницы может выглядеть так:

HTML

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

Элемент <section> занимает 100% ширины окна просмотра. Вы можете добавить к нему фоновый цвет или изображение. Внутри него контейнер не позволяет содержимому занять всю ширину окна просмотра.

На картинке, приведенной выше, у элемента <section> есть фоновое изображение, которое занимает всю ширину окна просмотра. Контент внутри него ограничен шириной контейнера.

Сущность блока информации

Термин «информация» в интернет-программировании имеет свой смысл. Это данные, определенным образом структурированные и представленные. Информация — это значительно более широкое понятие. В программировании веб-ресурсов этот термин несет в себе минимально возможный смысл и объем.

Размер и положение тега HTML div: width/height и left/top могут быть абсолютными и относительными. Вкладывая теги друг в друга, можно манипулировать положением и размерами. Меняя правило CSS position с absolute на relative, можно управлять положением тегов по отношению друг к другу внутри окна браузера.

Браузер как приложение несет в себе наследие от локального программирования: это программа, в которой есть окно, в котором отображается язык гипертекста, дополненный стилями CSS и оживленный работой JavaScript-кода.

Можно вспомнить любимое всеми компаниями (интернет-студиями) разделение разработки на фронтенд и бэкенд, но сути это не меняет

Не суть важно, как блок оказался на HTML-странице: был написан «ручками» или сформирован как результат работы PHP-скрипта на сервере. Важно, что каждый тег div как HTML/CSS-композиция — это положение, размер, цвет (символа/фона), прозрачность, трансформация, движение, границы и пр

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

Например, div HTML — это:

• обертка, то есть место размещения системы тегов;
• область размещения точек для обработчиков JavaScript;
• «массив» тегов для обработки.

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

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

Третий вариант значительно упрощает обработку коллекций тегов: вместо того чтобы перебирать всю коллекцию тегов div (body) HTML-страницы, разработчик может выполнить поиск внутри одного тега, который невидим и не слышим, но включает в себя все актуальные позиции.

Селекторы атрибутов

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

p {свойства} /* применить ко всем тегам p, у которых есть атрибут align */
p {свойства} /* где значение атрибута align равно center */
p {свойства} /* где значение атрибута align начинается на center */
p {свойства} /* где значение атрибута align содержит center */
p {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p class="support site magazine"></p>) */
p {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p class="site-On"></p> или <p class="site-off"></p>) */
p {свойства} /* где значение атрибута align заканчивается на site */

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

В своей книге о секретах 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));
}

Тег DIV и свойство float

Основа блочной системы — это тег <div></div>, который является контейнером для контента. Внутри него также могут содержаться другие контейнеры <div></div>.

Использовать тег DIV — не сложнее, чем редактировать теги MP3. Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер <div> (часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.

По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».

Рассмотрим это свойство на примере с двумя блоками.

<div style="float:left;background:#FF00DC; width:300px;">Блок для контента</div>
<div style="float:left;background:#C0C0C0; width:100px;">Блок для сайдбара</div>

Этот код даст следующий результат:

Минимальные и максимальные значения ширины и высоты блочного элемента

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

CSS, помимо явного указания значений ширины и высоты элементов (свойства width и height) предлагает такие свойства, которые позволяют указать для блочных элементов их минимальные, либо максимальные значения:

• min-width (устанавливает минимальную ширину элемента).
• max-width (устанавливает максимальную ширину элемента).
• min-height (устанавливает минимальную высоту элемента).
• max-height (устанавливает максимальную высоту элемента).

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

<!DOCTYPE html>
<html>
<head>
	<title>Минимальная высота и максимальная ширина для блочных элементов</title>
<style> 
:root { /* псевдокласс :root определяет корневой элемент документа */
background-color: black; /* задаем цвет заднего фона */
}
html {
height:100%; /* задаем высоту элемента в процентах */
background-color: white; /* задаем цвет заднего фона */
}
body {
margin: 0 auto; /* задаем внешние отступы элемента (0 для верха и низа, автоматически слева и справа) */
max-width: 800px; /* задаем максимальную ширину элемента в пикселях */
height: 100%; /* задаем высоту элемента в процентах */
}
div {
min-height: 100%; /* задаем минимальную высоту элемента в процентах */
}
</style>
</head>
	<body>
		<div>
		</div>
	</body>
</html>

Какие приёмы CSS надо обязательно уяснить из этого примера:

1. Как установить высоту элемента 100% при любом разрешении?

   Для начала мы должны установить для родителя элемента размер высоты 100%. В нашем случае необходимо установить 100% для элементов <html> и <body>, и только после этого мы устанавливаем для нашего блока размер минимальной высоты 100% (min-height). В итоге это приводит к тому, что у нас даже пустой блок растягивается на весь экран.

2. Как горизонтально центрировать страницу?

   Для этого необходимо установить внешние отступы элемента сверху и снизу равными (нулю), а слева и справа установить как auto (автоматически):

   margin: 0 auto;
   

   В нашем случае мы центрируем страницу, используя такой стиль для элемента <body>.
   Кроме того, мы указываем для элемента <body> максимальное значение ширины равной 800px (если разрешение экрана не будет вмещать 800px, то значение будет равно размеру экрана браузера (меньше этого числа), но элемент в котором установлен максимальный размер не может растянуться больше этого числа).
   Например, если бы мы указали min-width: 100px, то это бы означало, что элемент не может быть меньше чем 100px (если экран будет меньше, то браузер добавит полосу прокрутки).

3. Как установить стиль, который будет приоритетней элемента <html>?

   Псевдокласс :root, как и селектор типа html делают одно и тоже (выбирают одни и те же элементы), но псевдокласс :root обладает более высокой специфичностью (болеее значимый при определении стиля).
   Вы можете использовать такой прием в будущем для установки изображений в качестве заднего фона. Подробное изучение работы с задним фоном мы рассмотрим далее в учебнике в статье «Работа с фоном элемента в CSS».

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

Рис. 106 Пример установки минимальной высоты и максимальной ширины для блочных элементов.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in <div> tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <div> tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for <div> tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <div> tag:

Применение вышеприведённой технологии при создании карусели Bootstrap

Если вы не знакомы с Bootstrap и хотите узнать что это такое, то можете воспользоваться статьёй Введение в Bootstrap.

Рассмотрим пример, в котором вышеприведённую HTML структуру и CSS код будем использовать для отображения слайдов карусели Bootstrap.

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

• (ширина = 736px, высота = 552px, соотношение сторон (высота к ширине) = 1,33);
• (ширина = 1155px, высота = 1280px, соотношение сторон (высота к ширине) = 0,9);
• (ширина = 1846px, высота = 1028px, соотношение сторон (высота к ширине) = 1,8);
• (ширина = 1140px, высота = 550px, соотношение сторон (высота к ширине) = 2,07);
• (ширина = 800px, высота = 600px, соотношение сторон (высота к ширине) = 1,33);

Изображения будем задавать как фон. Это позволит использовать в карусели Bootstrap 3 изображения с не одинаковыми соотношениями сторон.

HTML разметка карусели:

<div id="carousel" class="carousel slide" data-ride="carousel" style="max-width: 600px; margin: 0 auto;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
    <li data-target="#carousel" data-slide-to="3"></li>
    <li data-target="#carousel" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_1.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 1
      </div>
    </div>
    <div class="item">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_2.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 2
      </div>
    </div>
    <div class="item">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_3.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 3
      </div>
    </div>
    <div class="item">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_4.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 4
      </div>
    </div>
    <div class="item">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_5.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 5
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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;
  background-size: cover !important;
}  

Примеры использования тегов 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 верстки. Смотрите внимательно и просто повторяйте. Ниже можете скачать исходник с нашим примером

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

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

Добавляем отступ между контейнерами

Помните, я не рекомендовал использовать сокращенную версию кода для центрирования контейнера? Я говорю об этой версии:

CSS

.wrapper {
  margin: 0 auto;
}

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

CSS

.wrapper-variation {
  margin-top: 50px;
}

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

Свойство margin не будет работать для элемента wrapper-variation, потому что оно противоречит свойству margin: 0 auto. Сокращенное свойство будет отменять полное. Чтобы избежать подобной путаницы, в таких случаях рекомендуется использовать полные свойства.

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

Обратите внимание на следующую модель:

HTML

<div class="wrapper mb-5"></div>
<section>
  <div class="wrapper"></div>
</section>
<div class="wrapper"></div>

CSS

.mb-5 {
  margin-bottom: 3rem !important;
}

Благодаря подобному подходу, сам контейнер остаётся без изменений, а отступ добавляется к дополнительным служебным классам в CSS. Теперь вы, наверное, спросите, зачем мне создавать несколько контейнеров на странице, если я могу создать один? В HTML-коде, приведенном выше, между двумя контейнерами есть элемент <section>.

Здесь было бы полезно использовать декларацию !important, так как основная цель служебных классов в CSS, – сделать определенное свойство обязательным. Мы гарантируем это, добавляя !important.

The декларация

HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:

<!DOCTYPE html>

Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).

В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В версии HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.

При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).

Добавляем padding слева и справа

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

CSS

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

Добавляя padding, мы можем быть уверены, что слева и справа будет отступ в 16px, даже если ширина окна просмотра меньше максимальной ширины контейнера.

Свойство padding действует как подстраховка, не допускающая прилегания границ контейнера к границам окна просмотра, в случае нехватки места.

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

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

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

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

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

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

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

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

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

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

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

Использование процентной ширины для контейнера

Я получил ответ об использовании процентной ширины (типа max-width: 90%) для контейнера, вместо добавления padding-left и padding-right.

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

CSS

.wrapper {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Медиа-запрос для большого экрана */
@media (min-width: 1170px) {
  .wrapper {
    max-width: 1170px;
  }
}

Применяя процентную ширину, мы совершаем дополнительный шаг. Можно легко избежать этот шаг, используя фиксированное значение ширины. Другое решение говорит, что мы можем совместить width: 90% со свойством max-width: 1170px.

CSS

.wrapper {
  width: 90%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

Это довольно интересный подход, но я бы предпочел самостоятельно добавить padding, вместо того чтобы полагаться на процентную ширину.

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

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

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

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

Допустимые значения

Для HTML5 ограничениями на значение id являются:

1. он должен быть уникальным в документе
2. он не должен содержать пробелов
3. он должен содержать хотя бы один символ

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

Недопустимо:

Также неверен нижеследующий код, если включен в один документ:

Для HTML 4.01 и ниже для значения всегда должно начинаться с буквы, а остальными символами могут быть:

• латинские буквы (A-Z/a-z)
• цифры (0-9)
• тире («-«)
• подчеркивания («_»)
• двоеточия («:»)
• точки («.»)

В этом случае в вышеприведённом примере для HTML5, допустим только один вариант:

Другие примеры, допустимые в HTML 4.01 и ниже:

Правила для названий классов по существу те же, что и для идентификаторов. Разница в том, что значения класса не обязательно должны быть уникальными в документе.
В вышеприведенном примере недопустимо в одном документе:

А это совершенно нормально:

Имейте в виду, что приведенные выше правила и примеры применяются в контексте HTML.
Использование чисел, знаков препинания или специальных символов в значении i и может вызвать проблемы в других контекстах, таких как CSS, JavaScript и регулярных выражениях.
Например, хотя в HTML5 допустим следующий идентификатор:

Он не допустим в CSS.

В CSS различные идентификаторы (включая имена элементов, классы и идентификаторы в селекторах)
могут содержать только символы и символы из ISO 10646 U + 0080 и выше, а также дефис ()
и подчеркивание ();
они не могут начинаться с цифры, двух дефисов или дефисов, за которыми следует цифра.
( )

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

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

Идём дальше. Из статьи о наследовании в 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 */