文章关键字 ‘百分比’

CSS百分比padding实现比例固定图片自适应布局

2017年08月17日,星期四

对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的……

阅读全文…

从height:100%不支持聊聊CSS中的“死循环”

2016年09月16日,星期五

大家应该都知道,如果元素没有格式化的高度值,子元素的height百分比高度是不起作用的,常见的就是height:100%无效,而宽度就没有此问题,所以,新人经常会提出的一个问题是:“为何我的div设置了height:100%却没有效果?”

不知道大家有没有思考过这样一个问题。

然后,有同行就提出了这么一个看似很合理的解释,就是,“假如父元素height:auto且没有其他格式化高度,子元素支持height:100%,则很可能会出现高度死循环”。

看似合理,实际上这种解释是表面的,错误的……

阅读全文…

CSS <position>值简介理解background百分比定位

2015年03月16日,星期一

MDN上<position>值解释是:一种CSS数据类型,2D坐标空间,用来设置相对盒子的坐标。

我们经常使用的background-position的值就是<position>值,最近刚介绍的object-position的值也是<position>值。

<position>值支持1~4个值,可以是具体数值,也可以是百分比,也可以是……

阅读全文…

小tip:FireFox下文本框/域百分比padding bug解决

2012年11月13日,星期二

我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况。对于文本框或者文本域,光标最好距离左侧边缘有一定的间距。
但是,如果只考虑文本框本身(父标签无其他特殊处理),这一套在流体环境下是行不通的,因为固定的padding数组无法让文本框永远100%自适应外部的宽度,至少非现代浏览器下是如此!
目前而言,好的解决之道是……

阅读全文…

对html与body的一些研究与理解

2009年09月18日,星期五


最近一直构思着写篇关于html标签的文章,虽说之前处理过html标签,也解决过不少棘手的问题,但是对其理解还不是很透彻,很多原理都是自己推测的。
在网上查阅相关资料想整合一下相关的信息,发现深入探讨html,与body的文章很少,只有在蓝色理想看到一篇“一叶千鸟”的这篇“正确认识html与body”有点价值,其余都没有什么相关的好文章。
而这里,我要讲述的与上面的交集并不多,主要是讲述一些关于html与body的各种表现,我自己的一些解释,以及处理相关问题的些经验,很多应该是网上很少提及的东西,内容不算深奥,我尽量截图展示,表述清晰,希望对大家能够有所帮助。

阅读全文…