JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

Рис. 16.2 содержит также другую важную информацию. Во-первых, свойства

width

и

height

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

Во-вторых, свойства

left

и

top

задают расстояние от внутреннего края рамки контейнера до внешнего края рамки позиционируемого элемента. Эти свойства определяют расстояние не от левого верхнего угла области содержимого контейнера, а от левого верхнего угла области, занимаемой отступами контейнера. Аналогично свойства

right

и

bottom

определяют расстояние от правого нижнего угла области, занимаемой отступами.

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

left

дочернего элемента равным «0рх», обнаружится, что левый край дочернего элемента будет находиться непосредственно у внутреннего края рамки контейнера. При этом значении свойства дочерний элемент перекроет отступы контейнера, хотя предполагается, что они остаются пустыми (т. к. для этого и предназначены отступы). Чтобы поместить дочерний элемент в левый верхний угол области содержимого контейнера, необходимо присвоить свойствам

left

и

top

значение «10рх».

16.2.3.1. Модель border-box и свойство box-sizing

Стандартная блочная модель CSS определяет, что свойства стиля

width

и

height

задают размер области содержимого элемента и не учитывают ширину отступов и толщину рамки. Эту модель можно было бы назвать «content-box». Эта модель имеет исключения, наблюдаемые в старых версиях IE и в новых версиях CSS. При отображении страниц в IE версии ниже 6 или в IE6, 7 или 8 в «режиме совместимости» (когда страница не имеет объявления <!D0CTYPE> или это объявление недостаточно строгое), свойства

width

и

height

включают ширину отступов и толщину рамок.

Поведение IE ошибочно, но нестандартная блочная модель, реализованная в IE, иногда бывает весьма удобна. Учитывая это, в стандарт CSS3 было добавлено свойство

box-sizing

. По умолчанию оно имеет значение

content-box

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

box-sizing: border-box

, броузер будет использовать блочную модель IE и свойства

width

и

height

будут включать рамки и отступы. Модель

border-box

особенно удобно использовать, когда желательно задать общий размер элемента в процентах, а ширину отступов и толщину рамки - в пикселах:

<div style="box-sizing:border-box; width: 50%;

padding: 10px; border: solid black 2px;"">

Свойство

box-sizing

поддерживается

всеми текущими броузерами, но пока не во всех оно реализовано без префикса. В Chrome и Safari свойство имеет имя

– webkit-box-sizing

. В Firefox -

– moz-box-sizing

. В Opera и IE8 (и выше) свойство имеет имя

box-sizing

без префикса.

Будущей альтернативой модели

border-box

, предусматриваемой стандартом CSS3, являются вычисляемые значения свойств:

<div style="width: calc(50%-12рх); padding: 10рх; border: solid black 2px;">

Возможность вычисления значений CSS-свойств с применением calc поддерживается в IE9 и в Firefox 4 (как -moz-calc).

16.2.4. Отображение и видимость элементов

Управлять видимостью элемента документа позволяют два CSS-свойства:

visibility

и

display

. Пользоваться свойством

visibility

очень просто: если оно имеет значение

hidden

, то элемент не отображается, если

visible

, - отображается. Свойство

display

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

display

имеет значение

none

, то элемент вообще не отображается и для него даже не выделяется место на странице.

Различие между свойствами стиля

visibility

и

display

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

visibility

в значение

hidden

делает элемент невидимым, но резервирует для него место в документе. Такой элемент может повторно скрываться и отображаться без изменения компоновки документа. Однако если свойство

display

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

display

может пригодиться, например, при создании разворачивающихся и сворачивающихся списков.

Обратите внимание, что нет особого смысла использовать атрибуты

visibility

и

display

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

16.2.5. Цвет, прозрачность и полупрозрачность

Цвет текста, содержащегося в элементе документа, можно задать с помощью CSS-свойства

color

. Цвет фона любого элемента - с помощью свойства

background-color

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

border-color

или сокращенной формы его написания

border

.