最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS等比列放大缩小效果(宽度和高度)
时间:2014-03-22 编辑:简简单单 来源:一聚教程网
那么它的实际值都是相对父元素的宽度来算百分数的值,包括 padding-bottom 和 padding-top 也是如此,所以我们这里宽度可以设置为40%。由于我们这里box的宽度是100%,而高度没有告诉,所以不能直接设置高度值来取得效果,我可利用padding-bottom来代替height值,即如上所示,把height设为0,而把padding-bottom设为80%,这样我们就可以看到效果了,你可以随意拖放浏览器窗口大小,都是等比列缩小放大的哦这个也算是自适应屏幕的一个小方法吧》。。
html代码
代码如下 | 复制代码 |
|
css代码
代码如下 | 复制代码 |
.item { width:40%; height:0; padding-bottom: 80%; background-color:#f00; float:left; margin:10px 5px;; } |
-
上一个: CSS3一个非常漂亮滑动切换效果
-
下一个: div任意角度旋转解决方法
相关文章
- 解决css中父div高度不随子div高度变化的方法 04-18
- ie6不支持css max-heigth 最大高度解决办法集 03-02
- css 容器高度100%及相对高宽 06-10
- CSS技巧:解决div列高度自适的2种常用方法 01-26
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31