css实现元素自顺应屏幕大小的思绪有哪些
发布时间:09/01 来源:未知 浏览:
关键词:
在实现元素自顺应屏幕大小以前,我们先来介绍一个css见识点。
元素的margin和padding属性的值(不管是高低边距还是摆布边距)要是设定为百分比,都是以宽度为基准盘算的。
也就是说,在已知宽高比的状况下,css虽然不克不及肯定height的值,但是可以肯定padding-top等属性的值。
实现思绪:
1、算出宽高比(高 / 宽),并设定为padding-top的值,height设定为0(由padding-top撑起元素的高度)。
2、此时元素的现实内容被挤到了下方,所以用绝对定位转变其位置。
(视频教程举荐:css视频教程)
实现代码:
html代码:
css代码:
.ac_coupon-wrap { height: 0; padding-top: 15.16%; position: relative; .ac_coupon-content { position: absolute; top: 0; width: 100%; height: 100%; background-size: cover; } }
举荐教程:css迅速入门
以上就是css实现元素自顺应屏幕大小的思绪有哪些的细致内容,更多请关注 百分百源码网 其它相干文章!