css实现自适应正方形的多种方法实现
方案一:CSS3 vw 单位
CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视口宽高中较小的一个的百分比单位,同理 vmax是相对当前视口宽高中较大的一个的百分比单位。
#square{
width:%;
height:30vw;
background:red;
}
办公资源网址导航 https://www.wode007.com
类比:纯CSS实现自适应浏览器高度的正方形只需要设置width的单位为vh即可。
优点:简洁方便。
缺点:浏览器兼容不好。
方案二:设置垂直方向的padding撑开容器
由于margin, padding 的百分比数值是相对父元素的宽度计算的,只需将元素垂直方向的一个padding值设定为与width相同的百分比就可以制作出自适应正方形了。
但要注意,仅仅设置padding-bottom是不够的,若向容器添加内容,内容会占据一定高度,为了解决这个问题,需要设置height: 0。
#square{
width:%;
height:;
padding-bottom: %;
background:red;
}
优点:简洁明了,且兼容性好。
缺点:会导致在元素上设置的max-width属性失效(max-height不收缩)。
方案三:利用伪元素的 margin(padding)-top 撑开容器
max-width属性失效的原因是:max-width属性只限制于width,也就是只会对元素的 content width起作用。
解决方法是:用一个子元素撑开content部分的高度,从而使max-height属性生效。
首先需要设置伪元素,其内容为空,margin-top设置为100%。
但要注意,若使用垂直方向上的margin撑开父元素,仅仅设置伪元素是不够的,这涉及到margin collapse外边距合并的概念,由于容器与伪元素在垂直方向发生了外边距合并,所以撑开父元素高度并没有出现,解决方法是在父元素上触发BFC:设置overflow:hidden。
#square{
width:%;
background:red;
overflow:hidden;
max-width:200px;
}
#square:after{
content: '';
display: block;
margin-top:%;
}
若使用垂直方向上的padding撑开父元素,则不需要触发BFC。
#square{
width:%;
background:red;
max-width:200px;
}
#square:after{
content: '';
display: block;
padding-top:%;
}
最新文章
- 在ubuntu中启用ftp服务
- Android 每隔3s更新一次title
- 连接Oracle数据库的时候报了“Got minus one from a read call”
- JavaWeb 后端 <;十三>; 之 监听器 JSTL国际化
- Java 第四周总结
- Android 问题
- Springboot security cas源码陶冶-FilterSecurityInterceptor
- mybatis中的缓存问题
- Window中的Docker 拉取Mysql镜像 并在本地Navicate链接
- SED命令用法整理
- POJ 2603
- sql的执行流程
- python之旅:迭代器、生成器、面向过程编程
- SQL---->;mySQl安装for mac
- GameObject.Active
- centos7下搭建sphinx全文检索引擎
- jquery仿jquery mobile的select控件效果
- go——标准命令
- java编程:将数组的第一个为最大第二个为最小以此类推
- KNN cosine 余弦相似度计算