CSS / 7. Основы модели визуального форматирования

В предыдущих главах я привел огромное количество практической информации о том, как CSS управляет текстом и шрифтами документа. В этой главе мы обратимся к теоретическим аспектам формирования визуального представления, которые отвечают на многие вопросы, пропущенные нами ранее ради того, чтобы сосредоточить внимание на реализации CSS. Почему необходимо посвятить целую главу теоретическим основам формирования визуального представления в CSS? Дело в том, что CSS – настолько мощная, открытая модель, что ни одна книга не могла бы претендовать на охват всех возможных способов сочетания свойств и эффектов. Несомненно, вы продолжите открывать новые возможности применения CSS для создания собственных эффектов в документах.
Статьи раздела '7. Основы модели визуального форматирования':
Автоматическое определение высоты
В самом простом случае блочный элемент со значением height: auto в нормальном потоке генерируется таким образом, чтобы его высоты как раз хватало для размещения строк его содержимого (включая текст). Значение auto задает границы а...
Блок-контейнер
Каждый элемент располагается относительно его блока-контейнера. С высокой степенью достоверности можно утверждать, что блок-контейнер – это «контекст расположения» элемента. CSS2.1 устанавливает ряд правил для объявления блока-кон...
Блок-контейнер
Каждый элемент располагается относительно его блока-контейнера. С высокой степенью достоверности можно утверждать, что блок-контейнер – это «контекст расположения» элемента. CSS2.1 устанавливает ряд правил для объявления блока-кон...
Блочные элементы
Поведение блочных элементов иногда бывает непредсказуемым. Например, может отличаться размещение элементов относительно горизонтальной и вертикальной осей. Чтобы полностью понимать, как обрабатываются блочные элементы, необходимо ...
Вертикальное выравнивание
При изменении вертикального выравнивания строковых блоков применяются такие же принципы определения высоты. Предположим, для элемента strong задано вертикальное выравнивание в 4px: This is text, some of which is emphasized, p...
Вертикальное форматирование
У вертикального форматирования блочных элементов, как и у горизонтального, есть своя специфика. Стандартная высота элемента определяется его содержимым. На высоту также влияет ширина содержимого: чем уже становится абзац, тем выше...
Вычисляемые значения
Вычисляемое значение свойства display может меняться, если элемент свободно перемещаемый или абсолютно позиционированный. Оно также может меняться, если объявлено для корневого элемента. Кстати, значения display, position и float ...
Глифы и область содержимого
Даже в тех случаях, когда вы пытаетесь не допустить перекрытия фонов строковых незамещаемых элементов, все равно это может произойти. Это зависит от того, какой шрифт используется. Проблема заключается в разнице между кегельным кв...
Горизонтальное форматирование
Горизонтальное форматирование обычно сложнее, чем может показаться на первый взгляд. Частично сложность заключается в том, чтобы понять, что свойство width определяет ширину области содержимого, а не всего видимого блока элемента....
Добавление свойств блока
Как вы уже знаете, к строковым незамещаемым элементам могут применяться и отступы, и поля, и рамки. Эти аспекты строкового элемента не оказывают никакого влияния на высоту контейнера строки. Если применить к элементу span рамки бе...
Дополнительные свойства блока
После всего этого применение полей, рамок и отступов к замещаемым строковым элементам кажется почти простым. Отступы и рамки применяются к замещаемым элементам как обычно; отступ добавляет пространство вокруг фактического содержим...
Замещаемые элементы
До сих пор мы имели дело с горизонтальным форматированием незамещаемых блочных элементов в нормальном потоке текста. Упорядочивать замещаемые блочные элементы немного проще. Сохраняются все правила для незамещаемых блоков, за одн...
Замещаемые элементы и базовая линия
К этому времени вы, возможно, заметили, что по умолчанию замещаемые строковые элементы располагаются на базовой линии. Если добавить в замещаемый элемент отступ снизу, поле или рамку, область содержимого переместится вверх. На сам...
Значение auto для нескольких свойств
Теперь давайте посмотрим, что происходит, когда значение auto задано для двух из трех свойств (width, margin-left или margin-right). Если оба поля имеют значение auto, как показано в приведенном ниже коде, для них устанавливается ...
Изменение представления элемента
Автор может влиять на способ представления элемента агентом пользователя, задавая значение свойства display. Теперь, когда мы поближе познакомились с визуальным форматированием, давайте вернемся к свойству display и обсудим еще дв...
Изменение ролей
Когда дело доходит до стилевого оформления документа, очевидно, удобно иметь возможность менять роли элемента в представлении документа. Пусть имеется ряд ссылок в элементе div, которые требуется сверстать в виде вертикальной врез...
Инициальные элементы
CSS2 вводит значение run-in, еще один интересный гибрид блока/строки, который может сделать некоторые блочные элементы строковой частью следующего элемента. Эта возможность полезна для реализации некоторых эффектов, привычных в оф...
История строковой модели
Строковая модель форматирования CSS может показаться чрезмерно сложной и в некоторой степени даже несоответствующей ожиданиям автора. К сожалению, сложность есть результат создания языка стилей, который является обратно-совместимы...
Компоновка строки
Во-первых, надо понимать, как компонуется строковое содержимое. Этот процесс не такой простой и ясный, как в блочных элементах, которые просто генерируют контейнеры и обычно не допускают сосуществования чего-то еще. Для сравнения ...
Краткий обзор терминов
Охарактеризуем коротко типы элементов, обсуждаемых в данной главе, а также вспомним некоторые важные термины, необходимые нам для понимания материала: Нормальный поток Это воспроизведение текста, написанного на западных языках...

Страницы: 1 2