Overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Синтаксис:
overflow: auto | hidden | scroll | visible | inherit
Значения:
visible – Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden – Отображается только область внутри элемента, остальное будет скрыто.
scroll – Всегда добавляются полосы прокрутки.
auto – Полосы прокрутки добавляются только при необходимости.
inherit – Наследует значение родителя.
Width
Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Браузеры неодинаково работают с шириной, результат отображения зависит от используемого <!DOCTYPE>. В табл. 1 приведены возможные варианты <!DOCTYPE> и получаемая ширина.
|
<!DOCTYPE> |
Internet Explorer |
Opera 10+, Firefox, Chrome, Safari |
Opera 9 |
|
Не указан (режим совместимости) |
Если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width. |
Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх блока. |
Ширина равна значению width. Содержимое блока, если не помещается в заданные размеры, отображается поверх. |
|
Переходный HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |||
|
Строгий HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
Ширина формируется путем сложения значений width, padding, margin и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх. |
Ширина равна значению width плюс padding, margin, и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх. | |
|
HTML 5 <!DOCTYPE html> | |||
|
XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> |
Синтаксис:
width: значение | проценты | auto | inherit
Значения:
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.
auto – Устанавливает ширину исходя из типа и содержимого элемента.
Inherit – Наследует значение родителя.
Height
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.
Синтаксис:
height: значение | проценты | auto | inherit
Значения:
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента