之前在项目中遇到一个布局上很趣的问题(也可能是笔者才疏学浅,哈哈)。布局大概是这样的:

  • 外层包裹器:采用flex布局,并指定内部子弹性盒子元素水平显示
  • 侧边栏:flex盒子的子元素,可收起和展开。展开时显示菜单图标和菜单名称,收起时仅显示菜单图标。点击菜单图标或者文字(整个菜单项)跳转到预设置的路由上。展开时宽度为200px,收起时宽度为45px
  • 头部与内容区域:flex盒子的子元素。设置为flex: 1,宽度由外层包裹器flex盒子和侧边栏宽度决定。
  • 项A、项B:flex盒子容器的子元素,水平显示,外层被flex布局的盒子容器包裹

看似是一个很平常的flex布局,但是收起来的时候却出现了横向滚动条,当时有点懵逼,所有元素都实现应用了box-sizing: border-box;的设置,怎么还会有这个情况,而且只是出现在侧边栏收起的时候才会。

排查过程中,首先想到的就是:是不是内容区域撑开了,导致总宽度增加了,一看还真是的:

外层盒子容器的宽度为1920px,侧边栏为45px,内容区域为1876px,计算结果:45 + 1876 - 1920 = 1,多了一个像素,TMD还有这奇葩情况。

好吧,再深入内容区域,发现内容区域内并没有自己溢出宽度,而是由保持充满外层宽度:

一行,也就是图中'fs-dashboard-row'类的元素的宽度为1856px,row里面水平排布的flex子元素项A和项B为923px宽度,刚好为1856。也就是说是这里超出了1px。为什么呢?

我试着把项A和项B的计算完成后的宽度设置为922.5px,也就是让一行row的宽度为1845px,但是我去改写的时候浏览器报了个错在控制台,重点来了:

报错信息:

For elements with box-sizing: border-box, only absolute content area dimensions can be applied.

翻译过来就是:

对于具有框大小的元素:边界框,只能应用绝对内容区域维度。

然后笔者再次双击修改width的宽度的地方,再退出修改,宽度就被还原回了923px。

也就是说,如果给一个盒子元素设置了box-sizing: border-box,它的宽度必须是一个整数,而在笔者的这个情况下,项A和项B被flex要实现宽度正真均分的话,是922.5px,但flex布局分配给它们的却是923px,各多出了0.5px,最后就多出了1px,而导致了横向滚动条的出现。罪魁祸首就是flex布局在计算宽度的时候,按照box-sizing: boder-box属性的这个原则,把922.5px的宽度给向上取整了。

一口老血喷了出来。因为我们不敢保证用户会把浏览器宽度拉伸成偶数还是奇数,拉伸成奇数就没这个问题,拉伸成偶数就有这个问题,我们单纯地在代码中调整宽度是没用的。

好吧,怎么解决这个问题,

笔者用了个最暴力的办法,给出现横向滚动条的那一层盒子元素设置overflow-x: hidden。

一个box-sizing: border-box和felx混合使用中遇到的问题的更多相关文章

  1. Vagrant 手册之 box - 创建基础 box

    原文地址 有一种特殊的 box 被称为"base box".这些 box 包含 Vagrant 运作所需的最低限度,通常不是对现有的 Vagrant 环境("base b ...

  2. 如何拥有一个自己的Vagrant box

    这是一个关于Vagrant的学习系列,包含如下文章: Vagrant入门 创建自己的Vagrant box 用Vagrant搭建Jenkins构建环境 用Vagrant和Ansible搭建持续交付平台 ...

  3. Qt学习笔记-制作一个计算器-对话框Message Box

    在做计算器的前提先做一个加法器. 设计界面. 在点击计算的时候,获取前两个输入框中的数据相加后显示在第三个输入框. toInt是将字符串转换为数字.number静态函数是将数字转化为字符串. 加法器已 ...

  4. 制作一个vagrant的win7 box

    准备: 1.win7镜像文件 2.vagrant安装文件 3.virtual box安装文件 步骤: 1.先在本机上安装virtualbox和vagrant,本机为win7,安装虚机也为win7 2. ...

  5. [UE4]Vertical Box结合Horizontal Box创建出类似微信的经典手机界面

    头部标题,中部为自动填充,底部为一个Horizontal Box,其中的“通讯录”文字比较宽,需要设置Size.Fill=1.5

  6. 解读SSD中的Default box(Prior Box)

    1:SSD更具体的框架如下: 2: Prior Box 缩进在SSD中引入了Prior Box,实际上与anchor非常类似,就是一些目标的预选框,后续通过softmax分类+bounding box ...

  7. 【移动适配】一个像素的border怎么实现

    一个像素里复杂纷扰的世界 文 | 啃先生 Mar.3rd.2016  首发于微信公众号(啃先生) 上一篇发了<[移动适配]移动Web怎么做屏幕适配> 壹 | Fisrt 在CSS的世界里P ...

  8. 关于line box,inline box,line-height,vertical-align之间的关系

    1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...

  9. [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

    实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...

随机推荐

  1. 【BZOJ 4010】 [HNOI2015]菜肴制作

    Description 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为 ...

  2. BZOJ_2738_矩阵乘法_整体二分

    BZOJ_2738_矩阵乘法_整体二分 Description 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. Input 第一行两个数N,Q,表示矩阵大小和询问组数: 接下 ...

  3. BZOJ_3687_简单题_bitset

    BZOJ_3687_简单题_bitset Description 小呆开始研究集合论了,他提出了关于一个数集四个问题: 1.子集的异或和的算术和. 2.子集的异或和的异或和. 3.子集的算术和的算术和 ...

  4. BZOJ_1864_[Zjoi2006]三色二叉树_树形DP

    BZOJ_1864_[Zjoi2006]三色二叉树_树形DP 题意: 分析:递归建树,然后DP,从子节点转移. 注意到红色和蓝色没有区别,因为我们可以将红蓝互换而方案是相同的.这样的话我们只需要知道当 ...

  5. Django运算表达式与Q对象/F对象

    Django运算表达式与Q对象/F对象 1 模型查询 概述: 1 查询集:表示从数据库中获取的对象的集合 2 查询集可以有多个过滤器,通过 逻辑运算符连接 3 过滤器就是一个函数,基于所给的参数限制查 ...

  6. JVM学习记录-类加载的过程

    类的整个生命周期的7个阶段是:加载(Loading).验证(Verification).准备(Preparation).解析(Resolution).初始化(Initialization).使用(Us ...

  7. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

  8. Linux三剑客-grep || awk || sed

    grep是一个强大的文本搜索工具 命令格式: grep [option] pattren file -a  将二进制文档以文本方式处理 -c  计算找到的符合行的次数 -i  忽略大小写 -n  顺便 ...

  9. ES 集群上,业务单点如何优化升级?

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! ES 基础 ES 集群 ES 集群上业务优化 一.ES 基础 ...

  10. 用C语言做一个横板过关类型的控制台游戏

    前言:本教程是写给刚学会C语言基本语法不久的新生们. 因为在学习C语言途中,往往只能写控制台代码,而还能没接触到图形,也就基本碰不到游戏开发. 所以本教程希望可以给仍在学习C语言的新生们能提前感受到游 ...