css设置高度=宽度，响应式

做九宫格时遇到的问题

分别使用的float和flex来布局

主要问题在于当宽度自适应时如何让高度等于宽度。

首先想到的是与宽度一样设置高度自适应，如要为每个九宫格设置百分数的高度，要使它有效，则要设置父元素高度，若父元素仍然为百分数则要依次设置每一级的父元素高度，全为百分数的话，最后一级html必须设置height：100%；的百分数高度才有效。

但是，这时不能让高度一直等于宽度，因此采用另外的方式。

由于padding、margin等都是基于本身元素来设置的，可以通过height：0；padding-bottom：（小格子的宽如30%）；来设置，此时就能保证高=宽

再想到若是子格存在子元素会怎样，实验了一下不影响什么

代码：https://github.com/dakeke/responsive--page/tree/master/others/sudoku

demo：https://dakeke.github.io/responsive--page/others/sudoku

转载于:https://www.cnblogs.com/kekeximi/p/6489955.html