CSS画正方形（学于jiangshanmeta）

资料：jiangshanmeta的github

提要：说到CSS画正方形，想必很多人都会以为height:100px;width:100px;不就是个正方形了吗？是的我也是这么认为，但是这篇文章提到的是画一个自适应的正方形（若要看详细的去点击上述链接）

我就不废话，直接上效果图

图中我练习了3个不同造型的图形编写，具体实现的关键代码就是

.frm::after{

    content:'';

    display:block;

    padding-bottom:100%;

}

//利用了伪元素，使其自适应画出图形

先列举下整个HTML的内容：

HTML部分

每块一一对应。

先说第三块，第三块！（因为这个比较简单好理解，代码就不复制啦，一定要自己动手打一遍！！）

第三块

margin:auto 这个我想不需要说了，水平居中的作用

width:200px 这个只是针对于伪元素中的正方形的大小

你也可以这样写：

调整background的位置

OK,这个写完后，你随意拉大拉小浏览器的框，会发现，咦不对呀，这个正方形没变呀，如果有这样的想法的人咳咳其实和最初的我一样，仔细想想你便可以知道，因为父级的宽度定死了，和浏览器页面窗口大小无关

想有个直观的感受那么你可以这么改变代码

调动你的浏览器大小看样式把~

第三块(frm2)讲完了，那么我们第二块其实就可想而知，加一个border-radius:50% 圆就不是出现了嘛，我只是多加一个内容块

第二块

那么我们接下来说说第一块的CSS：

第一块CSS内容

大部分的解释在图中一并展现，只不过1和2两个红标标出来的是什么呢？咳咳，其实笔者刚刚开始也只是见过不曾了解过，那么我们去找找对应文档看看。

background-clip:（想看具体样式也可以去MDN处看看 MDN:background-clip）

MDN处查询得到的结果

currentColor:(额，笔者文笔有限，自行去理解，css88）

我给个简单的解释把，这个取值和其所在的对应的color有关，说的不准轻喷

上述两个讲完，还有1个就是min-content又是啥？

这个笔者找了个我个人认为解释的不错的一篇文章，其将fill-available、max-content、min-content、fit-content四个CSS3自适应的关键词详细的解释了，我就不多解释了。

点这！点这！

OK，第一块自己打一遍，并且清楚了上述的内容，了解说到的几个关键词，我觉得肯定理解了。

有错误艾特我！告诉我是不是有地方理解不对！谢谢！