Float Перемещает элемент к левому или правому краю окна браузера или, если этот элемент находится внутри другого, к левому или правому краю содержащего элемента. Можно сказать, что свойство float делает элемент плавающим. Элементы, которые появляются после плавающего, передвигаются, чтобы заполнить место справа (для плавающих влево элементов) или слева (для плавающих вправо элементов), а затем обтекают плавающий элемент. Используйте плавание для простых эффектов, таких как перемещение изображения к какой-либо стороне страницы, или для очень сложных разметок. Значения: left, right, none. Значение none полностью отключает плавание, что может оказаться полезным, когда у определенного тега есть стиль, к которому применено плавание влево или вправо и вы хотите создать более специфический стиль, чтобы отменить плавание этого тега.
Пример: float: left;.
height Устанавливает высоту содержимого — области элемента, в которой определены, например, текст, изображения и др. Фактическая высота элемента на экране — это общая сумма высоты, верхнего и нижнего полей, верхнего и нижнего отступов, а также верхней и нижней границ. Значения: любая корректная единица измерения CSS, например пикселы, em или проценты. Проценты вычисляются на основании высоты содержащего элемента. Пример: height: 50%;.
ПРИМЕЧАНИЕ. Иногда содержимое получается больше установленной высоты: если вы вводите, например, много текста или ваш посетитель увеличивает размер шрифта в своем браузере. Браузеры обрабатывают эту ситуацию по-разному: Internet Explorer версий 6 и ниже просто делает область больше, в то время как в других браузерах содержимое простирается за пределы области.
left При использовании с абсолютным или фиксированным позиционированием это свойство определяет позицию левого края стиля относительно левого края самого близкого установленного предка. Если стилизованный элемент не находится внутри каких-либо позиционированных тегов, то он будет размещаться относительно левого края окна браузера. Вы можете задействовать это свойство, чтобы поместить изображение на расстоянии 20 пикселов от левого края окна браузера. При использовании с относительным позиционированием расположение элемента вычисляется от его левого края. Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты.
Пример: left: 5em;.
max-height Устанавливает максимальную высоту для элемента. Таким образом, область элемента может быть короче установленного значения, но не может быть выше. Если содержимое элемента оказывается выше, чем max-height, оно выходит за пределы области. Вы можете управлять этим переполнением с помощью свойства overflow. Internet Explorer версий 6 и ниже не понимает свойство max-height. Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Браузеры вычисляют проценты на основании высоты содержащего элемента. Пример: max-height: 100px;.
max-width Устанавливает максимальную ширину для элемента. Область элемента может быть уже, чем это установленное значение, но не может быть шире. Если содержимое элемента шире, чем max-width, оно выходит за пределы области, чем вы можете управлять с помощью свойства overflow. В основном свойство max-width применяется в свободных разметках. Благодаря этому свойству разработчик может быть уверен: дизайн страницы на очень больших мониторах не станет таким широким, что будет непригоден для чтения. Свойство не работает в Internet Explorer версий 6 и ниже. Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты вычисляются на основании ширины содержащего элемента.
Пример: max-width: 950px;.
min-height Устанавливает минимальную высоту для элемента. Область элемента может быть выше установленного значения, но не может быть короче. Если содержимое элемента по высоте не такое, как установлено свойством min-height, высота области уменьшается, чтобы соответствовать заданному значению. Internet Explorer версий 6 и ниже не распознает это свойство. Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты рассчитываются на основе высоты содержащего элемента.
Пример: min-height: 20em;.
min-width Устанавливает минимальную ширину для элемента. Область элемента может быть шире, чем установленное значение, но не может быть уже. Если содержимое элемента по высоте не такое, как установлено свойством, область становится такой тонкой, как указывает значение min-width. Вы также можете использовать это свойство в свободных разметках, чтобы дизайн не «разваливался» при меньшей ширине окна. Когда окно браузера является более узким, чем определено min-width, добавляются горизонтальные полосы прокрутки. Internet Explorer версий 6 и ниже не поддерживает это свойство. Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты рассчитываются на основе ширины содержащего элемента.
Пример: min-width: 760px;.
ПРИМЕЧАНИЕ. Свойства max-width и min-width обычно применяются в связке при создании свободных разметок.
overflow Определяет, что должно случиться с элементом, который выходит за пределы своей области для содержимого, например, с фотографией, оказавшейся шире, чем установлено свойством width. Значения: visible, hidden, scroll, auto. Значение visible вынуждает излишнее содержимое простираться за пределы области, накладывая его на границы и другие элементы страницы. Internet Explorer версий 6 и ниже просто увеличивает область, чтобы вставить более крупный объект. Значение hidden скрывает любое содержимое за пределами отведенной ему области; scroll добавляет полосы прокрутки к элементу, в результате чего посетитель может выполнить прокрутку, чтобы увидеть любой объект за пределами содержащей его области, — нечто вроде мини-фрейма. Значение auto добавляет полосы прокрутки, только когда они необходимы, чтобы показать больше содержимого.
Пример: overflow: hidden;.
position Определяет, какой тип позиционирования использует браузер при размещении элементов на странице. Значения: static, relative, absolute, fixed. Значение static определяет обычный режим браузера — один блочный элемент расположен на вершине следующего, а содержимое простирается от верхнего до нижнего края экрана; relative размещает элемент относительно того места, где он в настоящее время появляется на странице. Другими словами, установка этого свойства может сместить элемент с его текущей позиции. Значение absolute полностью убирает элемент из потока страницы. Другие элементы не видят абсолютный элемент и могут появиться под ним. Это значение используется для установки элемента в конкретное место на странице или для его размещения в определенном месте относительно родительского элемента, который установлен с абсолютным, относительным или фиксированным позиционированием. Значение fixed фиксирует элемент на странице, поэтому, когда она прокручивается, фиксированный элемент остается на экране, что очень похоже на фреймы HTML. Internet Explorer версий 6 и ниже игнорирует значение fixed.
Пример: position: absolute;.
ПРИМЕЧАНИЕ. Чаще всего применяются значения relative, absolute и fixed вместе с left, right, top и bottom.
Right При использовании с абсолютным или фиксированным позиционированием это свойство определяет положение правого края стиля относительно правого края его самого близкого установленного предка. Если элемент, для которого разрабатывается стиль, не находится внутри каких-либо позиционированных тегов, то он будет размещаться относительно правого края окна браузера. Вы можете применять это свойство, чтобы поместить боковую панель на определенном расстоянии от правого края окна браузера. При использовании свойства с относительным позиционированием положение элемента вычисляется от его правого края. Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты.
Пример: right: 5em;.
ПРИМЕЧАНИЕ. В Internet Explorer версий 6 и ниже могут быть проблемы при позиционировании элементов с ис- пользованием свойства right.
top Действие этого свойства противоположно действию свойства bottom, описанного выше. Другими словами, при использовании с абсолютным или фиксированным позиционированием это свойство определяет позицию верхнего края стиля относительно верхнего края его самого близкого установленного предка. Если стилизованный элемент не находится внутри каких-либо позиционированных тегов, то он будет размещаться относительно верхнего края окна браузера. Вы можете использовать это свойство, чтобы поместить логотип на установленное расстояние от верхнего края окна браузера. При использовании свойства с относительным позиционированием размещение элемента рассчитывается от его верхнего края. Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты.
Пример: top: 5em;.
visibility Определяет, отображает ли браузер элемент. Используйте это свойство, чтобы скрыть некоторые объекты страницы, например абзац, заголовок или содержимое тега <div>. В отличие от значения none свойства display, установка которого скрывает элемент и удаляет его из потока страницы, значение hidden свойства visibility позволяет не удалять элемент из потока страницы. Вместо этого остается пустое пространство в том месте, где был бы элемент. По этой причине свойство visibility чаще применяется с абсолютно позиционированными элементами, которые уже были удалены из потока страницы. Скрытие элемента не принесет большой пользы, если вы не сможете показать его снова. Программирование JavaScript — самый распространенный способ переключать свойство visibility для показа и скрытия элементов на странице. Вы можете также использовать псевдокласс:hover, чтобы изменить свойство visibility элемента, когда посетитель наводит указатель мыши на некоторые части страницы. Значения: visible, hidden. Кроме того, можно использовать значение collapse, чтобы скрыть строку или столбец в таблице.
Пример: visibility: hidden;.
width Устанавливает ширину области элемента, которая содержит текст, изображения и др. Количество места на экране, фактически отведенного для элемента, может быть намного шире, так как включает ширину левого и правого полей, левого и правого отступов, а также левой и правой границ. Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты рассчитываются в зависимости от ширины содержащего элемента.
Пример: width: 250px;.
z-index Управляет порядком расположения позиционированных элементов. Относится только к элементам, у которых свойству position установлено значение absolute, relative или fixed. Свойство определяет, где появляется элемент относительно оси Z. Если два абсолютно позиционированных элемента накладываются друг на друга, тот, у которого более высокий индекс позиционирования, окажется сверху. Значения: целочисленные значения, такие как 1, 2 или 10. Вы также можете использовать отрицательные значения, но различные браузеры обрабатывают их по-разному. Чем больше число, тем «выше» расположен элемент. Элемент с z-index, равным 20, появится ниже элемента с z-index, равным 100 (если эти два элемента накладываются). Пример: z-index: 12;.
СОВЕТ. Значения не должны задаваться в строгом порядке. Если для элемента A установлено значение 1 свойства z-index, вам не обязательно указывать значение 2 для элемента B, чтобы поместить его сверху. Вы можете использовать 5, 10 и т. д., чтобы получить тот же самый результат, главное, чтобы число было больше. Так, чтобы убедиться в том, что элемент всегда будет появляться над другими элементами, просто задайте ему очень большое значение, например 10 000. Но помните, что максимальное значение, которое может обрабатывать Firefox, равняется 2 147 483 647, поэтому не делайте z-index больше этого числа.