Оглавление

12.1. Указание типа блока

Атрибут display предназначен для указания типа блока. Может принимать следующие значения:
□    block — блок занимает всю ширину родительского элемента. Значение block по умолчанию имеют теги <div> и <р>;
□    inline — блок занимает только необходимое для отображения содержимого пространство. Значение inline по умолчанию имеют теги <span>, <b>и др.;

□   inline-block— аналогично inline, но дополнительно можно задать размеры и другое форматирование, применяемое для блочного элемента. Результат аналогичен встраиванию тега <img> в строку;
□   попе — содержимое блока не отображается.


Различные варианты использования атрибута display приведены в листинге 8.

 

Листинг 8. Атрибут display


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Атрибут display</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
div div { border: 2px solid #333 }
label { display: inline-block; width: lOOpx }
</style>
</head>
<body>
<h2>Различные типы блоков</h2>
<div>
  <div style="display: inline">display = inline</div>
  <div style="display: inline; width: ЗООрх">display = inline</div>
  <div style="display: inline-block; width: ЗООрх">display = inline-block </div> 
  <div style="display: block">display = block</div> 
  <div style="display: none">Этого блока не видно</div> 
</div>
<h2>Выравнивание элементов формы</h2> 
<div>
  <label for="login"> Логин: </label>
  <input type="text" name="login" id="login">
</div> 
<div>
  <label for="pass">Пароль:</label>
  <input type="password" name="pass" id="pass">
</div> 
<h2>Указание типа блока для ссылки</h2> 
<div> 
  <div style="width: 300px"><a href ="linkl.html">Обычная ссылка</a></div> 
  <div style="width: 3 00px"> 
    <a href="link.html" style="display: block">Ссылка занимает всю ширину блока</a> 
  </div> 
</div> 
</body> 
</html>
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити