Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Не для новичков /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Визуализация элементов - Программирование от RIN.RU
Визуализация элементов



Высота содержимого: свойство height


Синтаксис:height: <размер> | <процент> | auto | inherit
Начально:auto
Применимо:ко всем элементам, кроме текстовых, столбцов таблиц и групп столбцов
Наследуемо:нет
Проценты:относительно высоты вмещающего блока
Устройства:визуальные

Поддержка :Соответствует стандарту (5.0+)
Соответствует стандарту (4.0+)


Свойство height задает высоту содержимого при генерации объемлющего прямоугольника блочных элементов и элементов, внешних по отношению к CSS (т. е. графических образов, объектов, аплетов и т. п.). Отметим, что высота текстовых элементов задается свойством line-height. Высота не может быть отрицательной и задается одним из следующих способов:


<размер>
Задает фиксированный размер.
<процент>
Вычисляется относительно высоты вмещающего блока. Если эта высота явно не задана,
то значение интерпретируется как auto.
auto
См. этот раздел


Пример: следующее правило устанавливает высоту абзаца, равной 100 пикселей.


P { height: 100px }


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


Вычисление высот и границ


Вычисленные значения свойств height, margin-top, margin-bottom, top и bottom зависят от типа генерируемого прямоугольника. Как правило, вычисленное значение совпадает со специфицированным (кроме значения auto, которое заменяется на вычисленное значение по умолчанию), но есть и исключения. Различаются следующие типы элементов:


  • блочные и текстовые;

  • внешние по отношению к CSS и прочие;

  • плавающие и нет;

  • абсолютно позиционированные и остальные.


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


Не внешние текстовые элементы


Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Свойство height здесь не применимо, но высоту такого элемента можно задать свойством line-height.


Внешние элементы (текстовые, блочные в обычном потоке элементов и плавающие)


Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Специфицированное значение auto свойства height заменяется вычисленным значением высоты соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа).


Не внешние блочные элементы (в обычном потоке элементов или плавающие)


Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Если height равно auto, то его вычисленное значение зависит от того, имеет ли данный элемент блочных детей. Если все его дети являются текстовыми, то высота элемента вычисляется как расстояние от верхней линии самого верхнего строчного блока до нижней линии самого нижнего строчного блока. Если же элемент имеет блочных детей, то его высота вычисляется как расстояние от верхнего края рамки самого верхнего блока до нижнего края рамки самого нижнего блока. При этом учитываются только те дети, которые находятся в обычном потоке элементов (иными словами, плавающие и абсолютно позиционированные элементы игнорируются, а относительно позиционированные учитываются без своего смещения).


Не внешние абсолютно позиционированные элементы


Вычисленные значения свойств связаны между собой следующим соотношением:


top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = высота вмещающего блока


При этом вычисление значений свойств производится в следующем порядке:


  • Если top равно auto, то auto заменяется на расстояние от верхнего края вмещающего блока до верхней границы гипотетического прямоугольника, который был бы первым объемлющим прямоугольником данного элемента, если бы он был статическим. Это значение отрицательно, если гипотетический прямоугольник расположен выше объемлющего блока.

  • Если и height, и bottom равны auto, то значение auto для bottom заменяется на 0.

  • Если bottom или height все еще равны auto, то значения auto для margin-top и margin-bottom заменяются на 0.

  • Если margin-top и margin-bottom все еще равны auto, то их значения вычисляются из приведенного выше соотношения так, чтобы они были равны между собой.

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

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


Внешние абсолютно позиционированные элементы


Вычисления производятся так же, как в предыдущем случае, но с одним отличием. Если height равно auto, то оно заменяется вычисленным значением высоты соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа), а затем производятся все перечисленные расчеты.


Минимальная и максимальная высота: свойства min-height и max-height


Синтаксис:min-height: <размер> | <процент> | inherit
Начально:определяется обозревателем
Применимо:ко всем элементам, кроме текстовых и табличных
Наследуемо:нет
Проценты:относительно высоты вмещающего блока
Устройства:визуальные

Синтаксис:max-height: <размер> | <процент> | none | inherit
Начально:none
Применимо:ко всем элементам, кроме текстовых и табличных
Наследуемо:нет
Проценты:относительно высоты вмещающего блока
Устройства:визуальные

Поддержка :Не поддерживаются
Не поддерживаются


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


<размер>
Задает фиксированный размер.
<процент>
Вычисляется относительно высоты вмещающего блока. Если эта высота явно не задана,
то значение интерпретируется как auto.
none
Неограниченная высота прямоугольника.


Эти свойства применяются следующим образом. Сначала вычисляется свойство height, как описано в разделе 2.6.5. Затем проверяется, попадает ли оно в диапазон от min-height до max-height, и, если нет, то вычисленное значение height заменяется на соответствующее предельно допустимое значение.


Пример: следующее правило устанавливает пределы для высоты абзаца.


P { min-height: 200px; max-height: 1000px }


<<<  НазадВперед  >>>
 1  2  3  4  5  6 


 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Введение в таблицы стилей

Селекторы, псевдоклассы и псевдоэлементы

Значения свойств, каскадность и наследование

Границы, заполнители и рамки

Позиционирование элементов

Цвет и фон

Шрифты

Текст

Таблицы

Генерация содержимого, нумерация и списки

Страничные устройства вывода

Звуковые таблицы стилей

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь