... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Использование блоков. Блоковая модель. (стр.2)

 

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы


Приведем пример:

<BODY><Р>Убедимся, что ширина данного блока будет совпадать с шириной окна браузера.</Р></BODY>

В браузере этот код будет отображаться во всю ширину монитора. Можно принудительно ограничить ширину блока, например, записав CSS-правило следующего вида:

P{width:50%;}

Теперь этот блок будет занимать по ширине только половину окна браузера, поскольку ширина блока здесь явно указана равной 50%, а проценты в данном случае вычисляются относительно ширины контейнера.

Убедимся, что ширина данного блока будет 50% с шириной окна браузера.


Положение вложенного блока всегда определяется относительно области контента контейнера, не затрагивая отступы, границы и поля блока. Рассмотрим пример блока, который будет служить контейнером для некоторого другого, и зададим для него следующие параметры:

#main_block {
color:red;
background:#FFFFCC;
border:1px solid #660033;
margin:2em;
padding:1em;
width: 200px
}

<DIV ID="main_block">Содержимое главного блока #main_block</DIV>

Текст внутри этого блока красный, отступы внутри блока равны 1em, сам блок имеет светло-желтый фон и обрамлен темно-коричневой сплошной границей толщиной в 1 пиксель. Ширина блока 200 пикселей, поля для блока (т.е. отступы от краев контейнера - а в нашем случае контейнером служит окно браузера) равны 2em. В браузере этот код мы увидим так, как показано на рисунке:

Содержание главного блока #main_block

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 - | - 7 - | - 8 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены