【CSS】圣杯布局和双飞翼布局（包括完整代码） |
您所在的位置：网站首页 › 圣杯怎么读 › 【CSS】圣杯布局和双飞翼布局（包括完整代码） |
【CSS】圣杯布局和双飞翼布局（包括完整代码）
|
1. 前言
圣杯布局和双飞翼布局是各类网站经常使用的布局，本文将通过两种布局的 示例图、布局过程、以及 完整代码 进行讲解，如果你想进行练习，可以到我的 github地址 上获取已去除了关键代码的版本，只留下最初始的元素和颜色样式，供你对自己进行强化的练习；同时，你也可以在这里获取到 完整代码。 2. 圣杯布局 2.1 示例图 拥有 header 和 footer，中间是主内容行left 和 right 分别固定了宽度，center 会随着整体布局宽度的变化而进行伸缩
常见的类似圣杯布局如 CSDN 文章页： 1）初始样式 2）把中间部分留出左右元素的宽度 3）margin-right 能让 right 元素被其自身右方的空白元素覆盖上去，相当于自身宽度被消除，从而能浮动到 center 上去 4）left 向左移动 center 的宽度，来移动到 center 所在的行 问：为何设置 margin-left: 100% 就能让 left 顶到 center 的最左边？ 答：由于 center 内边距的存在，现在 left 的真实位置可以理解为如下图，因此向左偏移 center 的宽度，就让能 left 到达 center 的最左边 5）left 再向左移动自身宽度，露出被覆盖的 center 问：为何需要设置 position: relative？ 答：因为 relative 设置，并且设置了 right: 200px 后，元素只会 自身进行移动，不会影响到其他元素。 2.3 完整代码 圣杯布局 body { min-width: 550px; } #header { background-color: #999999; } #middle{ /* 2.把中间部分留出左右元素的宽度 */ padding-left: 200px; padding-right: 150px; } #middle .column{ float: left; height: 200px; } #left{ width: 200px; background-color: #FFFF00; /* 4. 向左移动center的宽度 */ margin-left: -100%; /* 5. 再向左移动自身宽度，露出被覆盖的center块 */ position: relative; right: 200px; } #center{ width: 100%; background-color: pink; } #right{ /* 3.margin-right让右方元素覆盖自身，达到消除自身宽度的目的，浮动到center上面去 */ margin-right: -150px; width: 150px; background-color: #CCCCCC; } #footer { background-color: #999999; } .clearfix:after{ display: table; content: ''; clear: both; } header center left right footer 3. 双飞翼布局 3.1 示例图 left 和 right 固定宽度中间 main 会随着整体布局宽度的变化而伸缩
3.2 设计过程
1）整体设置浮动 2）将 main 左右内边距留出 left 和right 的宽度 3）left 向左偏移 main 的宽度 4）right 向左偏移自身宽度 |
【本文地址】