русс | укр
Программування
Мови програмування Відео уроки php mysql Паскаль Сі Асемблер Java Matlab Php Html JavaScript CSS C# Delphi Турбо Пролог 1С
Компьютерные сети Системное программное обеспечение Информационные технологии Программирование
Навчання
Linux
Unix
Алгоритмічні мови
Архітектура мікроконтролерів
Введення в розробку розподілених інформаційних систем
Дискретна математика
Інформаційне обслуговування користувачів
Інформація та моделювання в управлінні виробництвом
Комп'ютерна графіка
Лекції
Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...
Керування відображенням CSS
У цьому розділі розглядаються спеціальні засоби керування відображенням елементів. За допомогою властивості display задається приналежність елемента певної категорії.
Позиції задаються властивостями зміщення top від верхнього краю вниз, left - від лівого краю праворуч, right - від правого краю вліво та bottom - від нижнього вгору. Елементу, для якої не зазначений режим абсолютного позиціонування, можна вказати плаваюче позиціонування властивістю float.
Таблиця 2.6. Властивості управління відображенням
Властивості
Опис
Типове
Застосування
display
Вигляд елементі
inline
До всіх елементів
position
Спосіб розміщення
static
До всіх елементів крім згенерованих
top
Верхня координата
auto
ДО та позиціонується елементів
bottom
Нижня координата
auto
ДО та позиціонується елементів
left
Ліва координата
auto
ДО та позиціонується елементів
right
Права координата
none
ДО та позиціонується елементів
float
Вигляд зміщення
auto
До всіх елементів крім згенерованих і розташованих
clear
Вирівнювання після плаваючого елементі
none
ДО блочних елементів
Вигляд елементі
display:block|inline|list-item|marker|none|run-in|compact
display:table|inline-table|table-row-group|table-column|table-column-group|table-header-group|table-footer-group|table-row|table-cell|table-caption
block - блочний елемент
inline - внутристрочный елемент
list-item - елемент списку
marker - генерується елемент перед або після блоку
none - блок не генерується,
run-in - блок вдвигаемого тексту
compact - блок займає поле
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption - табличні елементи.
Спосіб розміщення
position :static|relative|absolute|fixed
static - статичне, звичайне розміщення в порядку описания зліва направо зверху вниз, при необхідності вставляються розриви рядків та сторінок
relative - відносне, теж звичайне, але можна додатково змістити елемент від своєї позиції властивостями top , left , bottom і right .
absolute - абсолютна, позиція (розмір) задаються властивостями top , left , bottom і right щодо батьківського блоку
fixed - фіксоване, як і абсолютна, але елемент фіксується до позиції перегляду (не переміщається при скролінгу).
Вигляд зміщення
float :left|right|none
Спосіб розміщення плаваючого елемента в объемлющем блоці (наприклад, ілюстрація на заповненій текстом сторінці) визначається наступними значеннями:
left - плаваючий елемент зміщується вліво,
right - плаваючий елемент зміщується вправо
none - елемент не плаваючий.
Вирівнювання наступного елемента
clear :left|right|both|none
Спосіб вирівнювання наступного за плаваючим елемента задається значеннями:
left - верхнє поле елемента збільшується так, щоб на його вирівнювання зліва плаваючий елемент не впливав,
right - верхнє поле елемента збільшується так, щоб на його вирівнювання справа плаваючий елемент не впливав,
both - верхнє поле елемента збільшується так, щоб на його вирівнювання зліва і праворуч плаваючий елемент не впливав,
none - ніякі зміни у параметри елемента не вносяться.
Дата додавання: 2010-12-27
Переглядів: 4708
Повернутися в зміст
Онлайн сервіси
Онлайн система числення
Калькулятор онлайн звичайний
Науковий калькулятор онлайн