Каскад и блочная модель — Примеры

Пример 1 — Какой цвет победит

Три правила нацелены на один и тот же абзац на странице, которую можно открыть в браузере; скажите, каким цветом отрисуется текст, затем — какое правило победило и почему. Сохраните разметку и таблицу стилей ниже одним HTML-файлом и откройте его.

<p class="note" id="intro" style="color: crimson;">Заметки об отправке</p>

<style>
  p { color: navy; }          /* A */
  #intro { color: green; }    /* B */
  p.note { color: purple; }   /* C */
</style>

Решение

отрисованный цвет: crimson
победитель: встроенный атрибут style
почему: встроенные объявления бьют любой селектор, не помеченный !important,
        какова бы ни была его специфичность, поэтому A, B и C до элемента не доходят.

Как кортежи правила таблицы стилей таковы: p = (0,0,1), p.note = (0,1,1) и #intro = (1,0,0), поэтому среди них побеждает #intro; удалите атрибут style — и текст станет зелёным. Ловушка в том, чтобы на этом остановиться. Встроенное объявление находится в более высоком уровне источника, чем любой селектор автора, поэтому оно забирает свойство целиком, а специфичность вообще не учитывается. Когда что-то не удаётся переопределить позже, причина обычно именно в этом.

Пример 2 — Какую ширину на самом деле занимают два блока

Оба блока объявляют одинаковые width, padding и border, но один использует border-box, а другой content-box; выясните, какой ширины каждый блок на экране, и скажите, какое объявление вы бы оставили.

.a {
  box-sizing: content-box;   /* значение по умолчанию */
  width: 300px;
  padding: 20px;
  border: 1px solid grey;
}

.b {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid grey;
}

Решение

.a = 342px   300 содержимого + 20 + 20 padding + 1 + 1 border
.b = 300px    padding и border уходят из этих 300

При content-box объявленный width покрывает только содержимое, поэтому padding и border добавляются вокруг него: 300 + 40 + 2 = 342. При border-box объявленный width — весь видимый блок, поэтому область содержимого сжимается до 258, а сам блок измеряется ровно в 300. Оставьте border-box: он делает блок того размера, который вы набрали, и именно это не даёт ряду колонок переполнять контейнер. Ловушка — смешивать оба: два блока с одинаковым width больше не измеряются одинаково.