html 中如何画一个正方形,你真的会用CSS画正方形吗？ · Issue #2 · jiangshanmeta/jiangshanmeta.github.io · GitHub...

用CSS写一个正方形，对于前端工作者来说是一个再常见不过的需求了，通常情况下，你可能会写出这样的代码：width:200px;height:200px; 这是最简单的实现了，然而，如果我想要一个300px的正方形呢？或许你会写出如下代码：width:300px;height:300px; 。那么，如果我想要一个400px的正方形呢？你可能会写出以下代码：width:400px;height:400px; 同时开始准备和产品以及美术来一场大战。

显然，一个爱敲键盘的程序员不是好程序员，想偷懒就要对上面的需求进行抽象。上面的需求可以抽象为如何写一个自适应的正方形。

CSS经常被一些大神认为不是一种编程语言，然而，我们可以假装CSS是一门编程语言。好了，现在CSS是一门编程语言了，那它会有什么？ this，一门编程语言没有this你还怎么面向对象编程。如果CSS有this的话，这里就可以这么写了height:this.width,感觉上挺自然的然而，CSS并不支持this，虽然有带有this味道的currentColor属性。

在CSS中，有一些相对单位，比如em，rem，vw，vh之类的，能否用这些做点尝试。比如，一个div，宽度是50vw，那么高度也是50vw就好了，算是一种自适应的正方形的实现方案吧。然而，宽高都要基于视口，稍微复杂点的场景就解决不了了，比如，这个div的宽度根本就不是根据视口来的你想怎么办。vw和vh的解决方案由于不够健壮而排除，em/rem的实现也类似，宽度和高度都要写死 是多少em/rem，大家都有同样的问题，所以也排除了。

到现在为止，我们都是想尽办法设定高度，但是这个思路真的合适吗？需求是写一个自适应的正方形，谁说一定要在height上折腾，比如，可以用padding撑开这个盒子啊。这一要说一点知识性的东西了，padding值如果取值为百分比，则该百分比是相对于父元素的宽度进行计算的，比那个height的百分比不知道高到哪里去了(height的百分比是相较于父元素的高度的)，所以以下代码就可以实现一个响应式的正方形width:25%;padding-bottom:25%;然而还不够优雅，还是要针对不同的场景写不同的padding-bottom。

给大家安利一本我最近在看的书 CSS Secrets，其中讲到伪元素能做很多事情。那这里伪元素能做什么呢？伪元素如果是块级元素，其宽度就是父元素宽度(不考虑padding和border)，那么伪元素的padding如果为百分比，就是参考于我们正在处理的这个盒子，所以我们有了阶段性的成果：

.auto-square::before{

content:'';

display:block;

padding-bottom:100%;

}

于是一个自适应的正方形就这么写出来了。那怎么向这个自适应正方形填内容？我的解决方案是对内容进行绝对定位定位到正方形里。相应的，CSS代码也要加点东西

.auto-square{

position:relative;

}

在绘制自适应正方形的基础上，我们做些拓展。同样的思路可以应用到绘制长宽比一定的矩形上，毕竟正方形只是矩形的一个特例，我们只需要控制padding-bottom的具体比例就可以了。这个也可以用在绘制自适应圆形上，毕竟只需要加上border-radius:50%，上demo)