CSS边框样式border设置1px(小于或等于3px)之后,缩放浏览器窗口,导致布局出现问题 您所在的位置:网站首页 s21边框宽度 CSS边框样式border设置1px(小于或等于3px)之后,缩放浏览器窗口,导致布局出现问题

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

2023-08-20 20:35| 来源: 网络整理| 查看: 265

项目场景:

在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像素的边框大小值,浏览器窗口缩放必然会造成边框的变化

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



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有