Топ-100 CSS уроки, 4 часть: блочная модель, рамки, границы, отступы - Разработка сайтов на WordPress
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 часть: фон, позиция

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заказ услуги

Pin It on Pinterest

Открыть чат
1
Задать вопрос
Здравствуйте! 👋
У вас возникли вопросы?