Day16

2023.2.8

等高布局：指多列子元素在父元素中实现等高视觉效果的布局技巧

实现要点：

1. 多列
2. 每一列的背景不同
3. 其中任意一列变高，其他列同步变高

方法一：

原理：利用padding和margin负值相互抵消

Padding提前延伸背景 margin负值抵消padding的占位

优缺点：

1. 需要合理控制padding和margin的负值
2. 可以实现任意列的等高布局

方法二：

原理：盒子的层层嵌套，利用内盒子高度变化，外盒子的高度也会同步变化

步骤：

1. 准备3个负责背景的盒子，在html结构上要嵌套结构（需要实现几列效果就准备几个背景盒）
2. 将内容盒放在最内层的背景盒子里面bg3（内容盒放在最后一个背景盒里）
3. 最内层的背景盒子bg3清浮动
4. 将bg3和bg2移动，相对定位，形成三列背景效果
5. 将内容盒移动到对应的背景处即可（利用margin）
6. 大盒子溢出隐藏overflow：hidden；

优缺点：

1. 结构复杂
2. 可以创建任意列
3. 方便通过百分比实现自适应

圣杯布局：

1. 三列（不一定等高）
2. 改变加载顺序，优先加载中间列（结构：中左右，显示效果：左中右）
3. 中间列自适应，两侧列固定

步骤：

1. 外盒子左右固定padding值，预留左右两侧盒子的位置
2. Center盒宽度为100%，左右连两个盒子固定宽度
3. 结构上要浮动
4. 移动.left通过margin-left：-100%，配合相对定位left：-左盒子宽度，移动掉左侧预留的位置
5. 移动.right通过margin-left：-右盒子宽度，配合相对定位，left：右盒子的宽度，移动到右侧预留的位置

双飞翼布局：

步骤：

1. centerBox与left和right要在一排
2. centerBox固定宽度100%，left和right固定宽度
3. centerBox内部的center盒子，不固定宽度，通过左右的margin预留出左右两个盒子的位置
   4、移动left盒，通过margin-left：-100%；实现
4. 移动right盒，通过margin-left：-右盒子宽度；实现

滑动门：