CSS	Блочная модель
меню

Содержание [показать]

Блочная модель

Каждый элемент располагается в блоке, состоящем из содержимого этого элемента, рамки (border), промежуточной области между содержимым и границей элемента (padding), а также полей (margin). Изучение этих свойств поможет в дальнейшем, когда вы будете задавать вид странице.

Схематическая структура блочного элемента.

margin-top, margin-right, margin-bottom, margin-left

Устанавливает ширину поля для определенной стороны элемента.(эти свойства устанавливает ширину соответственно верхнего, нижнего и левого поля).

Значение:

любая соответствующая стандарту длина - число, представляющее ширину поля. Значение по умолчанию является 0.
любое соответствующая стандарту процентное значение - отношение в процентах ширены поля к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).
inherit - применяется значение родительского элемента.

p {margin-top: 10px;}

Примеры: [1][2][3]

margin

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

Значение:

margin-top - ширина верхнего поля.
margin-right - ширина правого поля.
margin-bottom - ширина нижнего поля.
margin-left - ширина левого поля.
inherit - применяется значение родительского элемента.

p {margin: 20px 30px 5px }

padding-top, padding-right, padding-bottom, padding-left

Устанавливает ширину промежутка между содержимым элемента и определенным его участком его границы (соответственно верхнем, правым, нижним и левым).

Значение:

none - отсутствие изменения регистра (по умолчанию).
любая соответствующая стандарту длина - число, представляющее ширину промежутка. Значение по умолчанию является 0.
любое соответствующая стандарту процентное значение - отношение в процентах ширены промежутка к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).
inherit - применяется значение родительского элемента.

p {padding-top: 20px}

padding

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

Значение:

padding-top - ширина верхнего промежутка.
padding-right - ширина правого промежутка.
padding-bottom - ширина нижнего промежутка.
padding-left - ширина левого промежутка.
inherit - применяется значение родительского элемента.

h1{padding: 5px 5px 3px}

border-top-width, border-right-width, border-bottom-width, border-left-width

Устанавливает ширину рамки для определенной стороны (соответственно верхней , правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

thin - рамка в виде тонкой линии.
medium - рамка в виде линии средней толщены. (по умолчанию)
thick - рамка виде толстой линии.
inherit - применяется значение родительского элемента.

p { border-top-width: 5px }

Примеры: [1]

border-width

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

Значение:

border-top-width - толщина верхней стороны.
border-right-width - толщина правой стороны.
border-bottom-width - толщина нижней стороны.
border-left-width - толщина левой стороны.
inherit - применяется значение родительского элемента.

p{ border-width: 2px,2px,1px,1px}

Примеры: [1]

border-top-color, border-right-color, border-bottom-color, border-left-color

Устанавливает цвет рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

p { border-top-color: red}

Примеры: [1]

border-color

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

Значение:

border-top-color -цвет верхней стороны.
border-right-color - цвет правой стороны.
border-bottom-color - цвет нижней стороны.
border-left-color - цвет левой стороны.
inherit - применяется значение родительского элемента.

p{ border-color: red, blue, red, blue}

Примеры: [1]

border-top-style, border-right-style, border-bottom-style, border-left-style

Устанавливает стиль рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

none - линия отсутствует.
hidden - линия тоже отсутствует, но для таблицы это значение действует по другому
dotted - пунктирная линия.
dashed - штрихпунктирная линия.
solid - сплошная непрерывная линия.
double - двойная сплошная линия.
groove - трехмерная борозда.
ridge - трехмерный гребень.
inset - трехмерная вырезка.
outset - трехмерный орнамент.
inherit - применяется значение родительского элемента.

p{ border-top-style: double; }

Примеры: [1]

border-style

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

Значение:

border-top-style - стиль верхней стороны.
border-right-style - стиль правой стороны.
border-bottom-style - стиль нижней стороны.
border-left-style - стиль левой стороны.
inherit - применяется значение родительского элемента.

p{ border-style: double, solid}

Примеры: [1]

border-top, border-right, border-bottom, border-left

Удобное свойство для установки нескольких свойств линии рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Каждое отдельное свойство применяется к указанной для него стороне. следующие определения относятся к верхней стороне.

Значение:

border-top-width - ширина верхней рамки.
border-top-style - стиль верхней рамки.
border-top-color - цвет верхней рамки.
inherit - применяется значение родительского элемента.

p{border-top: 1px solid red;}

Примеры: [1]

border

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

Значение:

border-width - толщина границ.
border-style - стиль границ.
border-color - цвет границ.
inherit - применяется значение родительского элемента.

p{ border:1px solid red;}

Примеры: [1]

border-radius (CSS3)

Задает радиус закругления углов элемента. Данное свойство является нововидением в CSS3, и в настающее время поддерживается только двумя браузерами: Mozilla Firefox и Webkit.

Для Mozilla Firefox:

-moz-border-radius – закругляет все углы элемента.
-moz-border-radius-topleft - закругляет верхний левый угол.
-moz-border-radius-topright - закругляет верхний правый угол.
-moz-border-radius-bottomleft - закругляет нижний левый угол.
-moz-border-radius-bottomright - закругляет нижний правый угол.

div{border:1px solid black; -moz-border-radius:5px;}

Примеры: [1]

Для Webkit:

-webkit-border-radius - закругляет все углы элемента.
-webkit-border-top-left-radius - закругляет верхний левый угол.
-webkit-border-top-right-radius - закругляет верхний правый угол.
-webkit-border-bottom-left-radius - закругляет нижний левый угол.
-webkit-border-bottom-right-radius - закругляет нижний правый угол.

div{border:1px solid black; -webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;}

outline-width

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

Значение:

thin - граница в виде тонкой линии.
medium - граница в виде линии средней толщины. (по умолчанию)
thick - граница виде толстой линии.
inherit - применяется значение родительского элемента.

body{outline-width:10px 30px 5px }

outline-style

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

Значение:

none - линия отсутствует.
dotted - пунктирная линия.
dashed - штрих-пунктирная линия.
solid - сплошная непрерывная линия.
double - двойная сплошная линия.
groove - трехмерная борозда.
ridge - трехмерный гребень.
inset - трехмерная вырезка.
outset - трехмерный орнамент.
inherit - применяется значение родительского элемента.

body{ outline-style: double; }

outline-color

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

Значение:

invert - цвет границы инвертируется.
inherit - применяется значение родительского элемента.

body{ outline-color:red; }

outline

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

Значение:

outline-width - толщина общей границы.
outline-style - стиль общей границы.
outline-color - цвет общей границы.

body{outline: 1px solid red}

На верх