CSS:利用padding来设置具有固定宽高比的盒子

问题需要总结,知识需要沉淀

实现效果:固定宽高比的盒子

CSS特性:padding-bottom: 56.25%;//设置宽高比为16:9的盒子

依据原理:padding-bottom 规定应该从父元素的padding-bottom继承;但是如果padding-bottom的值设置为百分比,则这个百分比是相对于父元素的宽度而言的。

Sample code:




    
    padding demo
    


    

你可能感兴趣的:(CSS:利用padding来设置具有固定宽高比的盒子)