如何用纯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为法二
原文：http://www.cnblogs.com/MissBean/p/padding.html