1. px與視口
2. %
3. **查詢
4. rem
5. vm/vh
當瀏覽器的寬度或者高度發生變化時，通過百分比單位，通過百分比單位可以使得瀏覽器中的元件的寬和高隨著瀏覽器的變化而變化，從而實現響應式的效果。
為了了解百分比布局，首先要了解的問題是：
css中的子元素中的百分比（%）到底是誰的百分比？
直觀的理解，我們可能會認為子元素的百分比完全相對於直接父元素，height百分比相對於height，width百分比相對於width。
當然這種理解是正確的，但是根據css的盒式模型，除了height、width屬性外，還具有padding、border、margin等等屬性。
那麼這些屬性設定成百分比，是根據父元素的那些屬性呢？
此外還有border-radius和translate等屬性中的百分比，又是相對於什麼呢？
下面來具體分析。
1. 百分比的具體分析
（1）子元素height和width的百分比
子元素的height或width中使用百分比，是相對於子元素的直接父元素，width相對于父元素的width，height相對于父元素的height。比如：
="parent"
>
="child"
>
<
/div>
<
/div>
子元素的top和bottom如果設定百分比，則相對於直接非static定位(預設定位)的父元素的高度，
同樣子元素的left和right如果設定百分比，則相對於直接非static定位(預設定位的)父元素的寬度。
（3）padding
子元素的padding如果設定百分比，不論是垂直方向或者是水平方向，都相對於直接父親元素的width，而與父元素的height無關。
舉例來說：
.parent
.child
（4）margin
跟padding一樣，margin也是如此，子元素的margin如果設定成百分比，不論是垂直方向還是水平方向，都相對於直接父元素的width。這裡就不具體舉例。
（5）border-radius
border-radius不一樣，如果設定border-radius為百分比，則是相對於自身的寬度，舉例來說：
="trangle"
>
<
/div>
<
!--設定border-radius為百分比：--
>
.trangle
2. 百分比單位布局應用
百分比單位在布局上應用還是很廣泛的，這裡介紹一種應用。
比如我們要實現乙個固定長寬比的長方形，比如要實現乙個長寬比為4:3的長方形,我們可以根據padding屬性來實現，因為padding不管是垂直方向還是水平方向，百分比單位都相對于父元素的寬度，因此我們可以設定padding-top為百分比來實現，長寬自適應的長方形：
="trangle"
>
<
/div>
<
!--設定樣式讓其自適應：--
>
.trangle
3. 百分比單位缺點
如果全部使用百分比單位來實現響應式的布局，有明顯的以下兩個缺點：
（1）計算困難，如果我們要定義乙個元素的寬度和高度，按照設計稿，必須換算成百分比單位。
（2）從小節1可以看出，各個屬性中如果使用百分比，相對父元素的屬性並不是唯一的。 比如width和height相對于父元素的width和height，而margin、padding不管垂直還是水平方向都相對比父元素的寬度、border-radius則是相對於元素自身等等， 造成我們使用百分比單位容易使布局問題變得複雜。
自適應布局
請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...
CSS布局 自適應布局
網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...
右邊自適應 左右布局 css左右自適應布局
如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...