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

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

 

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

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

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

 

 

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


Еще раз приведем формат директив DTD с указанием URL в полной форме для HTML 4.01 - в трех видах: для строгого, свободного и фреймового варианта соответственно.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN11 "http://www.w3.org/TR/html4/frameset.dtd">



Режимы работы браузера Internet Explorer 6.0 в зависимости от формата директивы DOCTYPE документа
Значение !DOCTYPE URL задан URL задан
Не установлен Обратной совместимости Обратной совместимости
HTML
(если версия не указана)
Обратной совместимости Обратной совместимости
HTML 2.0 Обратной совместимости Обратной совместимости
HTML 3.0 Обратной совместимости Обратной совместимости
HTML 4.0 Стандартный Обратной совместимости
HTML 4.0 Frameset Стандартный Обратной совместимости
HTML 4.0 Transitional Стандартный Обратной совместимости
HTML 4.0 Strict Стандартный Стандартный
XHTML Стандартный Стандартный

Ширина и высота блоков

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

Как же ведут себя в такой ситуации блоки CSS? Что произойдет, если внутрь блока, например, поместить картинку, ширина которой превышает заданное для блока значение width, или если внутри блока окажется очень длинное слово, которое будет превышать ширину блока?

Очевидно, возможных вариантов поведения два. Первый - по аналогии с ячейками таблиц, т.е. блок будет растягиваться, чтобы вместить все содержимое. Второй вариант - блок останется неизменным по ширине, а содержимое перекроет блок (будет расположено как бы поверх блока).

Самое интересное, что в спецификации CSS ничего не говорится о том, как в этих случаях должен вести себя блок. Нам ничего не остается, как рассмотреть ситуацию на практическом примере и решить, как обойти или исправить подобную ситуацию при ее возникновении.

Итак, давайте для примера возьмем не очень широкий блок и зададим для него следующий стиль:

<STYLE>
#narrow {
background:#FFFFCC;
border:1px solid #660033;
padding:1em;
width:120px
}
</STYLE>

Давайте посмотрим, как такой код отобразят разные браузеры. Браузер Internet Explorer 6 покажет его так, как представлено на рисунке. Как видите, блок растянулся, чтобы вместить "оченьдлинноеслово", т.е. блок ведет себя так же, как ячейка таблицы в языке HTML. В окне браузера Mozilla мы увидим то, что показано на рисунке (аналогичную картину увидим и в браузере Opera 5+). Здесь блок не меняет своей ширины, она остается равной 100 пикселей, а содержимое, которое не помещается по ширине, перекрывает блок.

В браузере Internet Explorer блок растягивается, чтобы вместить в себя все содержимое. В браузерах Mozilla и Opera избыточное содержимое будет перекрывать блок.

Таким образом, существует два абсолютно противоположных подхода, и у нас нет механизмов и средств поменять ситуацию, поскольку алгоритм работы заложен внутри самих браузеров. Однозначно сказать, какой из браузеров поступает правильно, а какой нет, также нельзя, поскольку спецификацией не определен "правильный" режим работы в подобных случаях.

Первый вариант работы кажется более приемлемым скорее потому, что он привычнее - так ведут себя HTML-таблицы, и все давно привыкли к этому механизму. При рассмотрении таблиц в HTML мы говорили, что атрибут width задает лишь рекомендованную ширину ячейки, и она может меняться. Поэтому мы особо обращали внимание на то, что в ячейках таблиц нужно очень аккуратно пользоваться символами неразрывных пробелов, поскольку перенос осуществляется именно по словам. Рассмотрим конкретный пример. Здесь задана таблица, состоящая всего из одной ячейки, и ее ширина установлена равной 200 пикселей.

<TABLE BORDER="1" CELLPADDING="0" CELLSРАСING="0" WIDTH="200">
<TR>
<TD>Будьте внимательны, используя символ неразрывного пробела.</TD>
</TR>>
</TABLE>

При этом в браузере все будет выглядеть очень хорошо.
Будьте внимательны, используя символ неразрывного пробела.

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

Будьте&nbsp;внимательны,&nbsp;используя&nbsp;символ&nbsp;неразрывного&nbsp;пробела.

В браузере картина при этом также значительно изменится и станет такой, как показано на рисунке. Как видите, ячейка таблицы растянулась, чтобы вместить все содержимое, и ее ширина уже составляет примерно 440 пикселей.

Будьте внимательны, используя символ неразрывного пробела.

А теперь представьте, что вы верстаете сайт в несколько колонок. Первая колонка должна быть довольно узкой (скажем, для навигации), но в результате неаккуратного использования неразрывных пробелов или просто потому, что в нее было случайно помещено содержимое, превышающее заданную ширину ячейки, колонка растянулась в 2 - 2,5 раза. Это искорежит ваш дизайн до неузнаваемости.

В таком случае вариант, выбранный разработчиками браузеров Mozilla и Opera, более приемлем: пусть содержимое перекроет блок, зато общий дизайн страницы при этом не пострадает.

Как бы там ни было, все давно привыкли аккуратно пользоваться неразрывными пробелами и осторожно относиться к содержимому, превышающему размеры контейнеpa, будь то ячейка таблицы или блок, созданный при помощи CSS. По сути, проблема критической не является — следите за тем, чтобы содержимое соответствовало блоку, и все будет в порядке. А также не пугайтесь, если вдруг увидите, как чрезмерно большое содержимое блока перекрывает его по ширине.

В CSS 2 есть еще несколько свойств, позволяющих регулировать ширину и высоту блоков, точнее их максимально и минимально возможные значения:

  • min-width - минимальная ширина блока;
  • mах-width - максимальная ширина блока;
  • min-height - минимальная высота блока;
  • mах-height - максимальная высота блока.

Жаль только, что пользоваться ими практически невозможно, поскольку поддерживаются они лишь браузерами Netscape 6.x и Opera 5+. Также их поддерживает браузер Internet Explorer 6, но только для элементов TR, TH и TD. Тем не менее свойство min-height незаменимо в том случае, если вы хотите ускорить обработку таблицы.

 

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

 

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

 

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

 

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