>[danger]注意點： 1、padding的百分比值，是父元素寬度with的百分比（無論是水平的還是豎直的padding） 2、margin的百分比值，是父元素寬度with的百分比（無論是水平的還是豎直的padding） 3、with的百分比值是父元素with的百分比 4、height的百分比值是父元素heith的百分比 5、border的百分比是無效的，必須是像素px值 ``` div { width: 700px; height: 100px; background-color: orange; margin: 0 auto; padding-left: 100px; } div p{ color:white; width: 50%;//350px+padding寬度 height: 50%;//50px+padding寬度 padding-left: 10%;//70px padding-top: 10%;//70px background-color: blue; } ``` 利用padding的百分比值，是父元素寬度with的百分比的性質，我們可以寫出寬高比固定的容器，用于鋪設圖片(不會變形了) 1\. 高度定死,寬度自適應 2\. 對于大的輪播圖等,寬度100%自適應 3\. 對于小圖標揮著文本,一般都是固定寬高大小 流式布局的缺點: 對于大屏幕來說,用戶體驗并不是特別好,有些布局元素會顯得很長 解決方案: rem布局(寬高自適應) # **[經典的流式布局](https://www.jianshu.com/p/4a6e5162e4ee)** ## 1、左側固定,右側自適應 ## 2、右側固定左側自適應 ## 3、兩邊固定中間自適應(圣杯布局)-bfc實現 overflow: hidden; 觸發了bfc，觸發了bfc的盒子不與浮動的盒子重疊 ## 4、等分布局