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