Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Предварительные требования: Базовая компьютерная грамотность, базовое программное обеспечение, базовые знания работы с файлами, основы HTML (изучали в Introduction to HTML), и понятие о том как работает CSS (изучите предыдущие статьи в этом модуле.)
Задача: Изучить как работает блочная модель CSS, и как они размещаются на странице.

Свойства блоков

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

width and height

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

Примечание: Существуют и другие свойства, которые позволяют задать более тонкие способы обработки размера содержимого - можно установить ограничения размера, вместо установки абсолютного размера. Это можно сделать с помощью свойств min-width, max-width, min-height, и max-height.

padding
Padding относится к внутреннему отступу блока - между внешним краем окна содержимого и внутренним краем границы. Размер этого слоя можно установить со всех четырех сторон сразу с помощью padding свойства, или отдельно по одной стороне padding-top, padding-right, padding-bottom и padding-left.
border
Слой border (граница) располагается между внешним краем padding и внутренним краем margin. По умолчанию размер границы (border) равен 0, что делает ее невидимой, но чтобы она появилась вы можете установить ширину, стиль и цвет границы. Короткая запись свойства border позволяет вам установить все основные параметры для всех сторон, например, border: 1px solid black. Эту запись можно разделить на несколько различных свойств, если нужны более специфические стили:
margin

Margin окружает блок и отталкивает другие блоки внутри разметки страницы. Это похоже на поведение padding; есть короткая запись свойства margin, а также специальные свойства для разных сторон margin-top, margin-right, margin-bottom и margin-left.

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

Активное обучение: игры с блоками

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

Если у вас возникла ошибка, вы всегда можете сбросить ее используя кнопку Reset. Если вы застряли, нажмите кнопку Show solution (Показать решение), чтобы увидеть возможный ответ.

В редактируемом примере ниже у нас есть три блока, все они содержат текст и занимают всю ширину. Они представляют собой элементы разметки <header>, <main> и <footer>. Мы бы хотели чтобы вы сосредоточились на трех селекторах CSS ниже, которые предназначены для каждого блока отдельно и попробовали следующее:

  • Чтобы увидеть блочную модель каждого элемента отдельно, откройте в браузере панель инструментов разработчика, включите режим DOM инспектора и кликайте по интересующим вас элементам. Для получения более подробной информации смотрите Обзор иструментов разработки в браузерах. Каждый браузер имеет интерфейс для показа блочной модели элементов, котрый точно показывает какие внешние отступы (margin), границы (border) и внутренние отступы (padding) применяется для каждого блока, а также насколько велика область контента и общие размеры блока.
  • Установите margin-bottom для элемента <main>, например, 20px. Далее margin-top для элемента <footer>, например, 15px. Заметьте что второе действие не привело ни к какому изменению в разметке, это произошло засчет схлопывания внешних отступов; эффект от меньшего внешнего отступа оказался равен 0, остался только наибольший внешний отступ.
  • Установите margin 30px и padding 30px для всех сторонэлемента <main> —  заметьте как изменилось пространство вокруг элемента (внешние отступы) и пространство между границей элемента и контентом (внутренние отступы), это привело к тому что фактический контент стал занимать меньшее пространство. Опять же можете проверить это в инструментах разработчика.
  • Установите большую границу для всех сторон элемента <main> 40px, обратите внимание что для этого потребовалось пространство контента, а не внутреннего или внешнего отступа. Вы можете установить полный набор значений для ширины, стиля и цвета используя свойство border, например так - 60px dashed red, но после того как эти значения были установлены в свойстве ранее, вы можете их переопределить используя к примеру свойство ширины границы border-width.
  • По умолчанию контент занимает все ширину - width 100% от доступного пространства (после того как поделится им с границами, внутренними и внешними отступами) — если вы будете менять ширину окна браузера, блок будет увеличиваться или сокращаться, чтобы оставаться внутри окна вывода примера. Значение height по умолчанию равно высоте контента содержащегося внутри блока.
  • Попробуйте задать новые ширину и высоту для элемента <main> — начнем со значений 400px для ширины (width) и 200px для высоты (height), посмотрите что получится. Вы сможете видеть, что ширина больше не меняется при изменении размеров окна браузера.
  • Попробуйте задать значение ширины для элемента <main> в процентах — к примеру 60% и наблюдайте что получилось. Вы можете видеть, что ширина снова меняется при изменении размеров окна. Удалите параметр height для элемента <main>.
  • Попробуйте установить элементу <main> внутренние и внешние отступы со всех сторон равные 5% и посмотрите на получившийся результат. Если вы воспользуетесь инструментами разработчика в браузере, чтобы посмотреть на ширину окна вывода и сравнить ее с отступами margin/padding, вы увидите что значение 5% означает "5% от ширины содержащего элемента". Поэтому при увеличении размера окна с примером, будут увеличиваться отступы padding/margin соответственно.
  • Внешние отступы могут принимать отрицательные значения, которые можно использовать для наложения блоков друг на друга. Попробуйте задать свойству margin-top: -50px для элемента <main> и посмотрите на результат.
  • Продолжайте эксперементировать!

Некоторые советы и идеи:

  • По умолчанию background-color/background-image распространяются до края включая границы блока. Это поведение может быть переопределено с использованием свойства background-clip, которое вы можете изучить в разделе Background_clip.
  • Если размеры контента становятся больше окна вывода, это означает переполнение контентом и появляются полосы прокрутки, которые позволяют пермещаться в окне, чтобы увидеть все содержщееся в блоке. Вы можете управлять переполнением  с помощью свойства overflow, подробнее смотрите ниже в разделе Overflow.
  • Высота блока не может быть задана с помощью процентов; высота блока всегда принимает значение высоты контента, если только не задана абсолютная высота, например, в пикселях или em. Это очень удобно так как высота каждого блока по умолчанию не равна 100% высоты окна, а соответствует контенту.
  • Границы также не могут быть заданы в процентах.
  • Вы должны отметить, что полная ширина блока включет в себя сумму свойств width, padding-right, padding-left, border-right и border-left. В некоторых случаях это может быть неудобно (для примера когда нужно чтобы вся ширина блока была равна строго 50% включая границы и внутренние отступы заданные в пикселях). Для того чтобы избежать таких проблем, необходимо настроить блочную модель используя свойство box-sizing. Значение border-box меняет блочную модель следующим образом:

Продвинутые манипуляции с блоком

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

Overflow

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

  • auto: появляются полосы прокрутки, которые позволяют пользователю просматривать все содержимое.
  • hidden: контент котторый не помещается будет скрыт.
  • visible: контент который не помещается будет показан выходящим за пределы блока (это значение используется по умолчанию).

Далее простой пример показывает как работают эти настройки.

Сначала HTML:

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

И стили для нашего HTML:

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

Код выше дает следующий результат:

Background clip

Фоны блоков составляют цвета и изображения наложенные друг на друга (background-color, background-image). Они применяются к блоку и отрисовываются под ним. По умолчанию фон расширается до внешнего края границы блока. Зачастую это то что нужно, но иногда требуется что-то другое, но что если вам необходимо, чтобы фон был замощен фоновым изображением только в предеах контента блока? Этого поведения можно добиться настроив соответствующим образом свойство background-clip.

Давайте рассмотрим пример как это работает. Вначале HTML:

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

Наш CSS:

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

Код выше дает следующий результат:

Outline

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

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

CSS типы блоков

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

  • Блок определенный как block укладывается на другие блоки (т.е. контент следующий до и после блока показывается в отдельной линии), при этом он может иметь ширину и высоту заданных размеров. Вся блочная модель описанная выше относится как раз к таким блочным элементам.
  • Элементы inline противоположны блочным элементам: они ведут себя как поток текста документа (т.е. они будут отображаться на одной строке с окружающим их текстом и другими строчными элементами, а содержимое будет переноситься на новую строку также как поток текста в абзаце). Задание ширины и высоты не влияет на inline элементы; Задание границ, внутренних и внешних отступов для inline элементов будет изменять положение окружающего текста, не будет никоим образом влиять на положение окружающих block элементов.
  • Элементы inline-block представляют собой нечто среднее между первыми и вторыми: Они в потоке с окружающим текстом, не создавая переноса строки до и после, в отличие от block элементов, но для них можно задавать размеры ширину и высоту точно также как у  block элементов. У них нет переносов строк как у inline элементов. В приведенном ниже примере inline-box элемент переходит во 2ую строку в виде единого блока, т.к. для него не хватает места на первой строке, тогда как inline элемент разбивается на несколько строк если недостаточно места и теряет форму блока.

Примечание: По умолчанию для блочных и строчных элементов свойство display имеет значение block и inline соответственно.

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

Сначала HTML:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

Добавим немного CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  border  : 1px solid green;
  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

Код выше дает следующий результат, который иллюстрирует различие в поведении элементов с разными типами блоков:

Заключение

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

Смотрите также

 

В этом блоке

 

Метки документа и участники

 Внесли вклад в эту страницу: Maxim-Bernashevsky, VladMak
 Обновлялась последний раз: Maxim-Bernashevsky,