提要：说到CSS画正方形，想必很多人都会以为height:100px;width:100px;不就是个正方形了吗？是的我也是这么认为，但是这篇文章提到的是画一个自适应的正方形（若要看详细的去点击上述链接）
我就不废话，直接上效果图
图中我练习了3个不同造型的图形编写，具体实现的关键代码就是
.frm::after{
content:'';
display:block;
padding-bottom:100%;
}
//利用了伪元素，使其自适应画出图形
先列举下整个HTML的内容：
每块一一对应。
先说第三块，第三块！（因为这个比较简单好理解，代码就不复制啦，一定要自己动手打一遍！！）
margin:auto 这个我想不需要说了，水平居中的作用
width:200px 这个只是针对于伪元素中的正方形的大小
你也可以这样写：
OK,这个写完后，你随意拉大拉小浏览器的框，会发现，咦不对呀，这个正方形没变呀，如果有这样的想法的人咳咳其实和最初的我一样，仔细想想你便可以知道，因为父级的宽度定死了，和浏览器页面窗口大小无关
想有个直观的感受那么你可以这么改变代码
第三块(frm2)讲完了，那么我们第二块其实就可想而知，加一个border-radius:50% 圆就不是出现了嘛，我只是多加一个内容块
那么我们接下来说说第一块的CSS：
大部分的解释在图中一并展现，只不过1和2两个红标标出来的是什么呢？咳咳，其实笔者刚刚开始也只是见过不曾了解过，那么我们去找找对应文档看看。
background-clip:（想看具体样式也可以去MDN处看看 MDN:background-clip）
currentColor:(额，笔者文笔有限，自行去理解，css88）
我给个简单的解释把，这个取值和其所在的对应的color有关，说的不准轻喷
上述两个讲完，还有1个就是min-content又是啥？
这个笔者找了个我个人认为解释的不错的一篇文章，其将fill-available、max-content、min-content、fit-content四个CSS3自适应的关键词详细的解释了，我就不多解释了。
OK，第一块自己打一遍，并且清楚了上述的内容，了解说到的几个关键词，我觉得肯定理解了。
有错误艾特我！告诉我是不是有地方理解不对！谢谢！
