6. css盒模型+画一条0.5px的线

6. css盒模型+画一条0.5px的线

(1)说一下css盒模型

简介:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

box-sizing(有3个值哦):border-box,padding-box,content-box.

标准盒子模型:

6. css盒模型+画一条0.5px的线_第1张图片

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,在不同的浏览器会有不同的表现,使用如下代码:

DOCType html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .hr {
       
            width: 300px;
            background-color: #000;
        }
        .hr.half-px {
       
            height: 0.5px;
        }
        .hr.one-px {
       
           height: 1px;
        }
    style>
head>
<body>
    <p>0.5pxp>
    <div class="hr half-px">div>
    <p>1pxp>
    <div class="hr one-px">div>
body>
html>

img

其中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,则第一个值表示水平偏移量,第二个值表示垂直偏移量。
<style>
.hr.scale-half {
       
    height: 1px;
    transform: scaleY(0.5);
}
style>
    <p>1px + scaleY(0.5)p>
    <div class="hr scale-half">div>

6. css盒模型+画一条0.5px的线_第2张图片

我们发现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现在的效果如下

6. css盒模型+画一条0.5px的线_第3张图片

2.2 线性渐变linear-gradient

<style>
.hr.gradient {
       
    height: 1px;
    background: linear-gradient(0deg, #fff, #000);
}
style>
<p>linear-gradient(0deg, #fff, #000)p>
<div class="hr gradient">div>

6. css盒模型+画一条0.5px的线_第4张图片

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轴偏移量、模糊半径、扩散半径和颜色。
<style>
.hr.boxshadow {
       
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
}
style>
<p>box-shadow: 0 0.5px 0 #000p>
<div class="hr boxshadow">div>

2.4 viewport

补充:

  • 网址:https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport

  • 在电脑图形学里面,视口代表了一个可看见的多边形区域(通常来说是矩形)。在浏览器范畴里,它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。

    视口当前可见的部分叫做可视视口(visual viewport)。可视视口可能会比布局视口layout viewport )更小,因为当用户缩小浏览器缩放比例时,布局视口不变,而可视视口变小了**。**

<meta name="viewport" content="width=device-width,initial-sacle=0.5">

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

你可能感兴趣的