css实现元素自顺应屏幕大小的思绪有哪些
发布时间:09/01 来源:未知 浏览:
关键词:
在实现元素自顺应屏幕大小此前,我们先来介绍一个css知识点。
元素的margin和padding属性的值(不管是上下边距还是摆布边距)假如设定为百分比,都是以宽度为基准运算的。
也就是说,在已知宽高比的状况下,css虽然不克不及肯定height的值,但是可以肯定padding-top等属性的值。
实现思绪:
1、算出宽高比(高 / 宽),并设定为padding-top的值,height设定为0(由padding-top撑起元素的高度)。
2、此时元素的实际内容被挤到了下方,所以用绝对定位改动其位置。
(视频教程引荐:css视频教程)
实现代码:
html代码:
<div class="ac_coupon-wrap"> <div class="ac_coupon-content"> <!-- 内容 --> </div> </div>
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实现元素自顺应屏幕大小的思绪是啥的具体内容,更多请关注百分百源码网其它相关文章!