在開發過程中，會有這麼乙個情況，需要將乙個盒子的尺寸定義為固定比例，且尺寸需根據檢視的尺寸來進行縮放，也就是響應式，常見的多如有矩形、圓形等。
其實實現這個效果，有多種方法，下面逐一介紹。
相信大家對padding都不陌生，但你知道他是如何取值的嗎？
看一下mdn中對padding給出的解釋：
指定乙個，兩個，三個或四個下列的值：也就是說，給
padding的值設定為百分比時，將根據父容器的寬度來計算。
現在假設我們有乙個div，我們希望它的尺寸能根據body（它的父容器）的寬度來實現固定比例：
class="box">
div>
複製**
.box
複製**
其實這裡的沒錯，就這麼簡單，我們已經實現了文章開頭所展示的效果。padding-bottom換成padding-top也一樣可以實現。
但是我們使用這種方法的時候需要注意幾點：
不需要設定height，最好就是手動設定為0。
子元素需要設定為絕對定位（父容器為相對定位），否則子元素將被padding擠出去。
其它比例
前面實現的是乙個正方形比例的，那如果我想要是16:9的呢？
那我們將根據乙個公式：width * x / y計算，如下：
.box
複製**
視窗是你的瀏覽器實際顯示內容的區域——換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是也就是說，網頁的寬度是vw,vh,vmin和vmax。它們都代表了瀏覽器（視窗）尺寸的比例和視窗大小調整產生的規模改變。
100vw，取一半就是50vw，無論怎麼縮放都是一半，而且這個一半不止可以用在width上。
所以：
class="box">
div>
複製**
.box
複製**
其它比例
跟上面一樣，通過公式可以得到：
.box
複製**
css實現乙個元素高度固定寬度按比例顯示效果
用padding top百分比可以實現寬度固定高度按比例展示，現在的需求是對乙個video 的盒子div高度是固定的，寬度如何按比例展示？解決後效果如圖 紅框標註的即是我在上面高度比例固定的範圍內寬度自適應的效果 css content btn play iframe,object,embed,vi...
CSS簡單實現乙個箭頭
如題，用簡單幾行css 實現乙個箭頭。其實有很多不同的方法可以實現，比如旋轉乙個有背景顏色的div，再把多餘的部門覆蓋掉等等。在這裡記錄一下不同思路。css divhtml 就乙個div 效果圖 解析 關鍵在於對邊框的理解。首先給出乙個div，四周加上邊框，再放大邊框看一看效果 很明顯了，把邊框設定...
純CSS實現乙個氣泡框
實現原理 主要通過css的border color屬性，結合 before after和position absolute實現。1 畫乙個正方形或長方形的盒子，別忘記此盒子需加上position relative，不然之後的絕對定位元素會相對於其餘設了position relative的父級元素或w...