css实现元素自适应屏幕大小的思路是什么


本文摘自PHP中文网,作者V,侵删。

在实现元素自适应屏幕大小之前,我们先来介绍一个css知识点。

元素的margin和padding属性的值(无论是上下边距还是左右边距)如果设置为百分比,都是以宽度为基准计算的。

也就是说,在已知宽高比的情况下,css虽然不能确定height的值,但是可以确定padding-top等属性的值。

实现思路:

1、算出宽高比(高 / 宽),并设置为padding-top的值,height设置为0(由padding-top撑起元素的高度)。

2、此时元素的实际内容被挤到了下方,所以用绝对定位改变其位置。

(视频教程推荐:css视频教程)

实现代码:

阅读剩余部分

相关阅读 >>

如何使用css让背景图片不重复

css怎么隐藏内容

css如何使用rem布局实现自适应效果

css中内联元素可继承的属性有哪些?

css是利用什么xhtml标记构建网页布局

css浮动是什么

css page-break-before属性怎么用

css border-bottom属性怎么用?

html设置图片透明

css中常见的布局有哪些?

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...