Модель компоновки CSS - боксы, границы, поля, заполнение

Добавление к объекту границы: свойства границ

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

Свойства border-width

Эти свойства ведут себя точно так же, как и можно было бы ожидать: они задают явную толщину одной или нескольких сторон границы.

Сокращенное свойство border-width принимает значения в той же нотации, что и сокращенное свойство margin, за исключением того только, что значения процента не поддерживаются. Вполне можно написать правило подобное следующему:

td {
	border-width: 1px 0 0 1px;
}

Свойства border-style

Свойства border-style обычно принимают какое-либо из следующих значений:

Когда используется сокращенное свойство border-style, оно может принимать до четырех значений, которые применяются таким же образом, как значения сокращенного свойства margin.

Реализация размывания границы (вместо ее исключения) реализуется свойствами -color.

Свойства border-color

Наконец, можно задать любой цвет для любой отдельной границы, либо с помощью одного свойства, такого как перечисленные выше, либо с помощью сокращенного свойства border-color. Обратитесь к описанию сокращенного свойства margin, чтобы подробнее узнать о задании количества свойств меньше четырех.

Как и background-color, border-color может получать значение transparent. Это может быть полезно при работе с крайними случаями, которые требуют согласованной композиции, но не согласованного использования границ.

Сокращенное свойство border и его четыре родственника, более подробно

В отличие от различных свойств границы -width, -style, и -color, эти пять свойств позволяют определить в данный момент три характеристики четырех границ объекта, или любой одиночной границы. Допустимые сокращенные значения border (и т.д.) содержат любые или все свойства ширины, стиля и цвета, которые применяются к границе, единственное ограничение состоит в том, что необходимо ссылаться в текущий момент либо на одну сторону элемента, либо на все четыре сразу.

Рассмотрим следующее правило границы:

#borderShorthandExample {
	border: 2px outset rgb(160,0,0);
	padding: .857em;
	background-color: rgb(255,224,224);
}

Элемент, к которому применяется приведенное выше правило, будет выглядеть точно так, как этот параграф в рамке.

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

Создание правил: обоснование пяти свойств сокращения border … вместо одного

Рассматриваемые здесь "правила" являются линиями начерченным в компоновке, а не директивами, которым надо следовать. Такие линии улучшают контраст между элементом и его окружающим пространством, и во многих случаях они помогают создать в компоновке иллюзию глубины. Этот последний результат подтверждается примером существования стилей границы inset и outset.

Хотя эти же самые эффекты можно получить, размещая границы вокруг всех четырех сторон элемента, возможность точно начертить определенные линии в компоновке предоставляет дизайнеру существенный контроль над деталями.

…И зачем так много свойств? Они же просто границы, не так ли?

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

В связи с тем, как реализуется дизайн сайта, встречается много случаев, где тот или иной элемент может иметь структурные свойства аналогичные другим элементам в документе, но иметь различные презентационные требования. В этих ситуациях вполне разумно написать одно правило для самого общего случая, и дополнительные правила для каждого из предельных случаев. Именно в связи с этим и существуют значения auto и inherit: для использования стиля по умолчанию в качестве предельного случая.

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

Пример 2

Определенные разделы документа необходимо украсить с помощью подчеркиваний и рамок.

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

Новые правила:

h1 { border-bottom: 1px solid rgb(153,153,153); }
.pullQuote { border: 1px solid rgb(153,153,153); }

Когда одних полей недостаточно: свойства заполнения

Могут встречаться элементы с фоновыми цветами вторичных или отличных оттенков, которые требуют дополнительного промежутка между контентом и полями. В других ситуациях требуется создать пространство между границами и соседним текстом.

В таких и многих других случаях используются свойства padding, padding-top, padding-right, padding-bottom, и padding-left. Эти свойства вставляют дополнительное пространство между полями или границами элемента и его контентом. На рисунке 30.1 четко представлены отношения между полями, границами, и заполнением.

Эти свойства ведут себя точно таким же образом, как и свойства полей, со следующими исключениями:

Пример 3

К элементам, которым ранее были добавлены границы, нужно добавить дополнительные промежутки.

Вставляем дополнительные промежутки рядом с границами, заданными ранее для заголовка и цитаты.

Новые правила:

body { padding: 0; }
  h1 { padding: .5em 0 .5em 0; }
  .pullQuote { padding: .5em; }

Работа с шириной и высотой элемента

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

Свойствами CSS, которые используют для манипуляций размерами элементов, являются width, height, min-width, max-width, min-height, и max-height. Эти свойства можно затем разъединить (или соединить) с размерами контента элементов с помощью свойства overflow.

Существует также свойство clip, которое скрывает части элемента внутри его полей. Однако в данной лекции оно не рассматривается, в связи с его узкой областью применения.

Основы ширины и высоты

Как правило, width и height создают именно тот результат, которые можно было бы от них ожидать. Однако их использование имеет некоторые важные особенности.

min-width, max-width, min-height, и max-height

Время от времени, встречаются ситуации, когда необходимо ограничить размер элемента — обычно, чтобы гарантировать, что столбец с пропорциональными размерами всегда будет сохранять удобочитаемую ширину. Различные min - и max - свойства отвечают этим требованиям. Как и в случае со свойствами width и height, результаты, которые можно ожидать от использования этих свойств, как правило, вполне предсказуемы.

Однако, по опыту автора, эти свойства имеют ограниченное применение (хотя другие авторы с этим не согласны). Как обычные старые width и height, они зависят от ошибок округления, которые могут создавать совершенно непредсказуемые результаты. Более важно то, что они совершенно не поддерживаются в браузере IE 6, который в июле 2008 г. все еще удерживал значительную долю рынка.

Пример 4

Поля auto были размещены справа и слева в контейнере страницы. Теперь необходимо, чтобы width (ширина) для этих значений полей создавало какой-то смысл. Более того, планируется присвоить цитате (pullquote) значение float, поэтому она тоже получает некоторую ширину.

Изменяем ширину контейнера документа и цитаты.

Новые правила:

#main { width: 42em; }
.pullQuote { width: 14em; }

Переполнение: ограничение в контенте, или задание свободным

Когда задано свойство элемента width или height, необходимо иногда рассмотреть, какие требуются результаты в том случае, когда контент этого элемента занимает большее пространство, чем доступно. Это особенно касается сайтов с контентом, генерируемым пользователями, и строгими спецификациями компоновки.

Для обработки таких ситуаций предназначено свойство overflow и четыре его допустимые значения - visible, hidden, auto, и scroll. Рисунок .305 показывает результат, который они создают при применении к элементу, контент которого выходит за пределы своего ограничивающего бокса.

Результаты четырех значений overflow

Боксовые модели CSS: подгонка друг к другу

Теперь, когда фундаментальные свойства компоновки были рассмотрены, пришло время показать, как ширина элемента выводится в браузере согласно его свойствам CSS — и как удержать элементы от разрушения создаваемых компоновок. Некоторые результаты имеют вполне здравый смысл, в то время как другие могут показаться совершенно противоречащими интуиции. Чтобы усложнить ситуацию, на самом деле рассмотрения требуют два алгоритма компоновки: модель, определенная консорциумом WWW (W3C) в Рекомендации CSS 2.1, и модель, которая используется в более старых версиях браузера IE.

Выбор подходящих единиц измерения для компоновки

Как и в случае текста, размеры элементов можно задавать либо пропорциональными единицами измерения, такими как % и em, либо статическими единицами измерения, такими как px. Необходимо отметить также, что холст браузера всегда измеряется статическим значением, которое невозможно узнать без использования кода клиентского сценария либо для извлечения этого размера, либо для изменения размера окна — методов, которые плохо подходят для требований доступности, юзабилити и переносимости информационной среды.

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

По умолчанию для width используется значение auto, что на обычном языке означает "использовать все доступное пространство". Результат для блочных элементов состоит в том, что их вычисленная ширина занимает все это пространство. В отношении height, элементы по умолчанию растягиваются, чтобы охватить весь свой контент.

Если вы изменяете значения width и height, то затем надо быть очень внимательным, чтобы гарантировать, что контент элемента поместится (со своими полями, границами, и заполнением) в определенную ширину. Легче всего это сделать, используя следующий процесс:

Выбор для компоновки подходящих единиц измерения: преимущества и недостатки

Компоненты боксовой модели

Боксовая модель является, в действительности, просто последовательностью директив, которые определяют, как различные спецификации элемента компоновки взаимодействуют друг с другом. Компонентами, рассматриваемыми в боксовой модели являются:

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

Боксовая модель W3C: все является аддитивным

Основное правило состоит в том, что вычисленная ширина или высота элемента равна следующему:

margin + border + padding + (width|height)

Во многих случаях ширина и/или высота будут задаваться как автоматическое значение по умолчанию, что означает, что область холста, предназначенная для контента, равна следующему:

available_canvas - margin - padding - border

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

Рассмотрим следующее правило таблицы стилей:

#myLayoutColumn {
  width: 50em;
  margin: 1.5em auto 1.5em auto;
  border: .1em;
  padding: .9em;
}

Как было рассмотрено выше, во время объяснения свойств полей, можно ожидать, что #myLayoutColumn будет центрировать себя в элементе своего контейнера, будет ли этот контейнер body, или чем-то созданным разработчиками.

Более того, если активация "строгого режима" (используя соответствующее объявление !DOCTYPE) заставляет использовать боксовую модель W3C, то можно также ожидать, что вычисленная не-предельная ширина будет:

0.1em + .9em + 50em + .9em + .1em = 52em

В информационной среде screen браузер возьмет тогда это значение, округлит все значения по отдельности до ближайшего пикселя, и выведет соответственно результат.

Пропорциональные поля и заполнение в боксовой модели W3C

Когда используется боксовая модель W3C, пропорциональные поля и заполнение вычисляются относительно вычисленной ширины содержащего элемента. В качестве примера, если определить поле: 20% для элемента, который содержится внутри элемента шириной 800 пикселей, то изображенное поле вокруг первого элемента будет 160 пикселей со всех сторон (так как 20% от 800 равно 160).

Если этому же элементу присвоено заполнение: 5%, то его вычисленная ширина контента будет 400 пикселей:

20% + 5% + 5% + 20% = 50%   0.50 x 800 = 400   800 - 400 = 400

Работа с потоком документа

Будущие руководства обсуждают создание мульти-столбцовых компоновок, поэтому в этой лекции осталось рассмотреть только три свойства CSS: display, float, и clear.

Типы элементов и свойство display

За исключением частей html, body, и table, каждый элемент в Рекомендациях HTML 4.01, который связан с основным контентом, имеет соответствующий строковый или блочный тип. Каждый тип определяет поведение компоновки по умолчанию различным образом:

Свойство display имеет три обычно используемых значения — block, inline, и none — два из которых относятся к соответствующим типам элементов. Эффект изменения значения свойства display элемента состоит в том, что строковый элемент будет вести себя как блочный, или блочный элемент будет вести себя как строковый, или изменение представления документа, как если бы этот элемент (и весь его контент) не существовал бы вообще.

Очевидно, что жизненно важно знать, какие элементы соответствуют какому типу по умолчанию, отношения представлены кратко в таблице 30.2:

Только поля между двумя смежными блочными элементами одного подтипа будут сжиматься.

Пример 5

Как насчет того, чтобы удалить аннотацию "Prologue" из заголовка, просто с целью демонстрации?

Удаляем посторонний фрагмент из заголовка.

Новые правила:

.sectionNote { display: none; }

Обтекание элементами других элементов: свойство float

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

Как можно было бы догадаться, пара свойство/значение, которая создает это волшебство, имеет вид float: left;. Подробное рассмотрение работы с плавающими элементами будет рассмотрено в будущих лекциях, но необходимо затронуть здесь базовые понятия. float: right является также вполне полезной парой свойство/значение, и в связи с этим, когда понадобится отменить задание class, которое вызывает float, можно определить float: none.

Свойство float имеет несколько инструкций по использованию:

Пример 6

О задании значения float для цитаты говорилось выше, поэтому сейчас сделаем это и посмотрим результат.

Цитата всплывает к правому полю.

Новые правила:

.pullQuote { float: right; }

Размещение элементов ниже своих плавающих предшественников: свойство clear

Подобно свойству float, свойству clear можно присвоить одно из значений left, right, или none. Также поддерживается значение both.

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

Рисунок 30.6 показывает поведение clear: left; в компоновке, где двум начальным последовательным элементам были присвоены одинаковые значения height, и значения float равные left и right:

В предыдущем примере используемый по умолчанию поток элемента #cLeftWidget помещает его сразу под текстом — то есть между #fLeftWidget и #fRightWidget.

Рассмотрим, что произойдет, когда первый из этой же совокупности элементов будет сделан короче, чем его правый аналог, как показано на рисунке 30.7.

В первом примере значение clear последнего элемента задано как left, чтобы получить результат: так как оба плавающих элемента имеют одну высоту, то очищаемый элемент будет помещен ниже обоих. Однако второй пример показывает, что для достижения того же результата с плавающими элементами различной высоты, необходимо использовать clear: both;. Это обсуждение свойства clear является простым введением в его возможности, более подробно эти вопросы будут рассмотрены в будущих лекциях.

Заключение

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

Дополнительное чтение

Контрольные вопросы

Об авторе