元素总能保持比例不变。
这种能固定比例的特性什么作用呢？
对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。在传统的固定宽度的布局下，我们会通过给图片设定具体的宽度和高度值，来保证我们的图片占据区域稳固；但是在移动端或者在响应式开发情况下，图片最终展现的宽度很可能是不确定的，例如手机端的一个通栏广告，iPhone7下宽度是375，iPhone7 Plus下是414，还有360等尺寸，此时需要的不是对图片进行固定尺寸设定，而是比例设定。
通常有如下一些实现：
1. 固定一个高度，然后使用background-size属性控制，如下：
.banner {
height: 40px;
background-size: cover;
}
实时效果如下：
可以看到随着宽度的变化，总会有部分图片区域（宽度或高度）无法显示，并不是完美的做法。
2. 使用视区宽度单位vw，如下：
.banner {
height: 15.15vw;
background-size: cover;
}
如果对兼容性要求不是很高，使用vw也是一个不错的做法，至少理解起来要更轻松一点。
但是，如果我们的图片不是通栏，而是需要离左右各1rem的距离，此时，我们的CSS代码就要啰嗦点了，想要保持完美比例，就使用借助CSS3calc()计算：
.banner {
height: calc(0.1515 * (100vw - 2rem));
background-size: cover;
}
如果，图片距离两侧的宽度是动态不确定的，则，此时calc()也捉襟见肘了，但，恰恰是普普通通其貌不扬的padding属性，其兼容性和适应性都一级棒。
3. 使用百分比padding，如下：
.banner {
padding: 15.15% 0 0;
background-size: cover;
}
此时无论图片的外部元素怎么变动，比例都是恒定不变的。
二、CSS百分比padding与宽度自适应图片布局
但是有时候我们的图片是不方便作为背景图呈现的，而是内联的
，百分比padding也是可以轻松应对的，求 是比较固定的，图片元素外面需要一个固定比例的容器元素，例如下面的HTML结构：
.banner元素同样负责控制比例，然后图片填充.banner元素即可，CSS代码如下：
.banner {
padding: 15.15% 0 0;
position: relative;
}
.banner > img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}
效果就达成了！
眼见为实，去年起点中文网手机版诸多页面的通栏广告就都是这么实现的，最终的效果参见下面的gif截图（如果图无法显示，可以评论反馈）：
可以看到，无论屏幕宽度多宽，我们的广告图片比例都是固定的，不会有任何剪裁，不会有任何区域缺失，布局就显得非常有弹性，也更健壮。
————-
其实，我之前一直低估百分比padding的实际应用价值，因为有vw单位的存在，毕竟理解vw看上去要更简单一些，所以，一直就没做相关技巧的介绍。但是，随着图片相关布局处理越来越多，我发现，百分比padding的实用价值要比想象的大，要比vw单位适用场景更多，兼容性更好（百分比特性IE6+支持，图片100%覆盖IE8+支持）。
对于复杂布局，如果图片的宽度是不固定的自适应的，我们通常会想到这么一个取巧的做法，就是只设定图片的宽度，例如：
img { width: 100%; }
此时浏览器默认会保持图片比例显示，图片宽度大了，高度也跟着一起变大；图片宽度小了，高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。
然而这种技巧有一个非常不好的体验问题，那就是随着页面加载的进行，图片占据的高度会有一个从0到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。
所以对图片高宽进行同时约定还是有必要的，但是同时要保证宽度自适应，似乎有点难度。记住，如果遇到这种需求场景，没有比百分比padding布局更好的做法！
您可以狠狠地点击这里：需要保持图片比例且宽度自适应padding实现demo:
()
缩小浏览器宽度可以看到不同宽度下的布局效果，Gif效果截图如下：
此demo难点就是图片自适应同时保持比例，以及页面刷新的时候没有布局稳固不晃动，其核心HTML和CSS代码如下：
.works-item-t {
padding-bottom: 133%;
position: relative;
}
.works-item-t > img {
position: absolute;
width: 100%; height: 100%;
}
可以看到，当把垂直方向padding值只使用padding-bottom表示的时候，如果没有text-align属性干扰，
元素的left:0;top:0是可以省略的。
对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。
但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比4:3，此时，CSS垂直方向百分比就666了，如下：
.img-box {
padding: 0 50% 66.66% 0;
}中企动力：网站建设动态页面和静态页面的区别！
[闽南网]
运营过网站或者参与网站制作的人都了解，静态页面和动态页面是两种常见的页面形式。对于网站的制作与运营，应该选择哪种形式好呢?今天分析这个问题。
一、静态页面与动态页面的区别
1、静态页面就是设计者把页面上所有东西都设定好、做死了，然后放上去，不管是谁在任何时候看到的页面内容都是一样的，一成不变(除非手动修改页面内容)。
静态 html 页面文件，可以直接用本地的浏览器打开。
2、动态页面的内容一般都是依靠服务器端的程序来生成的，不同人、不同时候访问页面，显示的内容都可能不同。
网页设计者在写好服务器端的页面程序后，不需要手工控制，页面内容会按照页面程序的安排自动更改变换。
二、两者各有所长，看你怎么使用
静态页面的制作相对简单，只要能够熟悉掌握相关的制作软件的操作，就能够在很短的时间内制作出来，不过网站后期的维护会比较麻烦一些。
动态页面使用的是后台管理的方式，这样在后期更新内容的时候会更方便，就算是没有编程技术的也可以轻松的管理网站。
最早的一些网站采用的都是静态的形式，动态的网站是后来才出现的。 静态网站不仅制作简单，展现形式也很简单，就是在后期的维护会比较麻烦，更新网站上的一些信息的时候，需要掌握专门的技术和软件才能够操作。
出现动态网站的时候，大多数人回选择这种制作方法，因为可以方便我们后期维护，可以节省我们很多的时间和人力投入。
但是，如果网站要做优化使用静态页面比较好，不建议大家直接使用动态页面，那样不利于网站被收录，影响关键词的排名。
这个时候可以在后台生成静态，前台的页面以静态的形式来展示，这也是现在很多网站采取的一种形式，也就是行业内常说的——伪静态页面。
所以这两项技术本身不存在高低之分，如何使用取决于你对于网站类型和运营的需求。
※本文为推广信息，解释权归广告主所有。
