900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS边框样式border设置1px(小于或等于3px)之后 缩放浏览器窗口 导致布局出现问题

CSS边框样式border设置1px(小于或等于3px)之后 缩放浏览器窗口 导致布局出现问题

时间:2023-12-07 03:59:52

相关推荐

CSS边框样式border设置1px(小于或等于3px)之后 缩放浏览器窗口 导致布局出现问题

项目场景:

在css里面对盒子加边框时,调整像素值为1px,运行到浏览,缩放页面,会造成页面排版出现问题

问题描述:

窗口大小是100%

窗口缩放

在这里我是对dl设置了一个1px的边框,按照我写的代码dt,dd都会向左浮动,盒模型是用的诡异盒模型,dt+2dd的宽度正好是dl的宽度,dd宽度为366px。窗口正常(100%)时,页面还是正常的,由于页面比较长,当我将页面缩放时,页面的排版就发生了诡异的变化

原因分析:

仔细观察页面变化,就会发现dd的排版出现了问题,本来是浮动一边一个显示,现在又变没有多余的位置放一个宽为366px的dd盒子

我们将盒子的边框设为1px时,由于页面缩放了,会导致边框变大,使用的是诡异盒模型,边框变大,内容区域变小,实际可放置的宽度小于366px了,就会将dd盒子“挤走”

解决方案:

我在网上搜索了很久,根本找不到解决方法(感觉都没人在意这个小问题)。

想到只要空间能装下两个dd盒子就行,我想到了一个方法,我就将盒子的width宽度变小,这样不就装的下了吗,这样排版不就正常了吗,于是,我将dd盒子大小改小了4px,改成了362px,这样页面布局就正常了。

浏览器缩放最小,边框变为了3.227px,border使用1、2、3像素时都会遇到相同的问题。

总结:使用1,2,3像素的边框大小值,浏览器窗口缩放必然会造成边框的变化

题外话:以后遇到这样的问题,找不出自身的原因就要多看看四周,是不是环境有问题,我其实一直都怀疑我的代码是否有问题(其实也的确有问题,宽度给多了),去找浮动的“麻烦”,去看他父亲(父元素)“麻烦”,甚至把他的儿子(子元素)也问候了一遍,最终发现是边框长胖了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。