码迷,mamicode.com
首页 > Web开发 > 详细

【笔记】css 实现宽度自适应屏幕 高度自适应宽度

时间:2017-08-17 14:39:59      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:code   宽度   科技   ott   笔记   tom   pad   而且   适应   

 如果说宽高自适应那么大家可能会想到

div{
    width: 100%;
    height: 100%
}

但是如果我要自适应的同时还要变成矩形呢?(高度和宽度相等而高度不能写死)

那就要实现如下的黑科技了

div{
    width: 100%
    height: 0
    padding-top: 100% /* padding 设置为100% 的时候会等于其容器的宽度 */

}

根据w3c 标准,当padding值为 100% 时 其相等于元素自身的宽度,所以把padding-top 或者 padding-bottom 为 100% 的时候,元素的高度便会被pading 撑开,而且!它的高度等于它自身的宽度!! 黑科技啊

【笔记】css 实现宽度自适应屏幕 高度自适应宽度

标签:code   宽度   科技   ott   笔记   tom   pad   而且   适应   

原文地址:http://www.cnblogs.com/stitchgogo/p/7380757.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!