四种方法实现圣杯布局

圣杯布局 就是实现两边宽固定，中间宽自适应

圣杯布局 第一种： padding值

第一步：大盒子中包含三个子盒子
第二步：大盒子宽度100%，相对定位且设置左右padding值
第三步：左右两个子盒子固定宽高，且绝对定位到两边
第四步：中间盒子设置宽100%（自适应）
代码如下：

圣杯布局 第二种：magin值

第一步：大盒子中包含三个子盒子
第二步：大盒子宽度100%，相对定位
第三步：左右两个子盒子固定宽高，且绝对定位到两边
第四步：中间盒子不要设置宽，设置左右magin值
代码如下：

圣杯布局 第三种：flex布局

第一步：大盒子中包含三个子盒子
第二步：大盒子宽度100%，display：flex；
第三步：左右两个子盒子固定宽高
第四步：中间盒子 设置 flex：1； （占据大盒子剩余空间）
代码如下：

圣杯布局 第四种： calc函数

第一步：大盒子中包含三个子盒子
第二步：大盒子宽度100%，相对定位
第三步：左右两个子盒子固定宽高，且绝对定位到两边
第四步：中间盒子设置宽 calc（100% - 两边子盒子宽度和） 绝对定位到挨着左边盒子/右边盒子
代码如下：