основы CSS

Горизонтальное форматирование

Подводные камни:

Частично сложность заключается в том, чтобы по

нять, что свойство width определяет ширину области содержимого, а не всего видимого блока элемента. Рассмотрим следующий пример:

<p style="width: 200px;">ширина?</p>

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

<p style="width: 200px; padding: 10px; margin: 20px;">ширина?</p>

!

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

Горизонтальной компоновка контейнера

Перечислим семь свойств горизонтального форматирования: margin-left, border-left, padding-left, width, padding-right, border right и margin-right.

Применение значения auto

Если одному из свойств width, margin left или margin right задано значение auto, а для оставшихся двух – определенные значения, то свойство, заданное как auto, определяет длину, необходимую, чтобы сделать ширину блока равной ширине родительского элемента. Иначе говоря, пусть сумма значений семи свойств должна равняться 400 пикселам,не заданы ни отступы, ни рамка, поле справа и ширина составляют 100px, а поле слева определено как auto. Ширина поля слева составит 200 пикселов:

p {margin-left: auto; margin-right: 100px; width: 100px;} /* поле слева – 'auto' – приравнивается 200px */

Вертикальное форматирование

С вертикальным форматированием, как и с горизонтальным, связаны семь свойств: margin top, border top, padding top, height, padding bottom, border bottom и margin bottom.

Любопытно, что если для свойств margin top или margin bottom блочного элемента в нормальном потоке задано значение auto, то им автоматически присваивается 0. Нулевое значение, к сожалению, усложняет вертикальное центрирование элементов в их блоках контейнерах. Это также означает, что если задать для верхнего и нижнего полей значение auto, то они переопределяются в 0 и удаляются из блока элемента.

Сворачивание вертикальных

полей

li {margin-top: 10px; margin-bottom: 15px;}

marging

В следующем примере:

Верхнее поле всех элементов h1 равно 10 пикселов, правое поле – 20 пикселов, поле снизу – 15 пикселов и поле слева – 5 пикселов, вот так:

h1 {margin: 10px 20px 15px 5px;}

Структура и каскад

Важность [!important]

Иногда важность объявления настолько велика, что перевешивает все остальные факторы. CSS важными объявлениями (important declarations) и предоставляет вам возможность отмечать их путем введения в

объявление ключевого слова !important прямо перед завершающей точкой с запятой:

h1 {font style: italic; color: gray !important;}

.title {color: black; background: silver;}

* {background: black !important;}

<h1 class="title">NightWing</h1>NightWing