Как сделать элементы блочными

  • Закрыть ... [X]

    

    Как сделать сайт → Уроки CSS → Урок 12. Виды и свойства блоков

    Как вы помните, элементы могут быть блочными и строчными (урок 8). По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a - строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство может принимать одно из четырех значений. Рассмотрим все четыре на примерах.

    display:block

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

    Главная О нас Контакты

    Зададим на странице style.css стиль для наших ссылок, причем только для ссылок, которые находятся в div-е с id="menu" (тогда другие ссылки на странице, если они будут, останутся без изменения или им можно будет задать другой стиль):
    #menu{ width:200px; background:yellow; } #menu a{ color:#2b3845; text-decoration:none; } #menu a:hover{ color:#92A9BF; background:blue; }
    Сейчас наши ссылки выглядят так:

    Главная О нас Контакты

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

    #menu{ width:200px; background:yellow; } #menu a{ color:#2b3845; text-decoration:none; display:block; } #menu a:hover{ color:#92A9BF; background:blue; }
    Теперь наше меню выглядит так:

    Главная О нас Контакты

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

    display:inline

    Это значение делает элемент строчным. Предположим, мы хотим разместить на странице параграф, который должен начинаться с заголовка. На html-странице мы напишем следующий код:

    Заголовок.

    Текст параграфа

    Сейчас наша страница выглядит так:
    Заголовок.

    Текст параграфа

    Добавим на страницу style.css стили для наших элементов:
    h5, p{ display:inline; }
    Теперь наша страница выглядит так, как мы и хотели:
    Заголовок.

    Текст параграфа

    display:list-item

    Это значение делает любой элемент частью списка. Используется он редко, да и поддерживается браузерами не в полной мере. Но давайте все-таки посмотрим пример. Пусть у нас есть три заголовка одного уровня, и мы хотим оформить их списком. Для этого на html-странице мы напишем:

    Заголовок
    Заголовок
    Заголовок
    Сейчас наши заголовки выглядят, как положено:
    Заголовок
    Заголовок
    Заголовок
    На странице стилей напишем всего одно свойство:
    h6{ display:list-item; }
    В результате получим список из заголовков:
    Заголовок
    Заголовок
    Заголовок

    display:none

    Это значение убирает элемент со страницы. Очень часто используется для формирования раскрывающихся меню сайтов, например, с помощью языка javascript. Вы, наверно, встречали такие меню, где при щелчке по пункту меню раскрывается список подпунктов. Вот в таких меню и используется значение display:none.

    Надо сказать, что в CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока - visibility. Оно может принимать два значения: visible (отображать) и hidden (сделать невидимым).

    Различия здесь следующее: display:none скрывает элемент, как будто его и не было, а visibility:hidden делает элемент прозрачным. Понятнее будет на примере. Пусть у нас есть пять параграфов:

    Параграф 1

    Параграф 2

    Параграф 3

    Параграф 4

    Параграф 5

    Сейчас наша страница выглядит так:

    Параграф 1

    Параграф 2

    Параграф 3

    Параграф 4

    Параграф 5

    Давайте зададим для второго параграфа свойство display:none, а для четвертого - свойство visibility:hidden:

    #p2{ display:none; } #p4{ visibility:hidden; }
    Посмотрим, что получилось:

    Параграф 1

    Параграф 2

    Параграф 3

    Параграф 4

    Параграф 5

    Как видите, второй параграф отсутствует, а четвертый - невидим, но место под него оставлено. В этом и заключается разница. Свойство visibility так же, как и свойство display, чаще всего применяется совместно с javascript.

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

    Как видите, одни браузеры растягивают блоки, чтобы вместить содержимое, а другие перекрывают блок содержимым. Конечно, лучшего всего контролировать размеры объектов, но это не всегда возможно. Как же быть тогда? Воспользоваться свойством overflow. Это свойство может принимать четыре значения:
    • visible - если содержимое превышает размеры блока, оно все-равно останется на экране. Результат будет такой же, как на рисунке выше.
    • hidden - браузер отрежет содержимое, которое превышает размер блока.
    • scroll - блок будет снабжен полосами прокрутки, причем как горизонтальной, так и вертикальной.

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

    • auto - блок будет снабжен только теми полосами прокрутки, которые необходимы.

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

    Надо сказать, что на практике свойство overflow используется редко, но знать о его существовании все-таки стоит.

    На сегодня, пожалуй, все. В следующем уроке познакомимся со слоями.

    Предыдущий урок Вернуться в раздел Следующий урок 

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

    Уроки PHPУроки PHPУроки PHPУроки PHPУроки PHPУроки PHP

    Код кнопки:

    Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.



    Поделись с друзьями



    Рекомендуем посмотреть ещё:



    Css - Как при наведении на один элемент менять стили другого элемента? Как сделать цветочек из чупа чупса

    Как сделать элементы блочными Как сделать элементы блочными Как сделать элементы блочными Как сделать элементы блочными Как сделать элементы блочными Как сделать элементы блочными Как сделать элементы блочными Как сделать элементы блочными Как сделать элементы блочными

    ШОКИРУЮЩИЕ НОВОСТИ