css写宽为30%的正方形

最新推荐文章于 2021-08-04 08:33:47 发布

weixin_30399797

最新推荐文章于 2021-08-04 08:33:47 发布

阅读量155

点赞数

原文链接：http://www.cnblogs.com/MissBean/p/padding.html

版权

如何用纯css写一宽为30%的正方形，用到了padding属性；

会不会恍然大悟呢？

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style type="text/css">
 7     /*div{
 8       background: #c6c;
 9       margin: 0;
10       padding-bottom: 30%;
11     }*/
12     /*div{
13       background: #c6c;
14       margin: 0;
15       padding: 15% 0;
16     }*/
17    #dd::after{
18     content: "";
19     display: block;
20     padding-top: 100%;
21    }
22 
23   </style>
24 </head>
25 <body>
26   <div style="width:30%; background:red;" id="dd"></div>
27   
28 </body>
29 </html>

7-11为法一

12-16为法二

转载于:https://www.cnblogs.com/MissBean/p/padding.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30399797

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css写宽为30%的正方形

如何用纯css写一宽为30%的正方形，用到了padding属性；会不会恍然大悟呢？ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 ...
复制链接

扫一扫