CSS уроки, 4 часть: блочная модель, рамки, границы, отступы
CSS: блочная модель
Создание фреймов, внутренних отступов и расстояний между отдельными элементами HTML-страниц называется блочная модель (box model). Каждый элемент HTML может быть представлен как сложный, в своем собственном блоке, который имеет следующие компоненты:
- поле (margin): внешняя часть блока, бесцветная и прозрачная. Чем больше граница, тем больше расстояние до соседних элементов.
- рамка (border): окружает содержимое и внутренние отступы.
- внутренний отступ (padding) : расстояние между содержимым поля (самого элемента) и рамкой. В отличие от границы, внутренний отступ может быть цветным – определяется цветом фона рамки.
- контент (content): фактическая часть поля, сам элемент – рисунок, таблица, текстовое поле и т. д.
Как работает блочная модель
Определение ширины и высоты элемента
Когда вы указываете ширину и высоту элемента с помощью width и height, вы указываете только размер содержимого. Размер всего блока также зависит от границы, рамки и внутреннего отступа.
Например, пусть для элемента указываются следующие параметры:
width:200px;
padding:20px;
border:2px solid blue;
margin:15px;
Для этого блока ширина будет 200 (содержимое) + 2 * 20 (левый и правый внутренний отступ) + 2 * 2 (левая и правая граница) + 2 * 15 (левая и правая граница) = 274 пикселей.
Как видите, элемент будет занимать значительно больше места, чем ширина, указанная для содержимого. Об этом следует помнить при создании страниц, чтобы избежать наложения отдельных элементов.
Блочная модель и Internet Explorer
Большинство браузеров рассчитывают размеры блоков, как было описано выше. Одним заметным исключением является Internet Explorer – для этого браузера ширина включает рамки border и отступы padding. По этой причине элементы, которые определены шириной width, будут казаться уже, чем в других браузерах. То же самое относится и к высоте height.
Однако, решение проблемы очень простое: достаточно указать DOCTYPE для документа HTML, и Internet Explorer будет соответствовать общепринятому методу использования метода блочной модели.
CSS рамки (border)
CSS border команды дают возможность определить вид рамки: тип, цвет и толщина.
Вид рамки
Команда вида рамки задается с помощью border-style и может принимать следующие значения:
- none: без рамки
- dotted: рамка, сделанная из точек
- dashed: рамка – пунктирная линия
- solid: рамка сплошной линией
- double: рамка двумя сплошными линиями
- groove: трехмерная вогнутая рамка
- ridge: трехмерная вогнутая рамка
- inset: трехмерная объемная рамка, обращенная внутрь
- outset: трехмерная объемная рамка, обращенная наружу
Толщина рамки
Свойство толщины рамки задается с помощью border-width, а значение можно указывать как цифрами (в пикселях), так и одним из следующих слов: thin, medium, thick, которые браузер будет интерпретировать автоматически, чтобы создать соответственно узкую, нормальную или толстую рамку. Обратите внимание, что border-width будет эффективно реализован, только если уже указан тип рамки (border-style).
Цвет рамки
Чтобы установить цвет рамки используется border-color. Аналогично цвету текста, сами значения для цвета рамки могут быть:
- название цвета, например olive или red;
- RGB значение, например rgb(0,255,0)
- HEX значение, например #00FF00
Указание цвета рамки будет действительным, только если указан вид рамки (border-style).
Индивидуальные стили для отдельных сторон рамки
Вы можете указать различный тип рамки для каждой из четырех сторон, используя следующие слова:
- border-top-style (верхняя рамка)
- border-right-style (правая рамка)
- border-bottom-style (нижняя рама)
- border-left-style (левая рамка)
Аналогичным образом устанавливаются значения цвета и толщины для отдельных сторон: замените стиль на цвет или ширину соответственно (например, border-top-color устанавливает цвет для верхней рамки).
Стиль рамки: сокращенная запись
Все свойства рамки могут быть указаны кратко, используя border:
border: 3px dotted orange;
Порядок значений: толщина, тип, цвет, но, за исключением требуемого значения типа рамки, необязательно устанавливать все значения (если какое-либо значение опущено, браузер будет использовать значение по умолчанию).
CSS границы (margin)
С помощью команды margin можно обеспечить пустое пространство вокруг элемента. Это пространство является бесцветным и прозрачным и не выходит за рамки элемента.
Размеры границы могут быть назначены как индивидуально для всех четырех сторон, так и сокращенно – для всех сразу.
Для значения свойства margin используются:
- цифры – соответствующие единицы измерения: px, pt, em и т.д.;
- проценты (%) – за основу берется размер элемента;
- ключевое слово auto – результат зависит от того, какие другие значения границы указаны.
Индивидуальные границы
Вот пример, для установки индивидуальных границ:
margin-top: 20px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 5px;
В этом примере, верхняя граница – 20 пикселей, правая – 15, нижняя – 10 и левая – 5 пикселей.
Использование сокращенной записи
Вы можете использовать сокращенную запись четырех границ следующим образом:
margin: 20px 15 px 10px 5px;
Когда после margin указаны 4 значения, они соответствуют сначала верхней, правой, нижней и левой границе (движение по часовой стрелке). Margin может быть описан тремя значениями:
margin: 20px 10px 5px;
В этом случае, первое и третье значение описываются для верхней и нижней границы, а среднее значение является одинаковым для левой и правой границы.
Когда для margin используется только два значения, то первое значение отражает верхнюю и нижнюю границу, второе – левую и правую.
Естественно, вы можете задать все границы равными – достаточно указать только одно значение:
margin: 25px;
Еще несколько примеров
Чтобы центрировать элемент в середине страницы, вы можете использовать ключевое слово auto следующим образом:
margin-left: auto;
margin-right: auto;
Выравнивание элемента по правому краю, достигается путем установки для границы некоторого числового значения и автоматического для левой границы:
margin-right: 1em;
margin-left: auto;
CSS отступы (padding)
Отступ (padding) используется для того, чтобы освободить место между содержимым элемента и его рамкой border.
Как и margin, значения отступа можно задать индивидуально для всех четырех сторон или для всех сразу.
Для значения свойства padding используются:
- числа, за которыми следуют их единицы измерения (px, pt, em и т.д.);
- проценты (%) – размер отступа рассчитывается как процент от размера элемента;
- ключевое слово auto.
Определение индивидуальных отступов
Каждый из четырех отступов может быть задан отдельно:
padding-top: 30px;
padding-right: 25px;
padding-bottom: 20px;
padding-left: 15px;
Таким образом, верхний отступ станет 30 пикселей, правый – 25, нижний – 20, и левый – 15 пикселей.
Использование сокращенной записи
Как и margin, padding может быть установлен сокращенным способом:
- padding: 25px 30px 20px 15px; Когда padding использует четыре значения, они означают соответственно верхний, правый, нижний и левый отступы.
- padding: 30px 20px 15px; Три значения соответствуют верхнему, (левый и правый – равные, вторая величина) и нижнему отступу.
- padding: 30px 20px; Padding с двумя значениями используется, когда верхний отступ равен нижнему (первая величина), а левый – равен правому отступу (второе значение).
- padding: 25px; Если все отступы равны, они могут задаваться только одним значением padding.
Несколько примеров
Отступ в ячейках таблицы. Таким образом, рамка текстового поля не разбивается:
td {padding-left: 0.5 em; padding-right:2em}
Смещение заголовка, чтобы избежать наложения на фоновое изображение:
h1 {background: url(sun.jpg) no-repeat;
height: 80px;
padding-left: 130px;}
Читайте далее: CSS уроки, 5 часть: фон, позиция
