• УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

    CSS Урок 11 Блочная Модель


    « Назад Далее »

    CSS Блочная Модель

    Все HTML элементы могут рассматриваться как блоки (в смысле контейнеры, оболочки и т.п.). В CSS, термин "блочная модель" используется, когда говорят о дизайне и компоновке.

    Блочная модель CSS - это по существу контейнер (оболочка), который вмещает (оборачивает) HTML элементы, и состоит из: полей, границ, отступов и фактического содержимого.

    Блочная модель позволяет нам устанавливать границу вокруг элементов и располагать элементы по отношению к другим элементам.

    Изображение ниже иллюстрирует блочную модель:


    Объяснение различных частей:

    • Поля - Создают пространство вокруг границы. Поля не имеют фоновых цветов, они полностью прозрачны
    • Граница - Граница идет вокруг отступов и содержания. Цвет границы определяется цветом фона блока
    • Отступы - Создают пространство вокруг содержания. На отступы влияет фоновый цвет блока
    • Содержание - Содержание блока, где располагается текст, изображения и т.п.

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


    Ширина и Высота Элемента

    Важно: Когда вы указываете свойства ширины (width) и высоты (height) элемента в CSS, вы только устанавливаете ширину и высоту области содержания. Для того чтобы узнать полный размер элемента, вы должны также прибавить отступы, границу и поля.

    Общая ширина элемента в примере ниже равна 300px:

    width:250px;
    padding:10px;
    border:5px solid gray;
    margin:10px;

    Давайте посчитаем:
    250px (ширина)
    + 20px (левый и правый отступы)
    + 10px (левая и правая границы)
    + 20px (левое и правое поля)
    = 300px

    Предположим, что у вас есть только 250px пространства. Давайте сделаем элемент с общей шириной в 250px:

    Пример

    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;

    Попробуйте сами »
    Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

    Общая ширина элемента всегда должна вычисляться так:

    Общая ширина элемента = собственно ширина (содержания) + левый отступ + правый отступ + левая граница + правая граница + левое поле + правое поле

    Общая высота элемента всегда должна вычисляться так:

    Общая высота элемента = собственно высота (содержания) + верхний отступ + нижний отступ + верхняя граница + нижняя граница + верхнее поле + нижнее поле


    Проблемы Совместимости Браузеров

    Если вы проверяли предыдущий пример в Internet Explorer, вы увидели, что общая ширина не была точно равна 250px.

    IE8 и более ранние версии включают отступы и границы в ширину, когда свойство width установлено, пока не объявлен тип документа DOCTYPE.

    Чтобы устранить эту проблему, просто добавьте DOCTYPE в исходный код:

    Пример

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    div.ex
    {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
    }
    </style>
    </head>

    Попробуйте сами »
    Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает




    « Назад Далее »


    рулонные шторы цена и размер

    © 2011 - 2022 Уроки CSS