响应式布局中的方案之百分比布局

1、百分比（流式）布局

定义：当浏览器的宽高发生改变时，通过百分比单位，可以使用浏览器中的组件的宽高随着浏览器的变化而变化，从而实现响应式布局。

注意点：使用百分比就要注意这个百分比是谁的百分比：

1. 子元素的宽高百分比是直接父元素的宽高
2. 定位中的top、bottom、left、right等都是相对于直接非静态定位的父元素的宽高
3. padding如果设置百分比，无论是垂直方向还是水平方向，都是相对于直接父级元素的width，与父元素的height无关
4. margin与padding一样，设置完百分比之后，都是直接父元素的宽的百分比，与高度无关
5. border-radius不一样，如果设置百分比，则是相对于自身的宽度，除了border-radius之外还有translate，background-size都是相对于自身的宽度高度

2、百分比单位布局应用

由于padding的值设置成百分比，都是以直接父元素的宽高作为基准，所以可通过padding来实现一个盒子模型以固定宽高比例进行缩放代码如下：

.box {
 height:0px;

width:100%;

padding-top: 75%;

background-color:red;

}

3、百分比单位布局的缺点

1.  计算困难
2. 各个属性使用百分比，相对于父元素的属性并不是唯一的，造成使用百分比单位布局使用分局问题变得复杂

转载于:https://juejin.im/post/5cfb6b9de51d45595319e30b