css写宽为30%的正方形

浏览数：22 / 时间：2015年06月09日

如何用纯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为法二

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style com log src http html it la class style com log src http html it la

相关文章

随机文章

您可能还喜欢

您可能还喜欢