Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Справочник CSS » Глава 4. Расположение объектов
Не нравится(-) 29 Нравится(+)
27-06-2008, 01:18 - GZ Design (Справочник CSS)
Глава 4. Расположение объектов

Четвёртая часть нашего справочника CSS будет посвящена одному из самых важных вопросов в вёрстке: расположению объектов.


width – задание ширины объекта. Может быть задан, как абсолютной величиной, так и в процентах. Значение атрибута по умолчанию – auto (автоматическое определение ширины). Часто используется для определения ширины фиксированных областей.

Примеры:
Зададим ширину объекта (поля, области) в 100 пикселей:
width: 100px;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.

-------------------------------------------------------------------------



height - задание высоты объекта. Может быть задан, как абсолютной величиной, так и в процентах. Значение атрибута по умолчанию – auto (автоматическое определение ширины). Часто используется для определения высоты фиксированных областей.

Примеры:
Зададим высоту объекта (поля, области) в 100 пикселей:
height: 100px;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.

-------------------------------------------------------------------------



margin – задание интервала между объектами (элементами). Используются следующие атрибуты:

margin-top – задание ширины верхнего отступа от объекта.
margin-bottom – задание ширины нижнего отступа от объекта.
margin-left – задание ширины левого отступа от объекта.
margin-right – задание ширины правого отступа от объекта.

Все аргументы можно задавать абсолютной величиной, или в процентах. По умолчанию, значение margin установлено на автоматический выбор браузером (auto).

Атрибут margin можно выставлять «напрямую» (без использования top, bottom, left, right). Для этого выставляется одно, два, три, или четыре значения:
- Если выставлено одно значение, то отступ будет сделан со всех сторон;
- Если выставлено два значения, то первое задаёт верхний и нижний отступ, а второе – левый и правый;
- Если выставлено три значения, то первое задаёт верхний отступ, второе – левый и правый, третье – нижний отступ.

Примеры:
Зададим верхний отступ в 10 пикселей:
margin-top: 10px;

Теперь зададим отступ без использования дополнительных атрибутов (Верхний – 10 пикселей, нижний – 20 пикселей, Правый и левый – 5 пикселей):
margin: 10px 5px 20px;

Совместимость:
Частично поддерживается Internet Explorer начиная с версии 3.02.
Полностью поддерживается Internet Explorer начиная с версии 4.0.

-------------------------------------------------------------------------



padding – задание отступа объекта от любых границ. Используются такие же атрибуты, как и для margin:

padding-top – задание отступа от верхней границы.
padding-bottom – задание отступа от нижней границы.
padding-left – задание отступа от левой границы.
padding-right – задание отступа от правой границы.

Все аргументы можно задавать абсолютной величиной, или в процентах. По умолчанию, значение margin установлено на автоматический выбор браузером (auto).

Атрибут padding можно выставлять «напрямую» (без использования top, bottom, left, right). Для этого выставляется одно, два, три, или четыре значения:
- Если выставлено одно значение, то отступ будет сделан со всех сторон;
- Если выставлено два значения, то первое задаёт верхний и нижний отступ, а второе – левый и правый;
- Если выставлено три значения, то первое задаёт верхний отступ, второе – левый и правый, третье – нижний отступ.

Примеры:
Зададим отступ от верхней границы в 10 пикселей:
padding-top: 10px;

Теперь зададим отступ без использования дополнительных атрибутов (Верхний – 10 пикселей, нижний – 20 пикселей, Правый и левый – 5 пикселей):
padding: 10px 5px 20px;

Совместимость:
Частично поддерживается Internet Explorer начиная с версии 3.02.
Полностью поддерживается Internet Explorer начиная с версии 4.0.

-------------------------------------------------------------------------



top – Задание позиции верхней границы объекта. Может быть задана как абсолютной величиной, так и в процентах. Приемлемы как положительные, так и отрицательные значения атрибута.

Примеры:
Зададим отступ от верха в 10 пикселей:
top: 10px;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.

-------------------------------------------------------------------------



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

Примеры:
Зададим отступ от низа в 10 пикселей:
bottom: 10px;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.

-------------------------------------------------------------------------



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

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

-------------------------------------------------------------------------



float - задание левого и правого обтекания объекта другими объектами. Задаётся только определёнными значениями:

none – отсутствие обтекания (по умолчанию);
left – обтекание по левому краю (принудительно выравнивает объект по левому краю);
right – обтекание по правому краю (принудительно выравнивает объект по правому краю).

Примеры:
Зададим обтекание по левому краю:
float: left;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.

-------------------------------------------------------------------------



overflow – задание вида объекта, в случае, если содержание не помещается в него. Задаётся только определёнными значениями:

visible – расширение объекта по содержанию (по умолчанию);
auto – создание внутри объекта полос прокрутки (если они нужны);
scroll – создание внутри объекта полос прокрутки (видны постоянно);
hidden – скрывает содержание, выходящее за пределы объекта;

Также существует возможность управлять содержанием только по вертикали, или горизонтали:

overflow-x – задание вида объекта, если содержание шире него ;
overflow-y – задание вида объекта, если содержание выше него ;

Эти атрибуты имеют такие же фиксированные значения, как и атрибут overflow.

Примеры:
Зададим появление полос прокрутки, в случае их необходимости:
overflow: auto;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.


-----------------------------------
Правила копирования материалов статьи
Вернуться к содержанию


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 15370 раз(а) и написали 7 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!