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

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

 

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

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

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

 

 

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


Различия в блоковых моделях

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


Общая ширина блока=(margin-left)+(border-left)+(padding-left)+(width)+(padding-right)+(border-right)+(margin-right)

Рассмотрим пример блока:


#block {
border:10px solid #660;
padding:50px;
margin:15px;
width:400px
}

Согласно спецификации CSS, ширина контекстной области данного блока должна быть равна 400 пикселей. Поля, границы и отступы вычисляются дополнительно к ширине контекстной части. Таким образом, общая ширина области, занимаемой этим блоком, должна равняться 400 + 2x50 + 2x10 = 520 пикселей. Именно так этот блок отобразят браузеры, корректно реализующие блоковую модель, — к таким можно отнести Opera 5+, Netscape 6.x, Mozilla 0.9.x.
Корректная блоковая модель CSS
Блоковая модель Internet Explorer 5


В браузере Internet Explorer5 блоковая модель реализована с ошибкой. В нем общая ширина блока считается заданной свойством width, поэтому значения ширины полей, отступов и границы входят в нее, что, по сути, неверно. Из-за этого уменьшается ширина контентной части блока. На рисунке приведены оба варианта работы блоковой модели. Там отчетливо видно, что в Internet Explorer 5 ширина контентной части уменьшается следующим образом: 400 - 2x10 - 2x50 = 280 пикселей. Как видите, несоответствие довольно значительное.

Только в том случае когда у блока нет ни отступов, ни полей, ни границ, он во всех браузерах будет выглядеть одинаково. Но, к сожалению, не всегда можно обойтись такими простыми блоками, поэтому нужно учитывать различия в блоковых моделях и устранять их последствия, - ведь браузером Internet Explorer 5 на настоящий момент пользуется довольно значительный процент пользователей Интернет.

Следует также отметить, что в браузере Internet Explorer 6.0 (в режиме совместимости со стандартами) блоковая модель исправлена и работает корректно. Установить браузер Internet Explorer 6.0 в режим совместимости со стандартами можно, указав полный формат директивы DOCTYPE.

 

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

 

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

 

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

 

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