CSS布局问题

两栏布局

指将页面内容分成左右两个部分，通常一侧宽度固定，另一侧自适应12。常见实现方式如下：

• 浮动布局1：左栏设置固定宽度并左浮动，右栏设置width: auto以及相应的margin-left值（数值为左栏宽度）。或者右栏设置overflow: hidden触发 BFC，使其不与左栏重叠。
• 绝对定位布局2：父级设置position: relative，左栏设置固定宽度并position: absolute定位在左侧，右栏设置width: 100%和margin-left（数值为左栏宽度）。
• Flex 布局1：父级设置display: flex，左栏设置固定宽度，右栏设置flex: 1，可自动填充剩余空间。
• Grid 布局：父级设置display: grid，通过grid-template-columns属性定义列宽，如grid-template-columns: 200px 1fr，实现左栏固定 200px，右栏自适应。

三栏布局

指将页面内容分成左中右三部分，一般左右两栏固定宽度，中间一栏宽度自适应1。常见实现方式如下：

• 浮动布局1：左栏左浮动并设固定宽度，右栏右浮动并设固定宽度，中间一栏设置左右margin值（数值为左右栏宽度），并且在 HTML 结构中处于最后。
• 绝对定位布局1：父级设置position: relative，左右栏分别通过position: absolute定位在左侧和右侧并设固定宽度，中间一栏设置margin-left和margin-right（数值为左右栏宽度）。
• Flex 布局1：父级设置display: flex，左右栏设置固定宽度，中间一栏设置flex: 1实现自适应。
• 圣杯布局1：三栏都设置左浮动，中间一栏设置width: 100%，左右栏通过设置margin-left负值和相对定位，移动到中间栏的左右两侧，同时中间栏设置左右padding为左右栏留出空间。
• 双飞翼布局1：与圣杯布局类似，不同的是在中间栏的div中新增一个div，通过给这个新增的div设置margin偏移为左右两栏留下空间。