Почему стиль работает в px, а не в cm?

У меня есть следующая страница HTML, в основном это план смены. Но если я переключаюсь с пикселей для экрана на сантиметры для принтера, ширина больше не складывается, и поэтому строки имеют разную ширину.

div.line{
    white-space:nowrap;
    float:left;
}

div.a0, div.a1, div.a2, div.a3{
    border:0.1cm solid black;
    display:inline-block;
    white-space:normal;
    padding:0px;
    margin:0px;
}

div.b0, div.b1, div.b2, div.b3{
    border:1px solid black;
    display:inline-block;
    white-space:normal;
    padding:0px;
    margin:0px;
}
div.a0{width:calc(16cm - 0.2cm);}
div.a1{width:calc(8cm - 0.2cm);}
div.a2{width:calc(4cm - 0.2cm);}
div.a3{width:calc(2cm - 0.2cm);}
div.b0{width:calc(400px - 2px);}
div.b1{width:calc(200px - 2px);}
div.b2{width:calc(100px - 2px);}
div.b3{width:calc(50px - 2px);}
for(var a=0;a<2;a++){
    var b = String.fromCharCode(97 + a);
    for(var c=0;c<4;c++){
        var d = document.createElement("div");
        d.className = "list";
        for(var e=0;e<Math.pow(2,c);e++){
            var f = document.createElement("div");
            f.className = b + c;
            f.innerHTML = b + c;
            d.appendChild(f);
        }
        document.body.appendChild(d);
    }
}

Пример JSFiddle

2 ответа

Решение

На самом деле ваши пиксельные ряды также имеют разную ширину (эффект лестницы). Попробуйте изменить масштаб страницы браузера (CTRL-+ в Chrome) и увидите это.

Чтобы сделать эту работу, как вы хотите, не используйте calc вообще, просто используйте 16cm, 8cm и т. д., и установить box-sizing: border-box; (см. CSS3 Свойство для определения размера блоков) для вашего div s.

Таким образом, ширина границы будет включена в общую ширину элемента.

Исправленная версия вашей скрипки: https://jsfiddle.net/vog8gyxr/4/

Единственное место, где вы можете использовать pt (или cm или in) для установки размера шрифта, это таблицы стилей для печати, если вам нужно убедиться, что напечатанный шрифт точно определенного размера. Но даже там использование размера шрифта по умолчанию обычно лучше. Просто рассчитайте свой размер см в пикселях. 1 см == 37,8 пикс. Может быть, это поможет вам.

Другие вопросы по тегам