tags: [css]

引入问题

在我们做项目时，时常会有高度不确定的情况，但经常碰到固定宽高比需求，这时就有点抓虾了。第一想到的可能就是通过 js 来实现了。但是我想说，纯 css 一样可以实现，而且比较简单。

发现问题

例如实现下面这个效果:
image.png

首先我们需要对元素进行分列，这里分为四列，这里我是通过百分比进行的分列，宽度为20%，然后剩余的20%分给方块之间的 margin，这样就实现了四列布局，但是当我们改变这个容器的大小测试时，由于容器的width变化，导致每个小方块的 width 值时大时小，会发现方块并不是按长和宽1比1来的，也就是说不是正方形。

解决问题

那么，怎么才能让长宽比维持在1：1呢，通过css来实现的方法也很多，但是，重要的是要抓住和理解这么一个原理

  1. 当元素的padding或者margin使用的不是具体数值，而是百分比时，元素的margin及padding是相对其父元素的width而言的

从这里我们可以知道，当我们设置 margin或padding 的上下边距（竖直方向）为百分比时，是相对其父元素宽度（水平方向）而言的，这也就建立了长（竖直方向）与宽（水平方向）的关系。

  1. 通过添加填充div撑起小方块高度实现

html代码

  1. <div class="square">
  2.     <div class="fill"></div>
  3.     <div class="content">hello world</div>
  4. </div>

css代码

  1. .square {
  2.   position: relative;
  3.   border: 1px solid blue;
  4.   /* overflow: hidden; */
  5.   width: 20%;
  6.   box-sizing: border-box;
  7. }
  8. .fill {
  9.   padding-bottom: 100%; // 或 margin-bottom: 100%;
  10. }
  11. .content {
  12.   width: 100%;
  13.   height: 100%;
  14.   position: absolute;
  15.   left: 0;
  16.   top: 0;
  17.   border: 1px solid red;
  18.   box-sizing: border-box;
  19. }

效果图：
image.png
2.通过伪元素:after或者:before实现

  1. .square {
  2.   position: relative;
  3.   border: 1px solid blue;
  4.   /* overflow: hidden; */
  5.   width: 20%;
  6.   box-sizing: border-box;
  7. }
  8. .square:before //.square:after  {
  9.   content: '';
  10.   display: block;
  11.   height: 0;
  12.   padding-bottom: 100%; // 或 margin-bottom: 100%;
  13. }
  14. .content {
  15.   width: 100%;
  16.   height: 100%;
  17.   position: absolute;
  18.   left: 0;
  19.   top: 0;
  20.   border: 1px solid red;
  21.   box-sizing: border-box;
  22. }

效果完全相同