HTML缩放的缝隙
又是一个神奇的缝隙
我们先来看一下这两个 div
外层的 div 呢就是一个红色的边框
然后内层呢就是一个绿色的背景
神奇在什么地方呢
就是他只有在
浏览器缩放到一定等级的时候
大家看
他上面和左面
才会出现一点缝隙
这是125%，150%没问题
然后175又有问题了
但是呢这种缩放产生的效果问题
我们通常来说也不用管他
只是呢今天我们可以通过这个问题
拎出来几个知识点大家来讨论一下
好首先呢我们先把它
恢复成百分之百
然后呢我把它截个图
然后呢我们打开 sketch
大家看啊！因为我边框设的是1像素
我把它放大到一定程度之后
这个 sketch 就会出现这个网格
一个网格就是1像素
大家看！这个没问题对吧
好接下来呢我把这块放大到200%
我再截个图
好粘贴
大家看
放大到200%的时候这个边框就占了
2个像素
就说 200%的时候他是变宽了嘛
这也没问题
所以我再给他缩放回125%的时候
或者175%哈
我们再截个图
好大家看
175%的时候这个边框应该是占1.75个像素
但是我们现在从颜色上来看
他只占了1.5个像素
对吧这是1
然后1.5
他为什么没有站到1.75这个位置呢
就是说
这个位置
我竖着画条线啊
大概再分一半吧差不多
就是说，这条线左边应该还是红色
应该是这样的
这样才是1.75对吧
但是哈显示器做不到
为什么呢
拿这个举例子吧
我这个显示器哈
他的一个像素被分成了
4个像素点
我换个颜色这个
这样的比如说他的硬件这一层
最细最细也就到这个是一个颜色
这个是一个这个是一个这个是一个
他不能再细了
所以他做不到1.75这个宽度
但是哈我们发现
他中间是有条缝
这条缝是怎么来的呢
他要么就是
边框站的一部分空间
要么呢就是里边内容的问题
那我们先把
这个外层的容器加一个背景颜色
来看一下
我们加一个 blue 蓝色
好再截个图
好打开
比如说他里边的内容是没问题的
他这个蓝色是外层容器漏出来一点
对吧
注意看啊这时候我再把他的边框去掉
大概没问题了
他就不露蓝色了对吧
那也就可以推断出来
刚才那一点点缝隙是这个border
所占据的一部分空间
border虽然占了这点空间
但是没有把它颜色填充上对吧
所以我们会想到用什么呀
用outline
outline是不占空间的border（边框）嘛
对吧，我们把它用outline，刷新一下
大家看！没问题了
150%、125% 都没问题了
但是这种方案仅限于
我们有一个这样的容器
如果有两个他就会有问题
大家看如果有我有两个的话呢
（外边再加一层 div 方便让他们并列）
好然后呢
我用 style
控制一下 flex 吧
display 等于 flex
大家看这两个
中间看上去只有1像素的
空间对吧
但是其实不是为什么呢
因为
左边这个臂细细的边框
被右边这个1给盖住了
我们把这个背景颜色去掉
把这个背景也可以去掉
大家看现在就是2像素
那为了更直观一点我把第二个
手动的更换一个颜色
outline
color
我们换一个紫色
大家看
这就很清晰了对吧
包括我们把
这个方向改一下
flex-direction column
好打开他也一样会重叠
那很多小伙伴现在可能会想到
我们可以用
margin 来解决（读音妈针😂 、习惯性读错）
可以吗，我们来试一下啊
我把它加一个 margin
因为outline是1像素嘛
我们 margin 也是1像素 大家看
这就回到最初的问题了
因为你这个margin你是占空间的
所以你是在
一定等级下还是会出现问题
那所以呢
如果页面上存在多个这样的元素的话
你用 outline 加 margin
其实还是会有问题
那如果一定要解决的话呢
可能就得用到 js 了
但其实就像我视频开始的时候说的
其实这种缩放产生的问题呢
我们大部分情况是不用管它的
最后更新于