Оглавление

Отображение строкового элемента как блочного, и наоборот

Иногда необходимо, чтобы браузер обрабатывал определенные HTML-элементы несколько иным образом, нежели по умолчанию.

 

Решение
На рис. 9.1 видно, что элемент div отображается в непрерывном потоке элементов страницы, а ссылка отображается как блочный элемент.

 

Отображение блочного элемента в качестве строкового, а строкового – в качестве блочного

Рис. 9.1. Отображение блочного элемента в качестве строкового, а строкового – в качестве блочного

 

Такой эффект был достигнут с помощью следующего кода:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Строковые и блочные элементы</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <style type="text/css">
      #one {
        background-color: #CFEAFA;
        border: 2px solid #6CB5DF;
        padding: 2px 6px 2px 6px;
      }
      #two {
        background-color: #CFEAFA;
        border: 2px solid #6CB5DF;
        padding: 2px 6px 2px 6px;
        display: inline;
      }
      a {
        background-color: #6CB5DF;
        color: #FFFFFF;
        text-decoration: none;
        padding: 1px 2px 1px 2px;
      }
      a.block {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="one">Этот div является блочным элементом.</div>
    <p>Мы можем показать вшм или любой другой элемент как строковый элемент. </p>
    <div id="two">Этот div показан как строковый элемент.</div>
    <p>Этот параграф содержит <a href="http://xoops.ws/">ссылку</a> 
       которая показана как строковый элемент.</p>
    <p>Этот параграф содержит <a class="block" href="http://xoops.ws/">ссылку</a> 
       которая показана как блочный элемент.</p>
  </body>
</html>

 

Обсуждение
Блочные элементы отличаются от строковых тем, что они могут содержать другие элементы любого типа. Они также форматируются иным образом: по умолчанию для их размещения отводится прямоугольная область, по ширине занимающая всю страницу. Строковые элементы размещаются непосредственно в тексте, причем для того чтобы они уместились внутри содержащего их блока, осуществляется переход на новую строку. По умолчанию следующие HTML-элементы считаются блочными: заголовки (h1, h2, h3,...), абзацы (p), списки (ul, ol) и различные контейнеры (div, blockquote).

 

В приведенном выше примере есть элемент div, отображаемый в соответствии с его типом. Будучи блочным элементом, по ширине он занимает все доступное пространство родительского элемента – в данном случае body. Если бы он располагался внутри другого div или в ячейке таблицы, его ширина соответствовала бы ширине этого элемента.

 

Чтобы div отображался по-другому, можно превратить его в строковый элемент путем изменения следующего свойства:

display: inline;


Аналогичным образом можно превратить строковый элемент в блочный. Обратите внимание, что в рассмотренном ранее примере элемент a по умолчанию является строковым. У разработчика достаточно часто возникает потребность в изменении его типа на блочный, например при создании навигационной панели с помощью CSS. Для этого нужно задать свойству display значение block. В предыдущем примере благодаря использованию такого приема серое окошко со ссылкой по ширине занимает весь экран.

 

 

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити