浏览器对「浮点型像素」的处理与造成的问题，以及对「可视区域」的探究

浮点型像素，也就是带小数的像素，如1.6px，20.24px，0.5px等
但要注意的是：这里讨论的设备像素，是最终显示在电脑屏幕上的像素，而非css像素

出现浮点型像素的情况

1.电脑系统不是100%缩放，因为屏幕尺寸较小，如笔记本电脑，系统默认都是125%缩放，即使你的浏览器没缩放，css里的1px对应的也是1.25设备像素，就出现浮点型像素了（可能这也是版心最多是1200px的原因之一，1920px÷125%=1536px，125%缩放的电脑最多显示的css宽度其实是1536px，两边留的边距也就160px左右，版型再大就显得拥挤了）

2.css像素本身就是小数，可能是直接写的，如1.6px，这种情况不多；可能是单位为vw，rem，em换算成px时造成的小数，但是这要结合设备的缩放，比如125%的电脑上，0.8px对应的设备像素为0.8*125%=1px，小数css像素对应的反而是整数设备像素。或者是200%的手机上，0.5px对应的也是1设备像素。

3.浮点数计算精度不足，计算机的浮点数的位数限制导致计算并不精准，这在js的学习中就有所体会。

对浮点型像素的处理

（以谷歌浏览器为研究平台，以盒子模型为研究对象）

得到的结论：

内容区与内边距的像素	边框的像素
四舍五入取整	舍去小数，只取整数

注：特别地，无论是内容区还是边框，像素小于1px时，都会向上取整为1px。如border:0.1px solid #000;是用1设备像素显示的；width:0.1px;height:0.1px内容区也是用1设备像素显示，
但神奇的是同时写0.1px的宽高与边框，就只会显示边框而不会显示内容区，（原因是浏览器对「可视区域」的实现造成的，后面会说到）

实验代码与截图如下，左边截图为div在ps里放大的结果，右边是盒子模型(在100%系统缩放下实验)
----------------------分界线---------------------------------------------------------------------------------------------------------
----------------------分界线---------------------------------------------------------------------------------------------------------
0.1px的内容区仍然用1设备像素显示

div{
        width: 0.1px; height: 0.1px;
        border: 0px solid blue;		
        background-color: red;		
}

注意：红色方块是一个像素点，在ps中放大的图像，其实它真实的样子如下图，

↑，睁大眼睛，他在这，1px就是这么小，所以后面的图像都是页面截图后ps放大的像素点图像

----------------------分界线---------------------------------------------------------------------------------------------------------
----------------------分界线---------------------------------------------------------------------------------------------------------
1.49px的内容区仍然用1设备像素显示

div{
        width: 1.49px; height: 1.49px;
        border: 0px solid blue;		
        background-color: red;		
}

----------------------分界线---------------------------------------------------------------------------------------------------------
----------------------分界线-----------------------------------