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

css写宽为30%的正方形

时间:2015-03-20 15:52:00      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

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

css写宽为30%的正方形

标签:

原文地址:http://www.cnblogs.com/MissBean/p/padding.html

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