百分比的细节－－容器大小篇

因为屏幕能显示的最小单位是1px，对于像773*50%=386.5这样带数字的长度必须有所取舍。

测试页面，一些浏览器的截图标宽度也在里面

IE：按四舍五入的方式计算。

Firefox：计算后的值忽略小数部分，但会把多出的长度分配给里面的各元素。 如果只多出1px，比如2*386=772，剩下的1px会到其中一个元素，优先分配第一个元素，像773px分配给两个50%时得到的是：387px和386px，分配给四个25%时得到的是：194px、193px、193px和193px； 而对于多出几个px，如773*33.3%=257.409，773*33.33%=257.6409，由于忽略掉的小数不一样，分配的原则也不一样，找不到相关资料，以下是我的猜想，三个元素的，按四舍五入的方式分配，四舍的优先分配给两边，五入的优先分配给前边两个，对于分配给三个元素以上的，多出部分自由分配，我找不到规律，但第一个一定会分配到。

FF还有一些奇怪的地方。Firefix测试页面。1024宽度不会自动分配，也许是因为外层也是带小数的，导致1px没分配，接着测试Firefox

Opera & Safari2：计算时忽略百分比的小数部分，计算后的值忽略小数部分，如果里面的元素大于计算后的宽度不会导致后面的元素换行。

Netscape & Mozilla：计算后忽略小数，多出部分有点类似Firefox，但多出部分是比透明显示，而且比较奇怪，比如33.33%*3=99.99%　小于100%，但却大于100%，奇怪的浏览器，还好使用的人不多，不用过于在意这两个浏览器。

测试没完成，有兴趣的朋友帮忙测试，单独的测试页，有知道原因的朋友讲一下下

赞 (0)

相关推荐

  • 百分比的细节－－容器大小篇

    因为屏幕能显示的最小单位是1px,对于像773*50%=386.5这样带数字的长度必须有所取舍. 测试页面,一些浏览器的截图标宽度也在里面 IE:按四舍五入的方式计算. Firefox:计算后的值忽略小数部分,但会把多出的长度分配给里面的各元素. 如果只多出1px,比如2*386=772,剩下的1px会到其中一个元素,优先分配第一个元素,像773px分配给两个50%时得到的是:387px和386px,分配给四个25%时得到的是:194px.193px.193px和193px: 而对于多出几个px

  • C# Winform 实现控件自适应父容器大小的示例代码

    在日常开发中经常遇到控件不能随着父容器大小的改变而且自动改变控件的所在位置和大小.以下是实现的代码 /// <summary> /// 根据父容器实现控件自适应大小位置 /// </summary> /// <param name="control">所需自适应大小位置的控件</param> private void ChangeLocationSizeByParent (Control control) { //记录父容器大小,来判断改

  • Javascript 一些需要注意的细节(必看篇)

    1.使用 === 代替 == JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践. "如果两边的操作数具有相同的类型和值,===返回true,!==返回false."--JavaScript:语言精粹 然而,当使用==和!=时,你可能会遇到类型不同的情况,这种情况下,操作数的类型会被强制转换成一样的再做比较,这可能不是你想要的结果. 2.Eval == 邪恶 起初不太熟悉时,"eval"让我们能够访问Jav

  • vue实现拖动调整左右两侧容器大小

    vue实现拖动调整左右两侧容器大小

    本文实例为大家分享了vue实现拖动调整左右两侧容器大小的具体代码,供大家参考,具体内容如下 页面布局 <template>     <a-layout class="width-auto" id="product">         <div class="content">             <div id="left" class="left">  

  • js里取容器大小、定位、距离等属性搜集整理

    element.clientWidth //元素的实际宽度,不算边框 element.clientHeight //元素的实际高度,不算边框 element.offsetWidth //元素的实际宽度,加上边框 element.offsetHeight //元素的实际高度,加上边框 element.scrollWidth //这个说法很多,我测试下来应该是元素实际宽度-滚动条的宽度 element.scrollHeight //这个说法很多,我测试下来应该是元素实际高度-滚动条的高度 eleme

  • c++中容器之总结篇

    c++中容器之总结篇

    C++中的容器大致可以分为两个大类:顺序容器和关联容器.顺序容器中有包含有顺序容器适配器. 顺序容器:将单一类型元素聚集起来成为容器,然后根据位置来存储和访问这些元素.主要有vector.list.deque(双端队列).顺序容器适配器:stack.queue和priority_queue. 关联容器:支持通过键来高效地查找和读取元素.主要有:pair.set.map.multiset和multimap. 接下来依次对于各种容器做详细的介绍. 一.顺序容器 1.顺序容器定义 为了定义一个容器类型

  • Docker容器磁盘占满的一些情况汇总

    前言 本文是我自己最近遇到的两种情况,后续有新发现再补充. 参考文档:https://docs.docker.com/engine/reference/commandline/dockerd/ 应用日志过多 默认情况下,每个 Docker 容器都有 10G 的存储空间,当超出该大小时,容器就会出现问题. 可以参考官方文档 dm.basesize 参数的说明来修改默认的容器大小: 指定创建基本设备时要使用的大小,这会限制图像和容器的大小.默认值为10G.请注意,精简设备本质上是"稀疏的"

  • C++(STL库)之顺序容器vector的使用

    一.特点 ①总的来说:可变大小数组.支持快速随机访问.在尾部之外的位置插入或删除元素可能很慢 ②元素保存在连续的内存空间中,因此通过下标取值非常快 ③在容器中间位置添加或删除元素非常耗时 ④一旦内从重分配,和原vector相关的指针,引用,迭代器都失效.内存重分配耗时很长 二.头文件.using声明 头文件:#include <vector> using声明:using std::vector; 三.初始化 vector<T>  v1; ==>v1是一个空的vector ve

  • c++容器list、vector、map、set区别与用法详解

    c++容器list.vector.map.set区别 list 封装链表,以链表形式实现,不支持[]运算符. 对随机访问的速度很慢(需要遍历整个链表),插入数据很快(不需要拷贝和移动数据,只需改变指针的指向). 新添加的元素,list可以任意加入. vector 封装数组,使用连续内存存储,支持[]运算符. 对随机访问的速度很快,对头插元素速度很慢,尾插元素速度很快 新添加的元素,vector有一套算法. map 采用平衡检索二叉树:红黑树 存储结构为键值对<key,value> set 采用

  • vue监听dom大小改变案例

    需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下) 类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下.但是我用vue的watch监听$refs.swiper.offsetwidth失败了!!!!但是宽度确实是在改变的很费解,先说一下解决方法把 1.使用element-resize-detector var elementResize

随机推荐