русс | укр

Мови програмуванняВідео уроки php mysqlПаскальСіАсемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование


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 - ніякі зміни у параметри елемента не вносяться.

Переглядів: 4708

Повернутися взміст


Онлайн система числення Калькулятор онлайн звичайний Науковий калькулятор онлайн