7. Ширина и высота

На этой странице:

• Свойства width и height
• Переполнение содержимым
• Ограничение ширины и высоты
• Проблемы размеров
• Решение проблемы размеров
• Декларация DOCTYPE
• Вёрстка потоком
• Значение auto
  • Горизонтальное форматирование
  • Вертикальное форматирование

Свойства width и height

Свойства width и height задают ширину и высоту элемента, под которыми понимаются размеры области содержимого элемента (без рамок, внутренних и внешних отступов).

Эти свойства игнорируются для строчных незамещаемых элементов. Значение auto для свойства width вычисляется так, чтобы общая ширина элемента вместе со всеми отступами и рамками точно равнялась ширине родителя (значению его свойства width). Значение auto для свойства height вычисляется по реальной высоте содержимого элемента.

width и height Значения: <размер> | <проценты> | auto | inherit По умолчанию: auto Область применения: блочные и замещаемые строчные элементы Наследование: нет Проценты: относительно соответствующих размеров блока-контейнера Примечание: отрицательные значения для размеров и процентов не допускаются

Файл style.css P.first { width:50%; height:150px; background:#a7fbc0; }

Файл index.htm

Переполнение содержимым

Если размеры элемента малы, возникает опасность переполнения его содержимым. Для управления такой ситуацией CSS предлагает свойство overflow.

Для иллюстрации значений свойства overflow будем использовать следующую пару HTML/CSS:

PRE 
{
  width:200px;
  height:5em;
  background:#ffca4c;
}
      

visible

scroll

auto

hidden

Ограничение ширины и высоты

Если имена свойств width и height снабдить приставкой min- или max-, получим имена свойств, ограничивающие ширину и высоту элемента.

Проблемы размеров

<DIV class="area">
  Содержимое блока
</DIV>
         

.area
{
  padding: 10px;
  margin:  20px;
  border:  5px solid black;
  width:   400px;
  height:  300px;
}
      

Эта разница приводит к краху блочной разметки в устаревших (но ещё популярных) версиях IE, если разработчик следовал стандартам.

Указанная особенность полностью относится к IE пятых версий и к версии IE6, если в декларации DOCTYPE (см. ниже на этой странице) указан стандарт Transitional (или Frameset). Модель Strict браузер IE6 обрабатывает уже по стандарту W3C.

Решение проблемы размеров

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

Итак, надо объявить ширину блока в 400 пикселов. Если у блока нет внутренних отступов и рамок, то просто пишем width:400px — это будет будет работать для всех браузеров, которые понимают CSS.

Если общая ширина внутренних отступов и рамок по горизонтали составляет 50 пикселов, то для браузеров IE5 и IE6 надо указывать width:450px, а для остальных по-прежнему width:400px. Проблему решает следующий CSS-код:

.area
{
  width:400px;  /* Для хороших старых браузеров */
  \width:450px; /* Обман для IE5 и IE6 */
  w\idth:400px; /* Для всех новых хороших браузеров */
}  
      

Трюк основан на использовании символа “\” — обратной косой черты. Это допустимый символ, описанный в стандарте CSS. Он используется в качестве модификатора, меняющего специальный смысл следующего за ним знака на обычный.

Например, этот символ можно использовать для того, чтобы поместить обычные кавычки внутрь служебных:

"Фото 5\"А\" класса"  
      

Обратная косая черта отменяет специальный смысл кавычки, которая следует непосредственно за ней.

А если у символа нет специального смысла? Значит, и отменять нечего, символ остаётся прежним. Использовать обратную косую черту можно не только в записи строки, но и в записи названий свойств. Таким образом, \width и w\idth полностью эквивалентны width. Какой же смысл в приведённом трюке?

   .area
   {
01   width:400px;  /* Для хороших старых браузеров */
02   \width:450px; /* Обман для IE5 */
03   w\idth:400px; /* Для всех новых хороших браузеров */
   }  
      

Первая строка уловки — для тех браузеров, которые работают по стандарту, но не понимают модификатора (к ним относится, например, браузер Opera 5). Эти браузеры будут рассматривать символ “\”, как обычный знак, входящий в состав имени свойства, не “узнают” width и пропустят строки 2 и 3.

Вторая строка — для браузера IE5, который работает не по стандарту, не считает обратную косую черту модификатором в середине слова, но, по счастью, считает этот знак модификатором, если с него слово начинается. Таким образом, IE5 (и IE6, если он работает в режиме IE5) сначала прочитает 400px в первой строке, потом изменит это значение на 450px из второй строки, а третью строку проигнорирует.

Третья строка — для совсем хороших браузеров: тех, которые работают во всём по стандарту, в том числе правильно понимают символ обратной косой черты.

Пример построения блока

Решением будет следующий набор CSS-определений:

.area
{
  background:#a7fbc0; 
  margin:15px;
  border:5px solid #4d4d4d;
  padding:20px;
  width:400px;   /* Для хороших старых по стандарту */
  \width:450px;  /* Обман для IE5 */
  w\idth:400px;  /* Для всех новых хороших по стандарту */
  height:300px;  /* Для хороших старых по стандарту */
  \height:350px; /* Обман для IE5 */
  he\ight:300px; /* Для всех новых хороших по стандарту */
}
      

Нельзя было записать h\eight по следующей причине. Знак “\” используется и для кодирования символов 16-ричными цифрами. Если за обратной косой чертой следует один из знаков 0–9, a, b, c, d, e, f, то это воспринимается как начало 16-ричного кода.

Декларация DOCTYPE

Полный HTML-код последнего примера имеет вид:

В тег <HTML> добавлен атрибут lang с указанием русского языка, но главное, перед HTML появился странный элемент DOCTYPE. Мы теперь всегда так будем начинать свои HTML-коды.

Дело в том, что браузер должен знать, на каком языке написана страница, чтобы правильно отобразить её на экране (или другом устройстве). Для этого в первой строке кода необходимо записывать конструкцию DOCTYPE.

DOCTYPE является ключевым компонентом в совместимости страниц, кроме того, выбор DOCTYPE влияет на поведение вашей Web-страницы в различных браузерах.

Джеффри Зельдман, «Web-дизайн по стандартам»

Очень сильно влияет! Ваша визуальная разметка, выполненная средствами CSS по стандартам W3C, может потерпеть крах на экране, если DOCTYPE не будет записан.

Элемент DOCTYPE предназначен для указания соответствия кода документа одному из стандартов W3C. Браузер, в зависимости от стандарта, по-разному интерпретирует элементы на странице.

Элемент DOCTYPE — это, скорее даже не элемент, а описание (декларация), имеющее свой собственный синтаксис.

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

Варианты DOCTYPE для HTML 4.01 приводятся ниже.

Предусмотрено 3 стандарта языка HTML 4.01:

• Strict (строгий)
• Transitional (переходный)
• Frameset (аналогичен Transitional, но с фреймами)

Вариант Strict

Код не содержит элементов и атрибутов, помеченных W3C как «устаревшие» или «не одобряемые» (например: CENTER, FONT, S, U, align, background, bgcolor, color, size).

Декларация записывается в виде:

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

Вариант Transitional

Код может содержать устаревшие теги, вариант введён в целях совместимости со старыми версиями HTML.

Декларация записывается в виде:

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

Вариант Frameset

Аналогичен Transitional, но содержит также элементы для создания наборов фреймов.

Декларация записывается в виде:

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

Какой вариант DOCTYPE выбрать?

Вариант Frameset отбрасываем сразу, так как фреймы — это рудимент прошлого века, и использовать их мы не собираемся.

В переходной период, когда браузеры не на 100% поддерживают стандарты, ничего другого не остаётся для практики, как выбрать переходной стандарт Transitional.

Таким образом, код любой нашей странички должен иметь такой вид:

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

Атрибут lang со значением ru определяет русский язык в качестве базового языка на страничке.

Вёрстка потоком

Давайте посмотрим, как браузер выполняет вёрстку страницы на экране по умолчанию. Алгоритм, описанный ниже, называют вёрсткой потоком или просто потоком.

По умолчанию браузер выводит блочные элементы друг за другом сверху вниз. При этом ширина блочного элемента совпадает с доступной шириной родителя (его свойством width), а высота определяется по содержимому.

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

Если в блоке есть смесь блочных и строчных элементов (на уровне прямых потомков), то все строчные элементы (а также неразмеченный текст) собираются в безымянные блоки и строятся по описанному выше алгоритму построения блоков.

Строки по умолчанию выравниваются со стороны, принятой для текущего языка (слева для русского).

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

Значение auto

Построим страницу с тремя абзацами. Для второго абзаца укажем ширину, высоту, отступы и рамку и посмотрим, как результат согласуется с алгоритмом работы потока.

Файл style.css .area { background:#a7fbc0; margin:15px; border:5px solid #4d4d4d; padding:20px; width:300px; \width:350px; w\idth:300px; height:100px; \height:150px; he\ight:100px; }	Файл index.htm
	Создаётся впечатление, что второй абзац выпадает из потока: его ширина не равна ширине родителя BODY. Впечатление неверное: мы забыли про внешние отступы. Да, но отступ справа совсем не похож на 15 пикселов, он существенно больше!
Внешний отступ справа изменён на auto. Для языков с чтением справа налево, в auto был бы преобразован левый внешний отступ. Браузер обязан уложить элемент в поток, даже ценой нарушения CSS-указаний.	Конечно, больше! Он такой, что общая ширина абзаца (со всеми отступами и рамками) в точности равняется ширине родителя BODY по алгоритму потока. Да, но мы задали все внешние отступы равными 15 пикcелов: margin:15px! Это так, но чтобы уложить абзац в поток, браузер проигнорировал наш правый отступ, заменив его на auto. Так он поступает при вёрстке документов, в которых тексты читаются слева направо.

Был продемонстрирован пример, в котором браузер заменяет заданный внешний отступ справа на auto, чтобы уложить элемент в поток. Однако значение auto можно явно указывать в CSS-правилах для внешних отступов и размеров. Рассмотрим работу значения auto отдельно по горизонтали и вертикали.

Горизонтальное форматирование

Горизонтальным форматированием блока можно управлять при помощи семи свойств:

• margin-left — внешний отступ слева;
• border-left — рамка слева;
• padding-left — внутренний отступ слева;
• width — ширина содержимого;
• padding-right — внутренний отступ справа;
• border-right — рамка справа;
• margin-right — внешний отступ справа.

Алгоритмы работы этих свойств при значении auto основаны на общем правиле горизонтального форматирования потока.

Сумма размеров горизонтальных компонентов блока в потоке всегда равна значению width родителя.

Если одному из свойств margin-left, width или margin-right задано значение auto, а для остальных — определённые значения, то свойство, заданное, как auto, определяет размер, необходимый для размещения блока по ширине родителя.

На этом правиле основан способ выравнивания блока по отношению к родителю.

.block {width:350px;margin-right:auto;}
          

.block {width:350px;margin-left:auto;}
          

.block 
{ 
  width:auto; 
  margin-left:50px;
  margin-left:150px;
}
          

.block
{
  width:350px;
  margin-left:auto;
  margin-right:auto;
}
          

HTML
{
  text-align: center; /* Центрирование BODY для IE5 */
}

/* Определения для блока BODY, вложенного в блок HTML */
BODY
{
  margin: 10px auto;  /* Выравнивание BODY по центру (по стандарту)*/
  text-align: left;   /* Восстановление выравнивание текста слева */
}
          

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

.block
{
  width:auto;
  margin-left:50px;
  margin-right:auto;
}
          

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

Наконец, если всем трём свойствам заданы определённые значения, то свойству margin-right принудительно присваивается auto для языков с написанием слева направо. Для языков с написанием справа налево в auto устанавливается свойство margin-left.

Примеры

Файл style.css .area { background:#a7fbc0; margin:15px; margin-left:auto; border:5px solid #4d4d4d; padding:20px; width:300px; \width:350px; w\idth:300px; height:100px; \height:150px; he\ight:100px; }	Файл index.htm
Файл style.css .area { ... margin:15px auto; ... }	Файл index.htm HTML-код остался прежним.

Вертикальное форматирование

Вертикальным форматированием блока можно управлять при помощи семи свойств, задающих размеры:

• margin-top — внешний отступ сверху;
• border-top — рамка сверху;
• padding-top — внутренний отступ сверху;
• height — высота содержимого;
• padding-bottom — внутренний отступ снизу;
• border-bottom — рамка снизу;
• margin-bottom — внешний отступ снизу.

Алгоритмы работы этих свойств при значении auto основаны на общем правиле вертикального форматирования потока.

По вертикали блок в потоке стремится занять размер по содержимому этого блока.

Если для свойств margin-top или margin-bottom задано значение auto, им автоматически присваивается нулевое значение.

Размер блока со значением height:auto определяется таким образом, чтобы его высоты как раз хватило для размещения содержимого.