4.Внешние и внутренние отступы в css.

Отступы

Оступы создают пространство вокруг содержания (внутри границы) элемента. На отступы влияет цвет фона элемента.

Верхний (top), правый (right), нижний (bottom) и левый (left) отступы могут быть заданы независимо, используя отдельные свойства. Стенографическое свойство также может использоваться, чтобы задать все отступы одновременно.

Возможные Значения

Длина: определяет фиксированный отступ (в пикселях, пунктах, единицах em, и т.д.)

%: определяет отступ в % от элемента-контейнера

В CSS можно указать различные отступы для разных сторон:

Примерpadding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

Чтобы укоротить код, можно указать все свойства отступов в одном свойстве. Оно называется стенографическим (сокращенным) свойством - "padding":

padding:25px 50px;

Свойство padding может иметь от одного до четырех значений.

padding:25px 50px 75px;

верхний отступ 25px

правый и левый отступы по 50px

нижний отступ 75px

Поля

Поле очищает пространство вокруг элемента (за пределами границы). Поля не имеет цвета фона и является полностью прозрачным.

Верхнее (top), правое (right), нижнее (bottom) и левое (left) поля могут изменяться независимо, используя различные свойства. Стенографическое свойство полей (margin) также может быть полезно, чтобы изменить все поля одновременно.

Возможные Значения

Auto: браузер устанавливает поля. Результат этого значения зависит от браузера

Длина: определяет фиксированное поле (в пикселях, пунктах, единицах em, и т.д.)

%: определяет поле в % от содержащего элемента

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

В CSS можно указывать различные поля для разных сторон:

Примерmargin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

Чтобы сократить код, можно указать все свойства полей в одном свойстве.оно называется стенографическим свойством - "margin":

margin:100px 50px;

Свойство margin может иметь от одного до четырех значений.

margin:25px 50px;

верхнее и нижнее поля равны по 25px

правое и левое поля равны по 50px

5.Позиционирование с помощью css.

CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади другого, и указать, что должно произойти, когда содержимое элемента слишком большое.

Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position.

Существует четыре различных метода позиционирования.

Статическое позиционирование

HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.

Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.

Фиксированное Позиционирование

Элемент с фиксированным положением позиционирован относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается:

Пример:

p.pos_fixed

{

position:fixed;

top:60px;

right:5px;

}

Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа !DOCTYPE.

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

Зафиксированные элементы могут перекрывать другие элементы.

Относительное позиционирование

Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.

Пример:

h2.pos_left

{

position:relative;

left:-20px;

}

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

Пример:

h2.pos_top

{

position:relative;

top:-50px;

}

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

Абсолютное Позиционирование

Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается <html>:

Пример:

h2

{

position:absolute;

left:100px;

top:150px;

}

Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.

Абсолютно расположенные элементы могут перекрывать другие элементы.

Перекрытие Элементов

Когда элементы расположены вне стандартного потока, они могут перекрывать другие элементы.

Свойство z-index указывает вертикальный порядок элемента (какой элемент должен быть помещен спереди, или сзади других элементов).

Элемент может иметь положительный или отрицательный вертикальный порядок:

Пример:

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

Элемент с большим вертикальным порядком всегда находится впереди элементы с меньшим вертикальным порядком.

Замечание: Если два позиционированных элементы перекрываются и не указан вертикальный порядок, элемент расположенный позже в HTML коде будет показан сверху.