Приложение B. Cведения о CSS

Размер и позиционирование

float

Устанавливает выравнивание и тип обтекания объекта (вроде атрибута align в тэге <IMG>, но не только для рисунков). Установите как left или right, чтобы выровнять объект с левыми или правыми полями и установить обтекание текста, или установите none (по умолчанию), чтобы предотвратить обтекание.

img {float:left;margin-right:10px;}

<div style="float:right;width:120;">
  <img src="mel.jpg"width=120          
    height=200><br>
  Caption under the picture</div>

clear

Если параграф или объект обтекает другие объекты на странице, установите параметр clear, чтобы он начинался со следующего открытого правого или левого поля (после других элементов). Установите как left, right, both или none.

width и height

Устанавливает размеры объектов, таких как рисунок или абзац. Абзац всегда использует указанный параметр width. С параметром height, когда рамка меньше абзаца, текст сжимается до указанной высоты (если вы не установили параметр overflow ).

overflow, overflow-x и overflow-y

Определяет, способен ли абзац вместить текст и нужны ли полосы прокрутки, чтобы отобразить переполнение. Параметр по умолчанию – visible, позволяющий абзацу превысить установленную высоту.

Чтобы вырезать лишний текст, установите hidden ; установите auto, чтобы отображать полосу прокрутки, если необходимо; установите scroll, чтобы всегда отображать две полосы прокрутки. Используйте параметры overflow-x и overflow-y, чтобы обеспечить разные настройки для горизонтального и вертикального переполнения и прокрутки.

.boxnote {width:160px;height:100px; 
  overflow:auto;float:right;fixed-size 
  border:2px solid navy;padding:4px;     
}

#mustfit {width:100px;height:12px;    
  overflow:hidden;}

position, top, и left

Параметр position заставляет элемент, такой как рисунок или блок <DIV>, переместиться с места, изначально занимаемого на странице. Установите position как absolute, чтобы установить элемент на определенном расстоянии от левого и верхнего краев страницы, закрывая пространство, которое он занял бы в другом случае.

Укажите position как relative, чтобы разрешить позиционирование объекта, оставляя открытым пространство, которое он занял бы в другом случае.

Параметры для top и left могут быть положительными (для движения вниз и вправо) или отрицательными (для движения вверх и налево).

Абсолютное позиционирование обычно связано с верхним левым углом страницы, но вы также можете установить его относительно других элементов. Например, если вы устанавливате position как relative к блоку <DIV>, абсолютное размещение в этом блоке будет связано с его левым верхним углом.

Абсолютное позиционирование удобно в DHTML-программировании, где вы определяете объекты на вашей странице, а затем устанавливаете расположение, содержимое и видимость, используя JavaScript.

<div style=                                     
  "position:absolute;top:0;left:200"> 
    <img src=spaceship.gif>                  
</div>

The word <span style=                    
  "position:relative;top:-8;">higher
  </span>is higher than the others

z-index

Определяет, какие позиционированные объекты накладываются друг на друга.

Большее значение элемента z-index отправляет элемент на передний план, а меньшая величина располагает его позади других элементов. Отрицательное значение отодвигает элемент за непозиционированные элементы страницы.

<div style=                                     
  "position:absolute;top:200;
  left:200;z-index:2">
    <img src="front.gif"></div>
<div style=
  "position:absolute;top:250;
  left:250;z-index:1">
    <img src="back.gif"></div>

<div style=                                   
  "position:absolute;top:250;          
  left:250;z-index:-1">
    <img src="chau.gif"></div>.

display

Установите как none, чтобы элемент исчез со страницы, закрыв занимаемое им в другом случае пространство. Установите как block, чтобы отображать элемент как блок (по умолчанию) или inline, чтобы отображать его как часть конкретной строки (как в тэге <SPAN>).

visibility

Установите как hidden, чтобы элемент исчез со страницы, но все еще занимал место. Установите visible (по умолчанию), чтобы отобразить объект.