Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / 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
Визуализация элементов


Ширина содержимого: свойство width


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

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


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


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


Пример: следующее правило устанавливает ширину абзаца, равной 400 пикселей. P { width: 400px }


Вычисление ширин и границ


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


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

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

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

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


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


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


Специфицированное значение auto свойств margin-left, margin-right, left и right заменяется вычисленным значением 0. Свойство width здесь не применимо, т. к. ширина содержимого однозначно определяется самим содержимым элемента.


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


Специфицированное значение auto свойств a href="/cgi-bin/print.pl?id=81&p=1#23" class=intext>margin-left, margin-right, left и right заменяется вычисленным значением 0. Специфицированное значение auto свойства width заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа).


Не внешние блочные элементы в обычном потоке элементов


Специфицированное значение auto свойств left и right заменяется вычисленным значением 0. Остальные свойства связаны между собой следующим соотношением:


margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина вмещающего блока


Поэтому, если мы явно зададим значения всех этих свойств, отличные от auto, то одно из значений будет изменено обозревателем в соответствии с приведенным соотношением (обычно это margin-left, если direction = ltr, и margin-right, если direction = rtl). Если ровно одно значение задано как auto, то оно вычисляется из приведенного соотношения. Если width равно auto, то все остальные значения auto заменяются на 0, и ширина вычисляется из приведенного соотношения. Если margin-left и margin-right равны auto, то их вычисленные значения будут равны между собой.


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


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


Минимальная и максимальная ширина: свойства min-width и max-width


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



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

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


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


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


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


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


P { min-width: 20px; max-width: 400px }


Вперед  >>>
 1  2  3  4  5  6 


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

8  В тему

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

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

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

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

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

Цвет и фон

Шрифты

Текст

Таблицы

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

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

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

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