一个box-sizing: border-box和felx混合使用中遇到的问题
之前在项目中遇到一个布局上很趣的问题(也可能是笔者才疏学浅,哈哈)。布局大概是这样的:
- 外层包裹器:采用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混合使用中遇到的问题的更多相关文章
- Vagrant 手册之 box - 创建基础 box
原文地址 有一种特殊的 box 被称为"base box".这些 box 包含 Vagrant 运作所需的最低限度,通常不是对现有的 Vagrant 环境("base b ...
- 如何拥有一个自己的Vagrant box
这是一个关于Vagrant的学习系列,包含如下文章: Vagrant入门 创建自己的Vagrant box 用Vagrant搭建Jenkins构建环境 用Vagrant和Ansible搭建持续交付平台 ...
- Qt学习笔记-制作一个计算器-对话框Message Box
在做计算器的前提先做一个加法器. 设计界面. 在点击计算的时候,获取前两个输入框中的数据相加后显示在第三个输入框. toInt是将字符串转换为数字.number静态函数是将数字转化为字符串. 加法器已 ...
- 制作一个vagrant的win7 box
准备: 1.win7镜像文件 2.vagrant安装文件 3.virtual box安装文件 步骤: 1.先在本机上安装virtualbox和vagrant,本机为win7,安装虚机也为win7 2. ...
- [UE4]Vertical Box结合Horizontal Box创建出类似微信的经典手机界面
头部标题,中部为自动填充,底部为一个Horizontal Box,其中的“通讯录”文字比较宽,需要设置Size.Fill=1.5
- 解读SSD中的Default box(Prior Box)
1:SSD更具体的框架如下: 2: Prior Box 缩进在SSD中引入了Prior Box,实际上与anchor非常类似,就是一些目标的预选框,后续通过softmax分类+bounding box ...
- 【移动适配】一个像素的border怎么实现
一个像素里复杂纷扰的世界 文 | 啃先生 Mar.3rd.2016 首发于微信公众号(啃先生) 上一篇发了<[移动适配]移动Web怎么做屏幕适配> 壹 | Fisrt 在CSS的世界里P ...
- 关于line box,inline box,line-height,vertical-align之间的关系
1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...
- [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式
实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...
随机推荐
- 【BZOJ 4010】 [HNOI2015]菜肴制作
Description 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为 ...
- BZOJ_2738_矩阵乘法_整体二分
BZOJ_2738_矩阵乘法_整体二分 Description 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. Input 第一行两个数N,Q,表示矩阵大小和询问组数: 接下 ...
- BZOJ_3687_简单题_bitset
BZOJ_3687_简单题_bitset Description 小呆开始研究集合论了,他提出了关于一个数集四个问题: 1.子集的异或和的算术和. 2.子集的异或和的异或和. 3.子集的算术和的算术和 ...
- BZOJ_1864_[Zjoi2006]三色二叉树_树形DP
BZOJ_1864_[Zjoi2006]三色二叉树_树形DP 题意: 分析:递归建树,然后DP,从子节点转移. 注意到红色和蓝色没有区别,因为我们可以将红蓝互换而方案是相同的.这样的话我们只需要知道当 ...
- Django运算表达式与Q对象/F对象
Django运算表达式与Q对象/F对象 1 模型查询 概述: 1 查询集:表示从数据库中获取的对象的集合 2 查询集可以有多个过滤器,通过 逻辑运算符连接 3 过滤器就是一个函数,基于所给的参数限制查 ...
- JVM学习记录-类加载的过程
类的整个生命周期的7个阶段是:加载(Loading).验证(Verification).准备(Preparation).解析(Resolution).初始化(Initialization).使用(Us ...
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
- Linux三剑客-grep || awk || sed
grep是一个强大的文本搜索工具 命令格式: grep [option] pattren file -a 将二进制文档以文本方式处理 -c 计算找到的符合行的次数 -i 忽略大小写 -n 顺便 ...
- ES 集群上,业务单点如何优化升级?
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! ES 基础 ES 集群 ES 集群上业务优化 一.ES 基础 ...
- 用C语言做一个横板过关类型的控制台游戏
前言:本教程是写给刚学会C语言基本语法不久的新生们. 因为在学习C语言途中,往往只能写控制台代码,而还能没接触到图形,也就基本碰不到游戏开发. 所以本教程希望可以给仍在学习C语言的新生们能提前感受到游 ...