解决“有边框的子元素宽度设定绝对值后，缩放浏览器会错位”的两种方法

ad6623 发布于2019-08-30 14:18 / 571人阅读

摘要：现象用浮动布局时，如果为子元素的宽度指定绝对值，并且子元素具有边框，在缩放浏览器的时候会出现错位现象。举例正常显示效果缩小为原本后产生错位解决方法一利用属性的指定宽度和高度最小最大属性确定元素边框。

现象:

用浮动布局时，如果为子元素的宽度指定绝对值，并且子元素具有边框，在缩放浏览器的时候会出现错位现象。
这种现象产生的原因是：
浏览器缩放时，子元素父元素的内容都等比例缩放，而子元素的边框不能等比例缩放，在缩放到达一定程度后，会造成子元素大于父元素，从而产生错位现象。

举例：

    left
    right

正常显示效果：

缩小为原本67%后产生错位：

解决方法一：

利用box-sizing属性的border-box.[border-box:指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算]
css：

缩放50%后的效果

解决方法二：

将子元素浮动，即两个元素不在一个文档流中，从而避免产生错位
CSS：

缩放30%后的效果:

云服务器 GPU云服务器数据统计的两种方法 json的两种结构】最优生成树的两种算法域名解析的两种主要方式为

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115921.html

解决跨域的两种方案JSONP和CORS

摘要：由于第二种方法如今已经采用的非常少，所以我们在这儿不做讲解一带填充的是一种可以在中绕过同源策略，并发起跨域请求的使用模式，可以启动的跨域请求同源策略有一个显著的例外，脚本元素是可以规避检查的。讲跨域之前，我们先来讲同源策略（SOP），同源策略是网景公司提出的一个著名安全策略。所谓同源就是域名、协议、端口相同。例如http://www.12306.cn中，http就是超文本传输协议，1...

曹金海 2019-08-22 11:05 评论0 收藏0
Django ORM层日志的两种实现方式

摘要：最近开发一个内部的记录系统其中有一个需求要求将所有数据库操作记录下来为此想了一些方案记录一下思路演化这个需求出来的一瞬间我就否定了在业务逻辑层保存操作记录的方案我认为这样耦合度比较高成本也太高代码也会大量重复的操作中删除操作会调用的方法增改最近开发一个内部的记录系统,其中有一个需求要求将所有数据库操作记录下来,为此想了一些方案.记录一下. 思路演化这个需求出来的一瞬间我就否定了在业...

CKJOKER 2019-07-30 16:37 评论0 收藏0