每天一道前端面试题：1PX、盒模型

1px 问题：

原因：2 倍图的 1px 其实要实现的是 0.5px，直接写 1px 会偏粗，但写 0.5 又会有兼容性问题

解决：写成 1px，然后采用缩放的形式，避免直接写小数带来的兼容性问题。比如 1px 的 border，先扩大 200%（border 不会被扩大）再缩放 0.5，效果就是元素大小上没变，border 粗细变成了 0.5。

注意：如果用css直接设置边框为0.5px，这种情况下iPhone可以正常显示，但是android下几乎所有的浏览器都会把0.5识别为0，即无边框状态，所以这种方式行不通的。

 

盒模型

   IE 盒模型：设置box-sizing: border-box; 当 width=100px 时包括 content+padding+border = 100

   标准盒模型: 当width=100px 时只有 content = 100，总宽 = 100+padding+border= 121

   标准盒模型转化为IE盒模型：box-sizing属性为border-box（默认content-box）