CSS布局技巧|青训营
实践记录以及工具使用练习：汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。
典型的三栏布局方式
- 圣杯布局/ 双飞翼布局
- 圣杯布局使用padding控制两侧边距，双飞翼布局使用margin控制两侧边距。
- DOM结构：中、左、右
- 使用浮动定位，统一向左浮动使其DOM总的位置处在同一行，中间列宽度width：100%自适应。
- 圣杯布局：最外层盒子设置内边距（left,right被挤压至下一行），left使用margin-left：-100%向左移动父元素宽度，再使用相对定位，margin：-100px向上移动自身高度。right使用margin-right：-100px向右移动自身宽度，浮动至上一行。
- 双飞翼布局：（center多一层DOM结点，解决了圣杯布局中当中间列宽度小于左右宽度时布局变形的问题）使用center内层的盒子inner设置外边距，为左右列空出位置。左侧left设置margin-left：-100%偏移父盒子的宽度，右侧right设置margin-left：100px将自身位置向左偏移自身宽度。
- float布局
- DOM结构：左、右、中
- 使用float让左侧元素浮动至左边，右侧元素浮动至右边，center设置外边距，为左右浮动的盒子留出位置。
- 绝对定位
- flex布局
- DOM顺序：左、中、右
- 最外层盒子设置flex布局，主轴为横向排列，两侧盒子定义宽度，中间盒子flex：1自动填充剩余位置。
- Grid网格布局
- display:grid
- 控制列宽：grid-template-colums:100px,auto,100px
