Данный параметр задает стороны элемента, где не допускаются другие плавающие элементы. Плавающие элементы - изображения и текстовые элементы, которые появляются в другом элементе.
Примечание: При использовании с параметром "float" не всегда работает как ожидается.
Наследование: нет.
Пример:
div{clear: both} div{clear: left}
Может принимать следующие значения:
Значение
Описание
left
Плавающие элементы не допускаются слева
right
Плавающие элементы не допускаются справа
both
Плавающие элементы не допускаются ни справа, ни слева
none
Плавающие элементы допускаются с любой стороны
Параметр 'cursor'
Данный параметр определяет тип курсора, который будет выводиться при указании на элемент.
url специального курсора, который будет использоваться
Примечание: Всегда определяйте базовый курсор в конце списка, который будет использоваться, если ни один из определенных url курсоров невозможно использовать.
default
Курсор по умолчанию (часто стрелка)
auto
Курсор задает браузер
crosshair
Курсор изображается как перекрестие
pointer
Курсор изображается как указатель (рука), который обозначает ссылку
move
Курсор указывает объект, который можно переместить
e-resize
Курсор, определяющий перемещение края бокса вправо (east)
ne-resize
Курсор, определяющий перемещение края бокса вверх и вправо (north/east)
nw-resize
Курсор, определяющий перемещение края бокса вверх и влево (north/west)
n-resize
Курсор, определяющий перемещение края бокса вверх (north)
se-resize
Курсор, определяющий перемещение края бокса вниз и вправо (south/east)
sw-resize
Курсор, определяющий перемещение края бокса вниз и влево (south/west)
s-resize
Курсор, определяющий перемещение края бокса вниз (south)
w-resize
Курсор, определяющий перемещение края бокса влево (west)
text
Курсор используемый для текста
wait
Курсор, указывающий на занятость программы (часто песочные часы)
help
Курсор, указывающий, что имеется справочная информация (часто знак вопроса)
Примечания для браузеров:
Internet Explorer:
Чтобы вывести изображение руки, можно использовать нестандартное значение hand следующим образом: {cursor: hand}
Параметр 'display'
Данный параметр определяет, как в документе будет показан элемент.
Элемент будет выводиться как элемент уровня блока, с разрывом строки перед и после элемента
inline
Элемент будет выводиться как элемент строки, без разрыва строки перед или после элемента.
list-item
Элемент будет выводиться как список
run-in
Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста.
compact
Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста.
marker
table
Элемент будет выведен как таблица блока (как <table> ), с разрывом строки перед и после таблицы
inline-table
Элемент будет выведен как внутристрочная таблица (как <table> ), без разрыва строки перед или после таблицы.
table-row-group
Элемент выводится как группа из одной или нескольких строк (как <tbody> )
table-header-group
Элемент выводится как группа из одной или нескольких строк (как <thead> )
table-footer-group
Элемент выводится как группа из одной или нескольких строк (как <tfoot> )
table-row
Элемент выводится как строка таблицы (как <tr> )
table-column-group
Элемент выводится как группа из одного или нескольких столбцов (как <colgroup> )
table-column
Элемент выводится как столбец ячеек (как <col> )
table-cell
Элемент выводится как ячейка таблицы (как <td> и <th> )
table-caption
Элемент выводится как заголовок таблицы (как <caption> )
Свойство 'float'
Данное свойство определяет, где появится в другом элементе изображение или текст.
Примечания:
Если в строке слишком мало места для плавающего элемента, он переносится на следующую строку и продолжается пока строка имеет достаточно места.
Перед float должны идти - содержание, фон и границы внутристрочных элементов, содержание блочного элемента, после - фон и границы блочного элемента.
Наследование: нет.
Пример:
p{float: right}
Может принимать следующие значения:
Значение
Описание
left
Изображение или текст смещается в родительском элементе влево.
right
Изображение или текст смещается в родительском элементе вправо.
none
Изображение или текст будут выводиться в том месте, где они встретились в тексте
Параметр 'position'
Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение.
Наследование: нет.
Пример:
p{position:static;}
Может принимать следующие значения:
Значение
Описание
static
Элемент помещается в обычное положение (согласно нормальному потоку). Со значением "static" не используются параметры "left" и "top".
relative
Смещает элемент относительно его нормального положения, поэтому "left:20" добавляет 20 пикселей к позиции LEFT элемента.
absolute
С помощью значения "absolute" элемент можно поместить в любом месте страницы. Позиция элемента определяется с помощью параметров "left", "top", "right", и "bottom"
fixed
Параметр 'visibility'
Этот параметр определяет видимость или невидимость элемента.
Примечания:
Невидимые элементы занимают место на странице. Для того, чтобы создать невидимые элементы, которые не занимают место необходимо использовать параметр "display".
Этот параметр можно использовать со сценариями для создания Динамического HTML.
Наследование: нет.
Примеры:
pre{visibility: hidden}
Может принимать следующие значения:
Значение
Описание
visible
Элемент видим
hidden
Элемент невидим
collapse
При использовании в табличных элементах это значение удаляет строку или столбец, но не влияет на компоновку таблицы. Пространство, занимаемое строкой или столбцом, будет доступно для другого содержимого. Если этот параметр используется с другими элементами, он действует как "hidden"
Лекция 12. Позиционирование в CSS
Данные параметры позволяют определить положение элемента.
Примеры:
В примере показано, как позиционировать элемент относительно его обычного положения.
В примере показано, как позиционировать элемент с помощью абсолютного значения.
25. <html>26. <head>27. <style type="text/css">28. p.ab29. {30. position:absolute;31. left:75px;32. top:200px33. }34. </style>35. </head>36. 37. <body>38. <p class="ab">Параграф имеет абсолютное местоположение и 39. смещен на 75px от левого края страницы и на 200px от верха страницы</p>40. <p>Параграф</p>41. </body>42. </html>
В примере показано, как задать форму элемента, по которой он обрезается и выводится.
В примере показано, как использовать параметр overflow для определения действий, когда содержимое элемента не помещается в указанной области.
61. <html>62. <head>63. <style type="text/css">64. div 65. {66. background-color:yellow;67. width:175px;68. height:70px;69. overflow: auto70. }71. </style>72. </head>73. 74. <body>75. <p>Если содержимое элемента превышает заданные значения ширины и 76. высоты необходимо использовать параметр overflow который определяет, 77. что делать в этой ситуации.</p>78. <div>79. В данном случае переполняется бокс элемента и overflow определяет, 80. что делать - установлено значение auto. 81. </div>82. 83. </body>84. </html>
В примере показано, как выравнять в тексте изображение по вертикали.
