Layout 不可思议（一）—— CSS 实现自适应的正方形卡片

最近被一个布局问题给难住了，枉我一向自称掌握最好的前端技能是 CSS，写完博客就得敷脸去

需求是实现一个自适应的正方形卡片，效果如下：

顺便（开个坑）写个系列，总结那些设计精妙的布局结构

 

 

本次页面的 HTML 结构如下：

<div class="row clearfix">
    <div class="col fl">
        <div class="card"></div>
    </div>
    <div class="col fl">
        <div class="card"></div>
    </div>
</div>

 

套路一、垂直 padding + 定位

在 CSS 中，margin 和 padding 的百分比数值总是相对于父元素的宽度来计算

利用这个特性，只要将 padding-top 或者 padding-bottom 设置为与 width 相同的百分比，再将 height 设为 0，最后通过定位实现自适应的正方形盒子

.col {
  width: 25%;
  height:0;
  padding-bottom: 25%;  
  position: relative;
}
.card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #C0C0C0;
}

有很多文章都提到过，因为设置了 height: 0; 导致 max-height 无效

通常会使用伪类元素来解决这个问题，但同时也会有高度溢出的情况

如果采用我上面的 html 结构，只需要将 max-height 写到 .card 上，就不会有这个问题，也就用不着伪类元素了

 

 

套路二、新单位 vw

参考文章：http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

除了常用的 px，em，rem 之外，CSS 中还有很多单位，比如 pt，ch，vh，vmin 等

这里提到的单位 vw 是一个 相对于浏览器内部的可视区域（viewport）宽度的单位（敲黑板，不是父元素）

vw 等于 viewport 宽度的 1%，假设浏览器内部宽度为 1000px，那么 1vw = 10px

 

然后 CSS 代码就很简单了

.col {
  width: 25%;
  height:25vw;
}
.card {
  width: 100%;
  height: 100%;
  border: 1px solid #C0C0C0;
}

 

 

套路三、用透明图片扩充内容

极不推荐！！

大学的时候见过这种布局，这种套路是黔驴技穷的表现，了解一下就行

在 HTML 结构中添加一个  <img> 标签

<div class="col fl">
    <img src="" alt="正方形透明图片" width="100%"/>
    <div class="card"></div>
</div>

.col {
  width: 25%;
  height: 0;
  position: relative;
}
.card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #C0C0C0;
}