CSS Block model; Positioning Блочная модель; Позиционирование. CSS-Блочная/строчная

CSS Block model; Positioning Блочная модель; Позиционирование

CSS-Блочная/строчная модель Строчные элементы …

текст обычный, красный, обычный

CSS-выравнивание Обтекание элемента float none - элемент не обтекается (по умолчанию). left – элемент cлева, обтекание справа. right - элемент справа, обтекание слева. сlear (запрещение обтекания) none - обтекание доступно со всех сторон (по умолчанию). left - элементов не должно быть слева right - элементов не должно быть справа both - элементов не должно быть справа и слева

CSS-Блочная модель (каждый элемент генерирует один или несколько прямоугольных* блоков) Отступ (Padding) Отступ (Padding)

Рамка border-top-width, border-right-width, border-bottom-width, border-left-width p { border-top-width: 5px } Краткая запись p{ border-width: 2px 2px 1px 1px} CSS-Блочная модель — рамка

CSS-Блочная модель — рамка Цвет рамки border-top-color, border-right-color, border-bottom-color, border-left-color p { border-top-color: red} Краткая запись p{ border-color: red blue red blue}

Стиль рамки (если требуется рамка, то стиль задавать обязательно) border-top-style, border-right- style, border-bottom- style, border-left- style p{ border-top-style: double; } Краткая запись border-style p{ border-style: double, solid} CSS-Блочная модель — рамка

Краткие записи: border-top, border-right, border-bottom, border-left p{border-top: 1px solid red;} border p{border:1px solid red;} CSS-Блочная модель — рамка

Свойства рамки, аналогично border, но нельзя конкретизировать по сторонам. outline-width body{outline-width:10px 30px 5px} outline-style body{ outline-style: double;} outline-color body{ outline-color: red;} outline body{outline: 1px solid red} CSS-Блочная модель — рамка

Поля margin-top, margin-right, margin-bottom, margin-left (ширина поля) p {margin-top: 10px;} Краткая запись p {margin: 20px 30px 5px;} h1 {margin: 20px;} h2 {margin: 20px 30px 30px 5px;} h3 {margin: 20px 30px;} CSS-Блочная модель — поля

Отступы padding-top, padding-right, padding-bottom, padding-left p {padding-top: 20px;} Краткая запись padding h1{padding: 5px 5px 3px;} * CSS-Блочная модель — внутренние отступы

CSS-Позиционирование Метод позиционирования position static - обычный элемент (по умолчанию). relative - задает смещение элемента от его обычного положения в документе. absolute - задает смещение элемента от положения родительского элемента (если родительский элемент так же имеет абсолютное позиционирование). fixed - задает смещение элемента от положения родительского элемента, (как в absolute), но положение элемента фиксируется и при прокрутке окна не перемещается.* (не работает в IE до 8-й версии) p {position: absolute}

CSS-Позиционирование top, left right, bottom z-index (позволяет определить порядок блоков при наложении) img {position: absolute; top: 20px; left: 40px; z-index: 3}

CSS-визуальное форматирование Ширина (width) p {width: 260px} Высота (height) p {height : 10%}

мин. и макс. ширина min-width, max-width p {min-width: 100px; max-width: 200px;}

CSS-визуальное форматирование display (*) inline - строчный элемент. block - блочный элемент, …… none - отсутствие элемента.

CSS-визуальное форматирование Переполнение (overflow) visible – полное отображение содержимого (по умолчанию). hidden – отсекается часть. scroll - полосы прокрутки. Видимость (visibility) visible - элемент видимый. collapse – (если не для табл. то = hidden) hidden - элемент не видимый, но для него выделяется место. Вырезаемая область (clip) img {clip: rect(5px 4рх 2рх 4рх)}