纯CSS实现自适应正方形

.placeholder{width:100%;height:100vw;}实现效果优点：简洁方便缺点：不兼容浏览器解决方案二：设置垂直padding来展开容器在CSS盒模型中，一个容易被忽略的是margin和padding的百分比值计算.按照规定，margin和padding的百分比值是相对于父元素宽度的宽度来计算的。由此可以发现，只需要在元素的垂直方向设置一个padding值，设置为与宽度相同的百分比即可创建自适应正方形：.placeholder{width:100%;padding-bottom:100%;}来实现此时的效果一切看起来都很正常，我们来试试往容器中添加内容：咦？身高是怎么溢出来的？我们看此时的盒子模型：如图所示，内容区域占据了38px的高度。为了解决这个问题，我们可以将容器的高度设置为0：.placeholder{height:0;}这种方案简洁明了，兼容性好；但是除了填充内容后的问题，还有可能出现max-高度不收缩：DEMO，所以第三种方案来了：方案三：利用伪元素的margin(padding)-top来扩展容器方案二中，我们使用百分比值的padding-bottom属性来扩展容器的内部空间，但是这样做会导致元素上设置的max-height属性失效：失效的原因在于max-height属性只对高度有限制，也就是说，它只会对元素的内容高度起作用。那么我们是否可以使用子元素来扩展内容部分的高度，使max-height属性生效呢？让我们试试：.placeholder{width:100%;}.placeholder:after{content:'';显示：块；保证金顶部：100%；/*边距百分比是相对于父元素的宽度计算的*/}刷新页面，嗯？为什么什么也没有？这就涉及到margincollapse的概念。由于容器和伪元素在垂直方向塌陷，所以并没有出现我们想象中的展开父元素的高度。处理方法是在父元素上触发BFC：.placeholder{overflow:hidden;}注：如果在垂直方向使用padding扩展父元素，则不需要触发BFC来实现效果OK，父元素撑起来了，我们再试试，设置max-height:完美！什么？你说在元素内部添加内容时高度会溢出？来人，把这个内奸拖出去喂狗！对于这样的情况，可以将内容放在一个独立的内容块中，使用绝对定位来消除空间占用。结语以上是我目前想到的三种制作自适应方块的方案，丢掉了CSS3中的视口相对单位，主要是利用margin和padding相对于父元素的宽度来计算的百分比值来制作宽度和高度相等，适应视口宽度的正方形。如果需求是做一个相对视口高度自适应的正方形，估计只能用vh单位了~转自：纯CSS实现自适应正方形