网页:百分比的细节——容器大小篇

百分比|网页

  因为屏幕能显示的最小单位是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%,奇怪的浏览器,还好使用的人不多,不用过于在意这两个浏览器。

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

时间: 2024-10-08 14:11:47

网页:百分比的细节——容器大小篇的相关文章

百分比的细节--容器大小篇_经验交流

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

CSS网页设计时关于字体大小的设计

在设计网络应用时,您必须决定如何编辑字体.使用CSS时存在大量选项,每个开发者都有自己的喜好.本文主要讨论字体大小和网络应用内的操作.在开发网络应用时,没有比外观更重要的事情了.所以,如果发现设计人员十分关注字体及字体大小,我不会感到奇怪! 字体大小 CSS2规范根据长度--水平和垂直尺寸--来定义字体.这个长度为一个数值,前面可能带一个可选的加(+)或减(-)标记符.另外,该数值后可能有一个可选的单位标识符. 另外,CSS2规范定义了两个单位类型:绝对单位和相对单位.绝对值指定单位,而相对单位

django-如何在网页中显示词语的大小是按照词语出现的次数展示

问题描述 如何在网页中显示词语的大小是按照词语出现的次数展示 我用的是django来开发html网页的.现在有一个问题:比如有100个关键词需要展示,这100个关键词每个关键词还有相应的出现频度.比如:home出现100次,apple:3次,....等等.现在展示关键词的时候,需要按照出现频度大的,让这个关键词就变大,出现频度小的,关键词就展示地小.显然home的字体需要展示地,比较大,apple字体需要展示地比较小.各位朋友有什么好方法吗?关键词不局限于两个,出现的次数也可能都不相同. 解决方

webview加载html网页如何缩小至屏幕大小

问题描述 webview加载html网页如何缩小至屏幕大小 需要用webview加载一个html页面,但是显示在手机上时太大,而且还可以左右滑动,怎么样让它缩小至整个屏幕大小. 解决方案 WebView如何加载HTML网页webView加载指定的网页 加载解析的HTML 解决方案二: http://www.zhihu.com/question/20038590/answer/16789331

容器大小的改变以及容器操作可能使迭代器失效、vector对象的容量变化

1 改变容器的大小 我们可以使用resize来增加或缩小容器,与往常一样,array不支持resize.如果当前大小大于所要求的大小,容器后面的元素会被删除:如果当前大小小于新大小,会将新元素添加到容器后部:  list<int> ilist(10,42);   //10个int:每个的值都是42 ilist.resize(15);   //将5个值为0的元素添加到ilist的末尾 ilist.resize(25,-1);  //将10个值为-1的元素添加到ilist的末尾 ilist.res

网页设计理论:细节让优秀的作品脱颖而出

文章简介:网页设计中最常用到的设计细节. 前一段时间在企业管理界流行一句格言叫"细节决定成败".企业管理当然不是我们这里要讨论的主题,但是,把这句话放在网页设计当中的确是颠扑不破的真理.我们的眼睛和感觉总是非常敏锐的,即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品.虽然他说不出来为什么这件东西比那些都好,但是直觉会告诉他他自己喜欢哪一个.如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是"很大一部分原因是因为优秀的设计作品总是

网页设计CSS中文字大小的pt、px的区别

先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 在网页设计css中,经常用到字体,而字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个"点"有多长多大么?可以画的很小,也可以很大.如

手机互动网页11大技术点创意篇突破总结

  一.硬件背景(重要) 易观智库的一个报告指出,2013年中国移动互联网网民规模达6.52亿,其中70.1%的用户使用安卓手机,26.1%的用户使用苹果手机. 高收入网民中,有一半以上都是用IOS系统,这个比重在低收入群体中只占17.71%.中低收入网民多使用安卓系统的手机,占比分别为66.67%和76.09%. 先提出中国移动互联网网民结构是为了让大家在开始项目构思的时候,就要清楚面对的群体是什么,在项目的进展中遇到问题时,结合时间和效果,能够有所抉择. 这个问题很重要,就像我们在PC网页提

网页设计之细节注意

  一.网页的平衡感 当一个网页是大小失衡,左右失衡,或者是上下失衡的时候自然就会产生一种错觉.根据这种自然原理,如果我们改变一件好的原作品的各部份的位置,再与原作品进行比较,最后就能很容易的发现其中平衡感的构成原理了. 二.网页大小的对比 网页大小差别少,就给人的感觉较沉着温和的感觉,大小的差别大,给人的感觉较鲜明,而且具有较强的对比和冲击力.大小关系为造形要素中最受重视的一项,几乎可以决定意象与调和的关系. 三.网页页面对称 以一点为起点,向左右同时展开的形态,称为左右对称形,应用对称的原理