为什么样式在px中工作但不在cm中?

时间:2016-06-11 17:06:56

标签: javascript html css 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 Example

2 个答案:

答案 0 :(得分:1)

如果您需要确保打印的字体确实是一定的大小,那么您可以使用pt(或cm或in)设置字体大小的唯一位置是打印样式表。但即使使用默认字体大小通常也更好。 只需将cm尺寸计算为px即可。 1cm == 37.8px。 可能它会帮助你。

答案 1 :(得分:1)

实际上,您的像素行也有不同的宽度(楼梯效果)。尝试更改浏览器页面比例(Chrome中的CTRL- +)并查看。

要根据需要开展此项工作,请完全不要使用calc,只需使用16cm8cm等,然后设置box-sizing: border-box;(请参阅{ {3}})div

这样,边框宽度将包含在总元素宽度中。

修正了小提琴的版本:CSS3 box-sizing Property