如何做出双飞翼布局与圣杯布局

说起网站布局，之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样，把各种需要的组件一摆，然后设个宽高给个定位不就行了，有什么麻烦的，确实，一开始在做网站的时候很多时候都是每个元素固定给宽高，很快就做完了，但这样的办法去做网站的话存在一定的缺陷，例如在不同分辨率的设备上显示的话可能与你一开始设计的样式并不相同。为了解决这样的情况，我们现在布局更偏向于把网站做成宽高自适应的布局，另外，在解决了自适应问题以后，我们更侧重去对网站进行一些优化，例如使占用空间较大的图片，段落等内容优先加载，可以提升用户的观看体验。而今天我们的主题，“双飞翼布局”与“圣杯布局”就是一个两边固定，中间宽度自适应，并 双飞翼布局与圣杯布局是两种经典的网页三栏式布局解决方案，它们旨在解决网站在不同屏幕尺寸下保持页面布局的响应性和用户体验的问题。这两种布局方式都实现了两侧栏固定宽度，中间栏宽度自适应，同时确保主要内容优先加载，提供更好的浏览体验。 **圣杯布局（Holy Grail Layout）**： 圣杯布局的核心思想是通过CSS的定位技术，使得页面的左右两侧栏固定宽度，中间栏宽度自适应，并且内容能够优先加载。主要步骤如下： 1. 创建基本的HTML结构，通常包括一个外层容器（box）和三个子元素（left、center、right）。 2. 设置外层容器的边框，左右侧栏的宽度和背景色。 3. 使用浮动布局使所有子元素水平排列，并设置中间栏（center）的宽度为100%以实现自适应。 4. 对左右侧栏使用相对定位，使其向左右平移各自宽度相等的距离，以达到两侧固定的效果。 5. 为外层容器添加内边距（padding），模拟出两侧栏的空间，但不会影响中间栏的宽度。 6. 结果是，中间栏始终保持在视觉上的中心位置，宽度自适应，即使浏览器窗口大小变化也不会影响布局。 **双飞翼布局**： 双飞翼布局是在圣杯布局的基础上，对中间栏内部进行进一步细分，增加一个内部容器（bg），以解决某些特定问题，如清除浮动和内容填充等。主要步骤如下： 1. 保留原有的HTML结构，但在中间栏（center）内新增一个子元素（bg）作为内容容器。 2. 依旧设置好外层容器和子元素的基本样式，如宽度、浮动等。 3. 左右侧栏使用负的margin值，而不是定位，来达到移动到屏幕边缘的效果。 4. 中间的内部容器（bg）设置背景色和高度，宽度自适应，通过margin与左右侧栏保持等距。 5. 这样，中间栏（center）仅作为容器，内容实际位于内部容器（bg）中，避免了内容被遮挡的问题。 双飞翼布局的优势在于，由于内部容器的存在，使得内容区域更加独立，方便管理和调整，同时也解决了圣杯布局中可能出现的清除浮动问题。 总结来说，双飞翼布局和圣杯布局都是为了实现一种灵活且响应式的三栏布局。两者都是通过CSS技术来创造两侧固定宽度，中间自适应的布局效果。尽管它们的方法略有不同，但目的都是为了优化用户体验，特别是在不同设备和分辨率下的表现。选择哪种布局方式取决于具体项目的需求和个人偏好。