http://goo.gl/4alKee

Магия CSS. Глава 1. Блок

Блочная модель

В CSS блочная модель описывает прямоугольные блоки, которые генерируются для элементов, располагающихся на странице.

Фактически все является прямоугольником.

Иллюстрация блочной модели

Несколько интересных фактов:

• border-radius скругляет углы этого блока.
• outline и box-shadow не являются частью блока и, следовательно, не оказывают никакого влияния на раскладку.

Размеры блока

Свойство box-sizing дает вам немного контроля над тем, как будут высчитываться размеры блоков внутри этой модели. Есть два значения для box-sizing, о которых вам стоит сейчас знать: content-box и border-box.

content-box — значение по умолчанию. При вычислении размеров блока размеры padding и border не принимаются в расчет. Свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.

border-box — При вычислении размеры padding и border включаются в общие размерам блока.

Пример:

Оба этих блока имеют одинаковый CSS, но у одного box-sizing: content-box, а у второго — border-box.

.box {
    height: 5em;
    width: 5em;
    padding: 1em;
    border: .25em solid
}

В случае border-box ширина и высота блока .box 5em, в точности как мы видим. В случае с content-box ширина и высота будут по 7.5em = 5 + (2 * 1) + (2 * .25), поскольку мы прибавляем размеры padding и border к размерам блока.

Магия! “Гибкие” input’ы

Преимуществ использования border-box является то, что вы можете задать padding и width в смешанных единицах не перегибая палку со странными размерами. Фантастический способов использования этого — создание “гибких” input’ов с фиксированными внутренними отступами.

В приведенном ниже примере наш input имеет определенный padding в em’ах, но мы все равно можем указать ширину в %(padding: .4em .55em и width: 100% соответственно).

Изменяйте значение свойства width у блока .box чтобы увидеть волшебство =)

P.S. Если вы хотите чтобы ширина и высота вели себя предсказуемо, прислушайтесь к Paul Irish и разместите следующий код вверху CSS-файла:

html {   
  -webkit-box-sizing: border-box; /* Нужно для iOS ниже 4, 
                                     Android ниже 2.3 */
  -moz-box-sizing: border-box; /* Нужно для Firefox ниже 28 */
  box-sizing: border-box; 
}
*, *:before, *:after {   
  box-sizing: inherit; 
}

Внеклассное чтение

• Can I Use: CSS3 Box-sizing?
• MDN: Boxes

Цитирование

1. w3: Box model
2. MDN: box-sizing — есть еще padding-box, но не стоит о нем беспокоится.
3. Paul Irish: * { Box-sizing: Border-box } FTW

Перевод главы из сборника The magic of CSS by Adam Schwartz
Настоятельно советую обратится к первоисточнику. Он прекрасен!