Потому что по умолчанию стоит модель content-box, и она убога.
Хотя для того, чтобы например его можно было переопределить в плагинах, предпочитаю такой способ
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
UPDATE: Решил посмотреть, как влияет применение универсального селектора на производительность.
Взял статью
frontender.info/css-performance-revisited-selector..., и оттуда код
<script type="text/javascript">
;(function TimeThisMother() {
window.onload = function(){
setTimeout(function(){
var t = performance.timing;
alert("Speed of selection is: " + (t.loadEventEnd — t.responseEnd) + " milliseconds");
}, 0);
};
})();
</script>
Также использовал 1000 идентичных кусков данной разметки
<div class="tagDiv wrap1">
<div class="tagDiv layer1" data-div="layer1">
<div class="tagDiv layer2">
<ul class="tagUl">
<li class="tagLi"><b class="tagB"><a href="/" class="tagA link" data-select="link">Select</a></b></li>
</ul>
</div>
</div>
</div>
Проверял 2 способа: с пустым css файлом, и с CSS кодом
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Пока только на последнем хроме. Запускал страницу по 50 раз и вычислил средние значения:
В первом случае, без css кода, это оказалось 124ms, во втором - 121ms.
Понятно, что это статистическая погрешность, поэтому пришел к выводу, что разницы никакой нет.
Если предложите другие варианты тестирования - буду очень рад.
Простой
Простой