同样的布局效果，在2017年、2021年和2023年有着不同的实现，代码愈发的简洁高效，一起来看看CSS的发展对Web开发的帮助吧。
文章关键字 ‘padding’
CSS高宽不等图片固定比例布局的三重进化
2023年07月20日，星期四CSS百分比padding实现比例固定图片自适应布局
2017年08月17日，星期四对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。在传统的固定宽度的布局下，我们会通过给图片设定具体的宽度和高度值，来保证我们的图片占据区域稳固；但是在移动端或者在响应式开发情况下，图片最终展现的宽度很可能是不确定的……
小tip:FireFox下文本框/域百分比padding bug解决
2012年11月13日，星期二我是流体布局控，经常会遇到文本框以及文本域宽度100%自适应显示的情况。对于文本框或者文本域，光标最好距离左侧边缘有一定的间距。
但是，如果只考虑文本框本身（父标签无其他特殊处理），这一套在流体环境下是行不通的，因为固定的padding数组无法让文本框永远100%自适应外部的宽度，至少非现代浏览器下是如此！
目前而言，好的解决之道是……
CSS流体(自适应)布局下宽度分离原则
2011年02月28日，星期一
之前曾作有“页面重构鑫三无准则之无宽度准则”一文，属于流体布局系列中的偏理论性的文章，本文也是这种性质的，可谓是“无宽度准则”一文的延续。本文主要内容就是介绍了何为宽度分离原则，为什么要宽度分离，即宽度分离的好处，然后通过京东商城和淘宝网的例子展示了宽度分离的使用并分析了利弊。本文虽然没有demo页面，但是其中的理论性文字还是比较精彩的，配以必要的截图和源代码展示。总之，希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用