29. Размер блока, отступы и поля.

Свойство box-shadow добавляет к блоку тень (или даже несколько теней).

Синтаксис для тени такой:

<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Отступы и поля

Отступы блока настраиваются через свойство padding, поля – через свойство margin.

При этом могут использоваться отдельные свойства для сторон блока (например, padding-top). Или можно указать одно-два-три-четыре значения через пробел.

Значения свойств – любая единица размера или проценты. Для margin можно указать auto (размер будет автоматически рассчитан браузером).

Ширина и высота

У блока можно принудительно задать ширину (свойство width) и высоту (свойство height). Для значений этих свойств можно использовать любую допустимую в CSS единицу измерения.

Ширина

Если у блока задана ширина, а значение левого и правого поля установлены в значение auto, то блок центрируется на странице.

Есть три свойства, связанные с шириной, которые у блока можно установить в значение auto: margin-left, width, margin-right.

CSS MAGIK

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

Пусть auto используется ровно для двух свойств. Если это margin-*, то блок центрируется в родителе. Если это width и margin-left (или width и margin-right), то auto для margin-* будет означать 0.

Пусть auto используется для всех трёх свойств. В этом случае оба margin-*, устанавливаются в 0, а свойство width становится равным ширине родителя.

Если же заданы конкретные значения для всех трёх свойств (margin-left, width, margin-right), то margin-right принудительно получает значение auto.

Особый случай: заменяемые элементы (например, img). У таких элементов при установке width в auto реальное значение width берётся из замещающего контента.

Высота

Есть три свойства, связанные с высотой, которые у блока можно установить в значение auto: margin-top, height, margin-bottom.

Установка любого из margin-top или margin-bottom в auto эквивалентна обнулению!

Пусть у блока height установлено в auto. Фактическая высота будет зависеть от наличия у этого блока границ и отступов (padding-*):

Границы и (или) отступы есть: учитываем вертикальные margin детей
Границ и отступов нет: не учитываем вертикальные margin детей

Для inline

Всё, что описывалось раньше справедливо для блочных элементов.

Для элементов display: inline свойства width и height вообще не играют роли!

Однако эти свойства работают, если display: inline-block.

overflow

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

visible показывается все содержимое, даже за пределами установленной высоты и ширины
hidden отображается только область внутри элемента, остальное будет скрыто
scroll всегда добавляются полосы прокрутки
auto полосы прокрутки добавляются при необходимости

Если у блока не задана ширина, он растягивается вместе со своим родительским элементом (например, окном браузера).

Контролировать границы растяжения можно при помощи свойств min-width и max-width. Существуют также свойства min-height и max-height.

box-sizing

Общая ширина блока= width + padding + border + margin (аналогично высота). Это алгоритм по умолчанию.

Свойство box-sizing позволяет изменить алгоритм:

content-box алгоритм по умолчанию
border-box width и height включают контент, padding, border, но не margin (IE в режиме совместимости)
padding-box (убрали из спецификации) width и height включают контент и padding, но не margin и border (поддерживает только Firefox)

visibility

Видимость элемента контролируется свойством visibility.

При значении visible элемент отображается, при значении hidden элемент становится невидимым (вернее – полностью прозрачным, так как продолжает участвовать в формировании страницы).

Свойство display контролирует видимость и поток элемента. Некоторые из его возможных значений:

none элемент не виден, и веб-страница формируется так, словно элемента и не было
block элемент показывается как блочный (div)
inline элемент отображается как встроенный (span)
list-item элемент выводится как блочный и добавляется маркер списка