#container{padding-top:50%;//保证金顶部：50%；background-color:pink;}当div中没有??内容时，实现一个宽高1:2的小矩形。填充顶部：50%；表示元素的高度是宽度的一半。填充顶部：100%；可以实现宽高为1:1的小矩形。（改为padding:50%`，实现了一个宽高1:1的小矩形，因为50%+50%=100%；）从盒模型可以看出，虽然内容高度为container为0，由于Withpadding与内容宽度一致，整体视觉效果好像被拉长了。使用方法：padding-top用于设置元素的纵横比；当父元素的宽度发生变化时，该元素将保持其自身固定的纵横比。4.对于大多数应用来说，布局并不要求有固定的比例，但是有一个例外，就是图片，因为图片的原始大小是固定的。在传统的定宽布局中，我们会为图片设置特定的宽高值，以保证我们图片所占的区域是稳定的；但是在移动端或者响应式开发的情况下，图片最终的宽度很小。可能不确定。这时候需要的不是设置图片的固定尺寸，而是设置比例。为了保持图片的纵横比不变，即保持原来的尺寸比例不变，元素的高度必须随元素自适应变化。对于复杂的布局，如果图片的宽度不是固定自适应的，我们通常会想到这样一个取巧的做法，就是只设置图片的宽度，比如img{width:100%;}，图片高度不限。图片的内容是用来展开的，这样图片所占的高度会从0变为计算出的高度，视觉上会有明显的元素跳跃，代码层面会有布局重新计算。即使图片加载速度很快，容器在图片加载前后也会有一个变形过程，也就是俗称的“闪烁”。如果图片加载不出来，整体布局会更加难看。所以还是需要限制图片的高和宽，但同时要保证宽度自适应。为子元素/伪元素设置margin/padding以扩展容器由于添加子元素违反HTML语义，因此建议使用伪元素（:after）来实现此解决方案。