# 純css實現正方形 在處理移動端頁面時，我們有時會需要將banner圖做成與屏幕等寬的正方形以獲得最佳的體驗效果，那么應該怎么使用純 CSS 制作出能夠自適應大小的正方形呢？ ## 方案一：CSS3 vw 單位 CSS3 中新增了一組相對于可視區域百分比的長度單位 `vw`, `vh`, `vmin`, `vmax`。其中 vw 是相對于視口寬度百分比的單位，`1vw = 1% viewport width`， vh 是相對于視口高度百分比的單位，`1vh = 1% viewport height；`vmin 是相對當前視口寬高中 較小 的一個的百分比單位，同理 vmax 是相對當前視口寬高中 較大 的一個的百分比單位。該單位瀏覽器兼容性如下：  利用 vw 單位，我們可以很方便做出自適應的正方形：  * 優點：簡潔方便 * 缺點：瀏覽器兼容不好 ## 方案二：設置垂直方向的padding撐開容器 在 CSS 盒模型中，一個比較容易被忽略的就是 margin, padding 的百分比數值計算。按照規定，margin, padding 的百分比數值是相對 父元素寬度 的寬度計算的。由此可以發現只需將元素垂直方向的一個 padding 值設定為與 width 相同的百分比就可以制作出自適應正方形了： ```css .placeholder?{ ??width:?100%; ??padding-bottom:?100%; } ``` 這時一切看起來都很正常，我們試著給容器內增加內容：  咦？高度怎么溢出了？我們來看這時的盒模型：  如圖中所示，內容區域占據了 38px 的高度。為了解決這個問題，我們可以設置容器的高度為 0： ```css .placeholder?{ ??height:?0; } ``` 這種方案簡潔明了，且兼容性好；但是除了填充內容后會出現問題以外，還有可能碰上max-height不收縮：DEMO，于是第三種方案來了： ## 方案三：利用偽元素的 margin(padding)-top 撐開容器 在方案二中，我們利用百分比數值的 padding-bottom 屬性撐開容器內部空間，但是這樣做會導致在元素上設置的 max-height 屬性失效：  而失效的原因是max-height 屬性只限制于 height，也就是只會對元素的 content height 起作用。那么我們是不是能用一個子元素撐開 content 部分的高度，從而使 max-height 屬性生效呢？我們來試試： ```css .placeholder?{ ??width:?100%; } .placeholder:after?{ ??content:?''; ??display:?block; ??margin-top:?100%;?/*?margin?百分比相對父元素寬度計算?*/ } ``` 一刷新頁面，啊嘞？怎么什么也沒有？ 這里就涉及到`margin collapse`的概念了，由于容器與偽元素在垂直方向發生了外邊距折疊，所以我們想象中的撐開父元素高度并沒有出現。而應對的方法是在父元素上觸發 BFC： ```css .placeholder?{ ??overflow:?hidden; } ``` > 注：若使用垂直方向上的 padding 撐開父元素，則不需要觸發 BFC OK，父元素被撐起來了，我們再試一試設置 `max-height：`  完美！什么？你說元素內部添加內容時高度會溢出？來人，把這個叛徒拖出去喂狗！對于這樣的情況，可以將內容放到獨立的內容塊中，利用絕對定位消除空間占用。 以上就是我目前所想到的三種制作自適應正方形的方案，拋去 CSS3 中的視口相對單位，主要利用到 margin, padding 的百分比數值相對父元素寬度的寬度計算得出 來制作寬高相等、且相對視口寬度自適應的正方形。如果需求是制作相對視口高度自適應的正方形，估計就只能使用 vh 單位了吧~