如何使用CSS绘制一个响应式的矩形

发布时间:2016-12-31 7:23:17编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"如何使用CSS绘制一个响应式的矩形 ",主要涉及到如何使用CSS绘制一个响应式的矩形 方面的内容,对于如何使用CSS绘制一个响应式的矩形 感兴趣的同学可以参考一下。

1 <div class="square"></div>

我们的做法就是使用伪元素的 padding-top: 100% 来撑开元素本身。

因为 pading-top 与 padding-bottom 的百分比取值来自于元素的宽度,所以,设置值为100%就实现了我们想要的功能。

实现更多的功能

想要实现更多比例的形状,其实就是修改 ::before 中的 pading-top 或者 padding-bottom 的值即可。

 1 // 16: 9
 2 .square::before
 3   padding-top: (9 / 16 * 100%)
 4 
 5 // 4: 3
 6 .square::before
 7   padding-top: (3 / 4 * 100%)
 8 
 9 // 1: 2
10 .square::before
11   padding-top: 200%

当然,上边的实现都只是一个简单的矩形,如果你的矩形里边还要有一些内容的话,需要给元素添加以下几个属性:

1 .content
2   position: absolute
3   top: 0
4   right: 0
5   bottom: 0
6   left: 0
1 <div class="square">
2   <div class="content">
3     Awesome
4   </div>
5 </div>

要注意的有以下几点:

  1. IE7-不支持
  2. 元素不要设置 height 以及 overflow: hidden 

参考资料

w3-padding


上一篇:C语言 - pthread
下一篇:linux 段错误常见处理方法

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款