Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Web(л.р HTML) / Лабораторная работа 2 / Лабораторная работа 2.doc
Скачиваний:
50
Добавлен:
11.03.2015
Размер:
338 Кб
Скачать
☆

Height - устанавливает высоту блочных или заменяемых элементов.

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

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

min-height - задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height

min-width - устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.

IE, не понимает эти свойства css. Хак для блока с id “wrapper” выглядит так: А) Минимальная ширина 750px

#wrapper {

min-width: 750px;

width:expression(document.body.clientWidth < 750? "750px": "auto" );}

Б) Максимальная ширина 1220px, минимальная 750px

#wrapper {

min-width: 750px;

max-width: 1220px;

width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");}

Более удобный хак Min-height

selector {

min-height:500px;

height:auto !important;

height:500px;}

Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width

overflow - управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

overflow: auto | hidden | scroll | visible

  • visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

  • hidden - Отображается только область внутри элемента, остальное будет обрезано.

  • scroll - Всегда добавляются полосы прокрутки.

  • auto - Полосы прокрутки добавляются только при необходимости.

visibility - предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

visibility: visible | hidden | collapse

Width - устанавливает ширину блочных или заменяемых элементов

position - устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

position: absolute | fixed | relative | static

  • absolute - Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

  • fixed - По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.

  • relative - Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.

  • static - Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

top, right, bottom, left - устанавливает положение верхнего, правого, нижнего, левого края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчет ведется от края исходного положения элемента, а при абсолютном — относительно края окна документа.

z-index - любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибут z-index.

z-index: число | auto

margin - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента/

Отступ от каждой границы можно устанавливать отдельно. Таким отступам соответствуют свойства margin-bottom, margin-left, margin-right, margin-top

padding - устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое

Каждое поле можно устанавливать отдельно. Таким полям соответствуют свойства padding-bottom, padding -left, padding -right, padding -top

border-collapse - устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

border-collapse: collapse | separate

border-spacing - задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.

caption-side - определяет положение заголовка таблицы, который задается с помощью тега <caption>, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.

caption-side: top | bottom

table-layout - определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.

table-layout: auto | fixed

Соседние файлы в папке Лабораторная работа 2