CSS 宽度为百分比时，设置元素高度等于其宽度（正方形）

两种实现方法：

1. css
   padding-top padding-bottom ，主要知识点是： padding-top、padding-bottom百分比值是相对包含块的宽度来算的。
   大漠老师这个答案妙啊
   
   效果预览

    body {
      width: 100%;
      font-size: 0;
      text-align: center;
    }

    div {
      display: inline-block;
      width: 20%;
      background: green;
      font-size: 12px;
      position: relative;
      vertical-align: middle;
    }

    div:nth-child(2n) {
      background: orange;
    }

    div:before {
      content: "";
      display: inline-block;
      padding-bottom: 100%;
      width: .1px;
      vertical-align: middle;
    }

    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 4em;
      color: #fff;
    }

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10

当然，可以把用 flex 替代 inline-block。使用 flex 又有点新的问题，我用 flex 时指定了容器的高度，然后 flex-item 的高度就自己膨胀了，，，最后我给 flex-item 一个 margin: auto解决的，也不知道这样对不对。。
其实还可以用 vw 来实现，width 和 height 都用 vw 作为单位。不过这一般适合在移动端使用。还看到有通过 calc 计算宽度来实现的 height: calc(width);，但是兼容很差？骚断腿，chrome 都无效。可能是根本不行吧。。

2. js 。
   一行代码解决：

$(document).ready(function(){
    $('#box1').css('height',$('#box1').css('width'));
})

看起来很简洁又易懂是吧，可还是 css 实现比较好。
通过 js 改变元素的 height 需要在页面渲染完成之后先获取元素的 width，再更改 height，对性能的消耗比较大。
上面是通过 jQuery 来实现的。我想用原生的 js 来实现，可遇到不少问题。
原生 js 如何获取和设置元素的样式？
someElementObject.style？然后我就发现 someElementObject.style.width 为空。
为什么为空啊？找答案时发现一条扎心的老回复。

14年前的扎心回复

其实 style 只是内联样式。
那如何获得实时的 style 呢？最后发现好像只能通过 Window.getComputedStyle()。用法：

let style = window.getComputedStyle(element, [pseudoElt]);

然后设置内联样式 height 为当前 width：

item.style.height = window.getComputedStyle(item, null).width;

就行了。
可如果你改变屏幕大小，还是会出问题。