前端工程师每日一题|6. css盒模型+画一条0.5px的线 html5|html|css

6. css盒模型+画一条0.5px的线（1）说一下css盒模型简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
box-sizing(有3个值哦)：border-box,padding-box,content-box.
标准盒子模型：

文章图片

IE盒子模型：

区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：
标准盒子模型的盒子宽度：左右border+左右padding+width
IE盒子模型的盒子宽度：width

解释：

没有写反

width不等于宽度

标准盒模型显示的宽度计算是content(width)+padding+border
IE盒模型显示的宽度就是设置的width

在CSS3中引入了box-sizing属性，box-sizing:content-box; 表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型
最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右padding+width
也很好理解性记忆，包含什么，width就从什么开始算起。
（2）画一条0.5px的线

参考：
https://www.jianshu.com/p/600dbd5ae72b
https://juejin.im/post/5ab65f40f265da2384408a95

像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。
像素本身有大小,如果一个像素越小，那么在同样大小的屏幕上，需要的像素点就越多，像素就越密集，如果一英寸有435个像素，那么它的dpi/ppi就达到了435。Macbook Pro 15寸的分辨率为2880 x 1800，15寸是指屏幕的对角线为15寸（具体为15.4），根据长宽比换算一下得到横边为13寸，所以ppi为2880 / 13 = 220 ppi. 像素越密集即ppi(pixel per inch)越高，那么屏幕看起来就越细腻越高清。
在Mac/Windows上可以设置屏幕显示的分辨率，Mac默认为设备分辨率的一半，它的dpr = 2，即长和宽用2个像素表示1个像素，所以2880个物理像素点实际上只表示1440个逻辑像素。那么我们的问题来了，怎么在高清屏上画一条0.5px的边呢？0.5px相当于高清屏物理像素的1px。这样的目的是在高清屏上看起来会更细一点，效果会更好一点，例如更细的分隔线。
2.0 直接设置0.5px
如果我们直接设置0.5px，在不同的浏览器会有不同的表现，使用如下代码：

> .hr {width: 300px; background-color: #000; } .hr.half-px {height: 0.5px; } .hr.one-px {height: 1px; } 0.5px 1px

文章图片

其中Chrome把0.5px四舍五入变成了1px，而firefox/safari能够画出半个像素的边，并且Chrome会把小于0.5px的当成0，而Firefox会把不小于0.55px当成1px，Safari是把不小于0.75px当成1px，进一步在手机上观察IOS的Chrome会画出0.5px的边，而安卓(5.0)原生浏览器是不行的。所以直接设置0.5px不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的px有不同的处理。所以如果我们把单位设置成小数的px包括宽高等，其实不太可靠，因为不同浏览器表现不一样。
2.1 使用scale缩放，配合transform-origin: 50% 100%

补充：

transform-origin

网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。

> .hr.scale-half {height: 1px; transform: scaleY(0.5); } 1px + scaleY(0.5)

文章图片

我们发现Chrome/Safari都变虚了，只有Firefox比较完美看起来是实的而且还很细，效果和直接设置0.5px一样。所以通过transform: scale会导致Chrome变虚了，而粗细几乎没有变化。但是如果加上transform-origin: 50% 100%（是为了指定变换的原点）：

.hr.scale-half {height: 1px; transform: scaleY(0.5); transform-origin: 50% 100%; }

chrome现在的效果如下

文章图片

2.2 线性渐变linear-gradient

> .hr.gradient {height: 1px; background: linear-gradient(0deg, #fff, #000); } linear-gradient(0deg, #fff, #000)

文章图片

inear-gradient(0deg, #fff, #000)的意思是：渐变的角度从下往上，从白色#fff渐变到黑色#000，而且是线性的，在高清屏上，1px的逻辑像素代表的物理（设备）像素有2px，由于是线性渐变，所以第1个px只能是#fff，而剩下的那个像素只能是#000，这样就达到了画一半的目的。
2.3 boxshadow

补充：

网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

> .hr.boxshadow {height: 1px; background: none; box-shadow: 0 0.5px 0 #000; } box-shadow: 0 0.5px 0 #000

2.4 viewport
补充：

网址：https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport
在电脑图形学里面，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。
视口当前可见的部分叫做可视视口（visual viewport）。可视视口可能会比布局视口（layout viewport ）更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了**。**

【前端工程师每日一题|6. css盒模型+画一条0.5px的线】其中width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度。默认的缩放比例为1时，如iphone 6竖屏的宽度为750px，它的dpr=2，用2px表示1px，这样设置之后viewport的宽度就变成375px。但是我们可以改成0.5，viewport的宽度就是原本的750px，所以1个px还是1px，正常画就行，但这样也意味着UI需要按2倍图的出，整体面面的单位都会放大一倍。