圣杯布局是目前页面常用的一种布局方式, 而双飞翼布局则是对圣杯做了进一步优化.
更新
[2020-10-29]
- Initial release
[2020-10-30]
- 撰写文章
圣杯布局
特点
- 页面的主要内容区域分为
left、content、right三个部分 left和right, 也就是左侧和右侧区域定宽, 中间内容区content宽度为100%, 且自适应content内容区域要优先渲染
实现
可以分别通过
float、flex的形式实现圣杯和双飞翼布局
实现一: float
float 形式利用的主要原理是: 子元素的 margin(padding) 百分比是以其父级元素的 width 作参考
实现二: flex
双飞翼布局
特点
- 双飞翼布局是对圣杯布局的一个改良