父级宽高不定, 子级元素要宽高都是父级元素宽度的一半, 即一个正方形
1. 利用 padding 来实现
- .parent {
- width: 200px;
- height: 400px;
- display: flex;
- jsutify-content: center;
- align-items: center;
- background: aqua;
- }
- .child {
- width: 50%;
- // height: 50%; 面试的时候一开始回答了这个, 难受, 搞混了 margin-top,padding-top 和 height 的区别, 前两者是都相对与父级的宽度, 最后一个是相对于父级的高度
- height: 0;
- padding-top: 50%; // padding 有颜色, 而且计算起来是根据父级的宽度来计算的
- background: red;
- }
2. 利用伪类来实现
- .parent {
- width: 200px;
- height: 400px;
- background: red;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .child {
- /* height: 0; 不能设置高度为 0 了, 这样高度撑不开 */
- width: 50%;
- background: yellow;
- overflow: hidden; /* 这里主要是形成一个 BFC 块, 不然 child 会随着伪类一起向下, 就不能实现伪类撑开 child 的效果了 */
- }
- .child:after {
- content: '';
- display: block;
- margin-top: 100%; /* 这里实现撑开 child,margin-top 也是相对于父级的宽度 */
- }
3. 使用 vw 和 vh 作为单位
来源: http://www.jianshu.com/p/232dcbaea8a5