О спецификации CSS2 том 2


Вычисление ширины и полей


Ширина содержимого свойство 'width'
'width'Значение:<length> | <percentage> | auto | inheritНачальное:auto Применяется:ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов Наследуется:нет Пр...
Вычисление ширины и полей
Вычисленные значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' для элементов зависят от типа генерируемого бокса и друг от друга. В принципе вычисленные значения - те же, чт...
Инлайн незамещаемые элементы
10.2 Ширина содержимого: свойство 'width' 'width'Значение:<length> | <percentage> | auto | inheritНачальное:auto Применяется:ко всем элементам, кроме незамещаемых инлайн-элементов, ря...
Вычисление ширины и полей
Вычисленные значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' для элементов зависят от типа генерируемого бокса и друг от друга. В принципе вычисленные значения - те же, чт...
Уровень блока незамещаемые элементы при нормальном всплывании
10.3.3 Уровень блока, незамещаемые элементы при нормальном всплывании Если 'left'или 'right' заданы как 'auto', их вычисленное значение - '0'. Следующее условие обязано соблюдаться между свойствам...
Уровень блока замещаемые элементы при нормальном всплывании
10.3.4 Уровень блока, замещаемые элементы при нормальном всплывании Если 'left'или 'right' - 'auto', их вычисленное значение - '0'. Если 'width' специфицировано как 'auto', его значением является...
Всплывание незамещаемые элементы
10.3.5 Всплывание, незамещаемые элементы Если 'left', 'right', 'width', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'....
Всплывание замещаемые элементы
10.3.6 Всплывание, замещаемые элементы Если 'left', 'right', 'margin-left' или 'margin-right'специфицированы как 'auto', их вычисленное значение - '0'. Если 'width' - 'auto', его значением являетс...
Абсолютное позиционирование незамещаемые элементы
10.3.7 Абсолютное позиционирование, незамещаемые элементы Условие, определяющее вычисленные значения для этих элементов: 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + '...
Абсолютно позиционированные замещаемые элементы
10.3.8 Абсолютно позиционированные замещаемые элементы Ситуация напоминает предыдущую, за исключением того, что элемент имеет внутреннююширину. Последовательность замен теперь: Если 'width' - 'aut...
Минимальная и максимальная ширина 'minwidth' и 'maxwidth'
'min-width' Значение:<length> | <percentage> | inheritНачальное:зависит от ПА Применяется:ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы Нас...
Высота содержимого свойство 'height'
'height' Значение:<length> | <percentage> | auto | inheritНачальное:auto Применяется:  ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов и групп столбцо...
Вычисление высоты и полей
10.5 Высота содержимого: свойство 'height' 'height' Значение:<length> | <percentage> | auto | inheritНачальное:auto Применяется:ко всем элементам, кроме незамещаемых инлайн-элеме...
Инлайн замещаемые элементы
10.6.2 Инлайн, замещаемые элементы уровня блока, замещаемые элементы при нормальном всплывании и всплывание, замещаемые элементы Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены...
Уровень блока незамещаемые
10.6.3 Уровень блока, незамещаемые элементы при нормальном всплывании и всплывание, незамещаемые элементы Если 'top', 'bottom', 'margin-top'или 'margin-bottom'- 'auto', их вычисленное значение - '...
Абсолютно позиционированные незамещаемые элементы
10.6.4 Абсолютно позиционированные незамещаемые элементы Для абсолютно позиционированных элементов вертикальные размеры должны удовлетворять следующему условию: 'top' + 'margin-top' + 'border-top-...
Абсолютно позиционированные замещаемые элементы
10.6.5 Абсолютно позиционированные замещаемые элементы Ситуация подобна предыдущей, за исключением того, что элемент имеет внутреннюювысоту. Последовательность замен теперь: Если 'height' - 'auto'...
Минимальная и максимальная высота 'minheight' и 'maxheight'
Иногда необходимо ограничить высоту элементов определёнными рамками. Два свойства выполняют эту функцию: 'min-height' Значение:<length> | <percentage> | inheritНачальное:0 Применяется...
Подсчёт высоты строк свойства 'lineheight' и 'verticalalign'
Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так: Вычисляется высота каждого инлайн-бок...
Габариты и полугабариты
10.8.1 Габариты и полугабариты Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (например, 'line-height' > 1em), может иметься некоторое пространство сверху и снизу...
Визуальные эффекты
11. Визуальные эффектыСодержание11.1 Переполнение и сжатие11.1.1 Переполнение: свойство 'overflow' 11.1.2 Сжатие: свойство 'clip' 11.2 Видимость: свойство 'visibility'...
Переполнение и сжатие
Обычно содержимое бокса блока ограничено краями бокса. В определённых случаях бокс может переполняться, то есть его содержимое частично или полностью находится за пределами бокса, например: Строка...
Переполнение свойство 'overflow'
11.1.1 Переполнение: свойство 'overflow' 'overflow' Значение:visible | hidden | scroll | auto | inheritНачальное:visible Применяется:к элементам уровня блока и к замещаемым элементам Наследу...
Иллюстрация
Иллюстрация 1   [D] Установка 'overflow'в 'hidden' для элемента DIV, с другой стороны, вызывает усечение BLOCKQUOTE содержащим блоком:...
Иллюстрация
Иллюстрация 2[D] Значение 'scroll' сообщит ПАгенту, что поддерживается визуальный механизм прокрутки, чтобы вывести его для обеспечения доступа пользователя к усечённому содержимому....
Сжатие свойство 'clip'
11.1.2 Сжатие: свойство 'clip' Сжимаемая область определяет, какая часть выводимого содержимогоэлемента видна. По умолчанию сжатая область имеет тот же размер и форму, что и бокс(ы) элемента. В т...
Иллюстрация
Иллюстрация 3[D]Примечание. В CSS2 все сжимаемые области прямоугольны. Мы предполагаем в будущем расширение, разрешающее непрямоугольное сжатие....
Видимость свойство 'visibility'
'visibility' Значение:visible | hidden | collapse | inheritНачальное:inherit Применяется:  ко всем элементам Наследуется:нетПроцентное:N/A Носитель:визуальныйСвойство 'visibility' специф...
Модель визуального форматирования
9. Модель визуального форматированияСодержание9.1 Введение9.1.1 Порт просмотра9.1.2 Содержащие блоки9.2 Управление генерацией боксов9.2.1 Элементы уровня блока и боксы блока Анонимные боксы бл...
Введение
Эта и последующие главы описывают модель визуального форматирования: то как пользовательские агенты (ПА) обрабатывают дерево документадля визуального носителя.В модели визуального форматирования к...
Порт просмотра
9.1.1 Порт просмотраПА для непрерывных носителейобычно предлагают пользователю порт просмотра (окно или другую область просмотра на экране), в котором пользователь видит документ. ПА могут изменят...
Содержащие блоки
9.1.2 Содержащие блоки В CSS2 многие варианты позиционирования и размеры вычисляются относительно кромки прямоугольного бокса, называемого содержащий блок. Обычно генерируемые боксы действуют как...
Управление генерацией боксов
Последующие разделы описывают типы боксов, которые могут генерироваться в CSS2. Тип бокса воздействует отчасти на его (бокса) поведение в модели визуального форматирования. Свойство 'display', опи...
Элементы уровня блока и боксы блока
9.2.1 Элементы уровня блока и боксы блока Элементы уровня блокаэто элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства 'display'...
Анонимные боксы блока
Анонимные боксы блока В этом документе:<DIV> Some text <P>More text </DIV> (и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровн...
Иллюстрация
Иллюстрация 1[D] На диаграмме изображены три бокса, один из которых анонимный, в примере - верхний. Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя друго...
Инлайнэлементы и инлайнбоксы
9.2.2 Инлайн-элементы и инлайн-боксы Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выдел...
Анонимные инлайнбоксы
Анонимные инлайн-боксы В таком документе:<P>Некоторый <EM>выделенный</em> текст.</P> элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для "вы...
Боксы compact/компактные
9.2.3 Боксы compact/компактные Бокс compactведёт себя так: Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact, то compact-бокс форматируется как одностро...
Втягивающиеся боксы (runin)
9.2.4 Втягивающиеся боксы (run-in) Бокс run-inведёт себя так: Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-бо...
Свойство 'display'
9.2.5 Свойство 'display' 'display' Значение:inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row...
Схемы позиционирования
9.3 Схемы позиционирования В CSS2 бокс может находиться в разных слоях в соответствии со схемами позиционирования: Normal flow/Нормальное расположение. В CSS2 нормальное расположение включает фор...
Выбор схемы позиционирования свойство 'position'
9.3.1 Выбор схемы позиционирования: свойство 'position' Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса. 'position' Зна...
Позиционирование и заполнение в боксе 'top' 'right' 'bottom' 'left'
9.3.2 Позиционирование и заполнение в боксе: 'top', 'right', 'bottom', 'left' Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционирова...
Нормальное расположение
Боксы при нормальном обтекании относятся к контексту форматирования, который может быть уровня блока и инлайн, но не тем и другим одновременно. Боксы блока находятся в контексте форматирования бло...
Контекст форматирования блока
9.4.1 Контекст форматирования блока В контексте форматирования блока боксы устанавливаются один за другим, вертикально, начиная от верха содержащего блока. Вертикальное расстояние между двумя род...
Контекст инлайнформатирования
9.4.2 Контекст инлайн-форматирования В контексте инлайн-форматирования боксы устанавливаются по горизонтали, один за другим, начиная от верха содержащего блока. Горизонтальные поля, рамки и заполн...
Иллюстрация
Иллюстрация 2[D] Поле вставлено до "emphasized" и после "words". Заполнение вставлено до, сверху и снизу от "emphasized" и после, сверху и снизу от "words&...
Относительное позиционирование
9.4.3 Относительное позиционирование После того, как бокс расположен в соответствии с нормальным расположением, он может быть сдвинут относительно этой позиции. Это называется относительным позиц...
Поплавки/Floats
Поплавок это бокс, который "всплывает" (смещается) влево или вправо на текущей строке. Самое интересное в поведении поплавка (или "всплывающего", или "плавающего" бок...
Иллюстрация
Иллюстрация 3[D] Форматирование могло бы быть точно таким же, если бы документ был следующим: <BODY> <P>Some sample text <IMG src=img.gif alt="This image will illustrate fl...
Иллюстрация
Иллюстрация 4   [D] Всплывающее изображение скрывает рамки перекрываемого бокса блока. Следующий пример иллюстрирует использование свойства 'clear' для предотвращения всплывания со...
Иллюстрация
Иллюстрация 5[D] Оба параграфа установлены в 'clear: left', что "выталкивает вниз" второй параграф в положение под поплавком - его верхнее поле растягивается, чтобы выполнить это (см. св...
Позиционирование поплавка свойство 'float'
9.5.1 Позиционирование поплавка: свойство 'float' 'float' Значение:left | right | none | inheritНачальное:none Применяется:  ко всему, кроме позиционированных элементов и генерируе...
Управление положением после поплавка свойство 'clear'
9.5.2 Управление положением после поплавка: свойство 'clear' 'clear' Значение:none | left | right | both | inheritНачальное:none Применяется:к элементам уровня блока Наследуется:нет Процентное...
Абсолютное позиционирование
В модели абсолютного позиционирования бокс смещается явно относительно своего содержащего блока. Он полностью удаляется из нормального позиционирования (не влияет на последующих родственников). Аб...
Фиксированное позиционирование
9.6.1 Фиксированное позиционирование Фиксированное позиционирование это подкатегория абсолютного позиционирования. Единственное отличие в том, что для фиксированно позиционированного бокса содержа...
Иллюстрация
Иллюстрация 6[D] Этого можно добиться с помощью такого документа HTML и таблицы стилей: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>...
Соотношение между 'display' 'position' и 'float'
9.7 Соотношение между 'display', 'position' и 'float' Три свойства, влияющие на генерацию и структуру бокса -- 'display', 'position' и 'float' -- взаимодействуют так: Если 'display' имеет значение...
Сравнение нормального расположения поплавков и абсолютного позиционирования
Чтобы проиллюстрировать разницу между нормальным и относительным позиционированием, поплавками и абсолютным позиционированием, мы предлагаем серию примеров на базе следующего фрагмента HTML:<!D...
Нормальное расположение
9.8.1 Нормальное расположение Рассмотрим следующие объявления CSS для outerи inner, которые не изменяют нормального расположения боксов: #outer { color: red } #inner { color: blue } Элемент P соде...
Иллюстрация
Иллюстрация 7[D]...
Относительное позиционирование
9.8.2 Относительное позиционирование Чтобы увидеть действие относительного позиционирования, мы специфицируем: #outer { position: relative; top: -12px; color: red } #inner { position: relative; to...
Иллюстрация
Иллюстрация 8[D] Заметьте также, что, имея смещение для outer  '-24px', текст outer и текст тела могут быть перекрыты....
Обтекание бокса
9.8.3 Обтекание бокса Теперь рассмотрим эффект от всплываниятекста элемента inner вправо при использовании следующих правил: #outer { color: red } #inner { float: right; width: 130px; color: blue...
Иллюстрация
Иллюстрация 9[D] Чтобы увидеть действие свойства 'clear', мы добавим в пример родственныеэлементы:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <...
Иллюстрация
Иллюстрация 10   [D] Однако, если свойство 'clear'родственного элемента установлено в 'right' (т.е. генерируемый родственный бокс не займёт позицию справа от всплывающего бокса), ро...
Иллюстрация
Иллюстрация 11[D]...
Абсолютное позиционирование
9.8.4 Абсолютное позиционирование Наконец, мы рассмотрим действие абсолютного позиционирования. Вот объявления CSS для outer и inner: #outer { position: absolute; top: 200px; left: 200px; wi...
Иллюстрация
Иллюстрация 12[D] Следующий пример покажет абсолютно позиционированный бокс, являющийся дочерним от относительно позиционированного бокса. Хотя родительский бокс outer не имеет смещения, установка...
Иллюстрация
Иллюстрация 13   [D] Если мы не позиционируем бокс outer: #outer { color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue;...
Иллюстрация
Иллюстрация 14[D] Относительное и абсолютное позиционирование может использоваться для выполнения смены баннеров, как показано в следующем примере. Такой документ: <P style="position:...
Иллюстрация
Иллюстрация 15   [D] Сначала параграф (стороны содержащего блока которого показаны на иллюстрации) расположен нормально. Затем он смещается на '10px' от левого края содержащего...
Слои
В последующих разделах выражение "спереди от" означает ближе к пользователю, смотрящему на экран. В CSS2 каждый бокс имеет позицию в трёх измерениях. В дополнение к позиции относительно...
Спецификация уровня в пакете слоёв свойство 'zindex'
9.9.1 Спецификация уровня в пакете слоёв: свойство 'z-index' 'z-index' Значение:auto | <integer> | inheritНачальное:auto Применяется:к позиционированным элементам Наследуется:нет Процент...
Направление текста свойства 'direction' и 'unicodebidi'
9.10 Направление текста: свойства 'direction'и 'unicode-bidi' Символы в некоторых видах письма записываются справа налево. В некоторых документах, особенно на арабском и еврейском, и в некоторых к...


Начало


Книжный магазин