在面试中，我们经常会遇到CSS中两端宽度固定大小，中间自适应问题
问题：
编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为100px，right宽度为200px，main处在中间，宽度自适应
解决方法：
圣杯布局
页面DOM结构如图：
设置外层div内边距，使中间div宽度为100%，将所有节点设置浮动方向为left，利用margin-left负值将left元素拉到
父元素content起点，在设置相对定位将left拉到父元素padding起始处，同理right元素也是
双飞翼布局
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。
页面布局如下
双飞翼布局不用设置外层父元素，主要设置在中间元素，设置center-content元素宽度100%，内层center1元素设置margin，其他就不多说，直接上style
Flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
页面布局：
CSS样式：