css不设宽度正方形

CSS的一个很有趣的特性是它允许我们用非常简单的代码创造各种形状的布局。

 .square {
   background-color: red;
   height: 0;
   padding-bottom: 100%;
 }

实际上，我们只需要将padding-bottom的百分比值设置为和容器的宽度相同，就可以创建一个等边正方形了。这是因为padding值是在元素的宽高范围内计算的，而不是在元素内容的宽高范围内计算的。

这个技巧的确非常有用，因为它可以让我们以一种非常简单和灵活的方式创建出正方形容器，而不需要使用复杂的HTML或JavaScript代码。但是，需要注意的是这种方法只能创建出正方形，如果需要创建其他形状的容器，就需要使用其他技巧了。

总之，这种方式是CSS中的一种有用技巧，可以用于创建各种形状的布局。不需要给元素指定宽度值，只需要使用padding-bottom属性和一个百分比值即可创建出等边正方形。这个技巧虽然简单，但是却非常实用，是我们在实际开发中常常会用到的。