Отправляет email-рассылки с помощью сервиса Sendsay

Журнал Начинающего ВебМастера

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Работа и отдых в Интернете" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2011   →
 1
 2
 3
 4
 5
 6
06.01.2011
11:11:37
11:34:30
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Lord Expert

Статистика

263 подписчиков
-1 за неделю
←   Все выпуски   →

Журнал Начинающего ВебМастера 44, 2011-01-23 22:48



Здравствуйте,



CSS : Расположение элементов

margin

Задает ширины полей между элементами страницы и его соседями.

Заменяет атрибуты margin-top, margin-right, margin-bottom и margin-left. 

margin: {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}];

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

margin-top

Задает верхнее поле между элементом страницы и его соседями сверху. 

margin-top: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-bottom, значение верхнего поля устанавливается равным значению нижнего поля. Значение по умолчанию auto.

margin-right

Задает правое поле между элементом страницы и его соседями справа. 

margin-right: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-left, значение правого поля устанавливается равным значению левого поля. Значение по умолчанию auto.

margin-bottom

Задает нижнее поле между элементом страницы и его соседями снизу. 

margin-bottom: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-top, значение нижнего поля устанавливается равным значению верхнего поля. Значение по умолчанию auto.

margin-left

Задает левое поле между элементом страницы и его соседями слева. 

margin-left: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.

padding-top

Задает расстояние между элементом страницы и верхней границей. 

pading-top: {Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя.

Значение по умолчанию 0, для тега <TD> 1.

padding-right

Задает расстояние между элементом страницы и правой границей. 

pading-right: {X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя.

Значение по умолчанию 0, для тега <TD> 1.

padding-bottom

Задает отступ между элементом страницы и нижней границей. 

pading-bottom: {Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя.

Значение по умолчанию 0, для тега <TD> 1.

padding-left

Задает расстояние между элементом страницы и левой границей. 

pading-left: {X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя.

Значение по умолчанию 0, для тега <TD> 1.

width

Задает ширину свободно позиционирования элемента. 

width: auto|{X}|{X}%;

Ширина может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать ширину элемента самостоятельно.

Значение по умолчанию auto.

height

Задает высоту свободно позиционированного элемента. 

height: auto|{X}|{X}%;

Высота может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.

Значение по умолчанию auto.

top

Задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя. 

top:
auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.

Значение по умолчанию auto.

bottom

Задает вертикальную позицию нижней границы свободно позиционированного элемента относительно родителя. 

bottom: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.

Значение по умолчанию auto.

left

Задает горизонтальную позицию левой границы свободно позиционированного элемента относительно родителя. 

left: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.

Значение по умолчанию auto.

right

Задает горизонтальную позицию правой границы свободно позиционированного элемента относительно родителя. 

right: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.

Значение по умолчанию auto.

float

Определяет обтекание элемента другими слева или справа вместо помещения под ним. 

float: none|left|right;
  • float: none; - заставляет элемент страницы появляться там, где он задан (используется по умолчанию);
  • float: left; - принудительно выравнивает элемент страницы по левому краю;
  • float: right; - по правому краю.

vertical-align

Задает вертикальное выравнивание элемента страницы внутри родителя. 

vertical-align: auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom;
  • vertical-align: auto; - выравнивает элемент страницы согласно значению атрибута layout-flow;
  • vertical-align: baseline; - задает выравнивание базовой линии элемента страницы по базовой линии родителя (используется по умолчанию);
  • vertical-align: sub; - превращает текст в нижний индекс;
  • vertical-align: super; - превращает текст в верхний индекс;
  • vertical-align: top; - выравнивает верх элемента страницы по самому верху родителя;
  • vertical-align: text-top; - выравнивает верх текста элемента страницы по верху текста родителя;
  • vertical-align: middle; - выравнивает центр элемента страницы по центру родителя;
  • vertical-align: bottom; - выравнивает низ элемента страницы по низу родителя;
  • vertical-align: text-bottom; - выравнивает низ текста элемента страницы по низу текста родителя.

overflow

Задает поведение элемента страницы, если содержимое в нем не помещается. 

overflow: visible|scroll|hidden|auto;
  • overflow: visible; - заставляет элемент страницы расшириться так, чтобы все его содержимое было видно (значение по умолчанию);
  • overflow: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
  • overflow: hidden; - скрывает все то, что выходит за пределы элемента страницы;
  • overflow: auto; - аналогично scroll за тем исключением, что полосы прокрутки отобаржаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).

overflow-x

Задает поведение элемента страницы, если его ширина меньше ширины содержимого.

overflow-x: visible|scroll|hidden|auto;

overflow-y

Задает поведение элемента страницы, если его высота меньше высоты его содержимого.

overflow-y: visible|scroll|hidden|auto;

zoom

Задает масштаб отображения элемента страницы. 

zoom: normal|{Масштаб}|{Масштаб}%;

Масштаб может быть задан как числом с плавающей точкой, обозначающим степень увеличения или уменьшения, так и процентной величиной. Предопределенное значение normal задает масштаб 1.0 или 100%.

Значение по умолчанию normal.

table-layout

Позволяет "зафиксировать" значения ширины ячеек таблицы. 

table-layout: auto|fixed;
  • table-layout: auto; - устанавливает ширину ячейки по ширине ее содержимого (значение по умолчанию);
  • table-layout: fixed; - использует для установки ширин ячеек значения атрибутов WIDTH или, если они не заданы, просто дает ячейкам равную ширину.

Другими словами, задание значения auto позволит точно "подогнать" значения ширин ячеек, но таблица при этом будет выводиться очень долго. Значение fixed этого атрибута позволит Web-обозревателю вывести таблицу значительно быстрее, но Web-дизайнер должен будет сам задать значения ширин ячеек. Это может сильно ускорить вывод больших таблиц на экран.

Применяется только для тега <TABLE>.





 © 2010 LORD-EXPERT     • Web Master   • Site     •


заработок на архивах

Ваши комментарии к рассылке. Архив рассылки

Общение/вопросы/и т.д.

В избранное