浅谈css双飞翼布局和圣杯布局

在CSS布局中，双飞翼布局和圣杯布局都是常见的两列或三列布局方法，尤其适用于网页的头部、尾部和主体内容的布局。这两种布局方式都能够实现两侧固定宽度，中间自适应宽度的布局需求，即两边的列宽度固定，而中间的列宽度能够根据浏览器窗口的大小动态变化。 首先来看圣杯布局，它的基本思想是在不使用额外标签的情况下，通过浮动、负边距和相对定位来实现布局。在圣杯布局中，中间的列会使用100%的宽度，而两侧的列则通过设置合适的负边距，利用浮动元素的左移或右移来定位到页面的左右两侧。在圣杯布局中，由于中间列浮动并填满了左右两侧的空间，左右两侧列需要通过设置相对定位和负边距来调整位置，确保它们能够正确地显示在中间列的两边。 圣杯布局的DOM结构通常由三个部分构成：头部(header)、主体内容区(body)和尾部(footer)。在主体内容区中，有三个子部分：中间的主内容区(main)和两侧的侧边栏(left和right)。这种布局方式虽然在宽度的适应性上非常灵活，但在实际使用时，需要注意宽度的变化以及中间内容被左右两列覆盖的问题。 为了克服圣杯布局中宽度控制复杂和布局局限性的问题，淘宝UED提出了双飞翼布局。双飞翼布局和圣杯布局的基本思路类似，但在布局细节上做了一些简化。双飞翼布局通过在主内容区内再嵌套一个div元素（内层div常被称为"inner"），使得主内容的布局更加灵活，从而避免了使用相对定位。在这种布局中，两侧列通过负边距实现浮动定位，而主内容区则通过浮动和外层的"inner" div来保证内容不被两侧列所覆盖，同时也能实现中间内容的自适应宽度。 双飞翼布局的DOM结构主要是在原有的圣杯布局基础上，对于中间的主内容区进行了一定的调整。主内容区内的内层div元素包裹了实际的主内容，这样可以使得主内容在视觉上占据整个主列的宽度，同时避免了因为外层主列元素浮动导致的内容隐藏问题。 在实际的前端开发工作中，选择双飞翼布局还是圣杯布局往往取决于项目需求、页面内容的复杂程度以及开发者的偏好。这两种布局方式对于早期响应式网站的布局设计有着非常重要的影响，如今在现代CSS框架和布局技术的推动下，虽然出现了更多样化的布局方式，但它们依旧在某些特定场景下发挥着重要的作用。例如，它们在不支持Flexbox和Grid布局的老旧浏览器中，依然是实现复杂布局的有效手段。