【Css】关于正方形的问题

        我们让一个标签呈现出正方形的样式，那是再简单不过的事情了，最先想到的是：

                display: inline-block;

                height: 300px;

                width: 300px;

                background-color: blue;

        没错，我们只需要简单地定义成长宽一样。但是有一天，被要求自适应（等比例缩放）设计界面时，标签的宽度已知是父级的10%，这个时候要写正方形就不是那么顺利了，似乎不利用JS就很难完成这个任务。我们尝试换位思考一下，标签是父级的10%，那我们可以手工算一下父级的宽度10%赋值给高度，于是便兴冲冲地去改代码，发现父级的宽度又是一个适应宽度，它是相对与View（视窗）的60%，这就很尴尬了，这个时候高度该怎么赋值才能成为正方形呢？

        这个时候，我们的Css3新特性就要登场了，那就是vw单位，vw单位是相对于View（视窗）的一个百分比单位，其中w表示Width（宽度），举个例子，假设视窗宽度为x，那么10vw == 10% * x，这个单位的出现，就是为了方便快速的自适应布局，而不是一味的寻求Js解决问题。有了这个单位，这个正方形也变得简单了，我们思考，标签宽度是父级10%，而父级宽度是View的60%，这个时候我们只需要解出标签相对View的宽度是多少，直接用vw单位带入到高度，就可以得出。

        有些人不会解这个方程？！算了，简单的解答一遍：假设View的宽度是x，则标签父级宽度是60% * x，因标签相对父级宽度10%，带入得出标签相对视窗的宽度为60% * x * 10% == 6% * x，单位用vw。

        

正方形