>[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、等分布局