Свойства BOX
Часть Il1. Cвойства BOX
Свойства Box
margin-top
Возможные значения:
[1] длина
(+)
[2] процент
(+)
[3] auto - автоматически
*Применимо для: всех
элементов
Описание: определяет отступ
сверху
ПРИМЕР:
margin-top:100
margin-right
Возможные значения:
[1] длина
(+)
[2] процент
(+)
[3] auto - автоматически
*Применимо для: всех
элементов
Описание: определяет отступ
справа
ПРИМЕР:
margin-right:100%
margin-bottom
Возможные значения:
[1] длина
(+)
[2] процент
(+)
[3] auto - автоматически
*Применимо для: всех
элементов
Описание: определяет отступ
снизу
ПРИМЕР:
margin-bottom:100em
margin-left
Возможные значения:
[1] длина
(+)
[2] процент
(+)
[3] auto - автоматически
*Применимо для: всех
элементов
Описание: определяет отступ
слева
ПРИМЕР:
margin-left:100pt
margin
Возможные значения:
[1] margin-top
[2] margin-right
[3] margin-left
[4] margin-bottom
*Применимо для: всех
элементов
Описание: обобщает все
вышеперечисленные свойства
ПРИМЕР:
background:100pt
padding-top
Возможные значения:
[1] длина
(+)
[2] процент
(+)
*Применимо для: осех элементов
Описание: отступ от верхнего border'а
ПРИМЕР:
padding-top:100pt
padding-right
Возможные значения:
[1] длина
(+)
[2] процент
(+)
*Применимо для: всех
элементов
Описание: отступ от правого border'а
ПРИМЕР:
padding-right:100%
padding-bottom
Возможные значения:
[1] длина
(+)
[2] процент
(+)
*Применимо для: всех
элементов
Описание: отступ от нижнего border'а
ПРИМЕР:
padding-bottom:100em
padding-left
Возможные значения:
[1] длина
(+)
[2] процент
(+)
*Применимо для: всех
элементов
Описание: отступ от левого border'а
ПРИМЕР:
padding-top:100
padding
Возможные значения:
[1] padding-top
[2] padding-right
[3] padding-left
[4] paddung-bottom
*Применимо для: всех
элементов
Описание: обобщает
вышеперечисленные свойства. Можно задать несколько значений одновременно (до
четырех) для разных сторон. Если установлено одно значение - задается единый
отступ для всех сторон, если два - то задаются различные отступы для прилежащих
сторон, а если четыре - то задаются индивидуальные отступы для всех сторон.
ПРИМЕР:
padding:100px
border-top-width
Возможные значения:
[1] длина
(+)
[2] thin, medium или thick
*Применимо для: всех
элементов
Описание: толщина верхнего border'а
ПРИМЕР:
border-top-width:100pt
border-right-width
Возможные значения:
[1] длина
(+)
[2] thin, medium или thick
*Применимо для: всех
элементов
Описание: толщина правого border'а
ПРИМЕР:
border-right-width:thick
border-bottom-width
Возможные значения:
[1] длина
(+)
[2] thin, medium или thick
*Применимо для: всех
элементов
Описание: толщина нижнего border'а
ПРИМЕР:
border-bottom-width:100em
border-left-width
Возможные значения:
[1] длина
(+)
[2] thin, medium или thick
*Применимо для: всех
элементов
Описание: толщина левого border'а
ПРИМЕР:
border-left-width:medium
border-width
Возможные значения:
[1] border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width
*Применимо для: всех
элементов
Описание: толщина border'ов. Можно задать несколько
значений одновременно (до четырех) для разных border'ов. Если установлено одно
значение - задается единая толщина для всех сторон, если два - то задаются
различная толщина для прилежащих сторон, а если четыре - то задаются
индивидуальная толщина для всех сторон
ПРИМЕР:
border-width: 15pt
border-color
Возможные значения:
[1] цвет
(+)
*Применимо для: всех
элементов
Описание: Цвет border'а. Не работает в Нетскейпе
ПРИМЕР:
border-color:green
border-style
Возможные значения:
[1] none
[2] dotted, dashed, solid, double, groove, ridge, inset, outset
*Применимо для: всех
элементов
Описание: стиль border'ов. Можно задать несколько
значений одновременно (до четырех) для разных border'ов. Если установлено одно
значение - задается единый стиль для всех сторон, если два - то задаются
различные стили для прилежащих сторон, а если четыре - то задаются
индивидуальные стили для всех сторон
ПРИМЕР:
border-style: dotted groove
<UL
• border-top
Возможные значения:
[1] border-top-width
[2] border-style
[3] border-color
*Применимо для: всех
элементов
Описание: обобщает
вышеперечисленные свойства для верхнего border'а
ПРИМЕР:
border-top: 100em red groove
border-right
Возможные значения:
[1] border-right-width
[2] border-style
[3] border-color
*Применимо для: всех
элементов
Описание: обобщает
вышеперечисленные свойства для правого border'а
ПРИМЕР:
border-right: 5pt magenta solid
border-left
Возможные значения:
[1] border-left-width
[2] border-style
[3] border-color
*Применимо для: всех
элементов
Описание: обобщает вышеперечисленные
свойства для левого border'а
ПРИМЕР:
border-left: 15pc coral inset
border-bottom
Возможные значения:
[1] border-bottom-width
[2] border-style
[3] border-color
*Применимо для: всех
элементов
Описание: обобщает
вышеперечисленные свойства для нижнего border'а
ПРИМЕР:
border-bottom: 30 orange outset
border
Возможные значения:
[1] border-width
[2] border-style
[3] border-color
*Применимо для: всех
элементов
Описание: обобщает
вышеперечисленные свойства
ПРИМЕР:
border: thik black double
width
Возможные значения:
[1] длина
(+)
[2] процент
(+)
*Применимо для: block-level и replaced элементов
Описание: ширина элемента
ПРИМЕР:
width:10%
height
Возможные значения:
[1] длина
(+)
[2] процент
(+)
*Применимо для: block-level и replaced элементов
Описание: высота элемента
ПРИМЕР:
height:100pt
float
Возможные значения:
[1] left - слева
[2] right - справа
[3] none - по умолчанию
*Применимо для: всех
элементов
Описание: расположение
элемента
ПРИМЕР:
float:right
clear
Возможные значения:
[1] left - слева
[2] right - справа
[3] both - c двух сторон
[4] none - по умолчанию
*Применимо для: всех
элементов
Описание: расположение других
элементов вокруг данного
ПРИМЕР:
clear:both
Законьчена 3 Часть и я Перехожу к 4й.
Перейти к 4й части
