由圣杯布局到双飞翼布局引发的思考

最新推荐文章于 2022-08-16 19:48:13 发布

AsynX

最新推荐文章于 2022-08-16 19:48:13 发布

阅读量770

点赞数

分类专栏： Web前端开发文章标签： web 布局 css html 优化

本文链接：https://blog.csdn.net/magic_fx/article/details/44876891

版权

Web前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局的共同点

三栏布局；
主要内容写在前面，最先载入，但布局位于非最前
两侧定宽，分别位于中间主体两侧（外），中间流式（自动宽度）

布局原理

三栏全部采用浮动（float: left）；
HTML内容出现顺序：main、left、right，要求首先载入主体（重要）内容，然后加载侧边栏；
（左）负边距（margin-left）超过元素自身宽度时（第二个浮动元素），即使父元素“容不下”2个浮动元素（第二个浮动元素会换行），第二个浮动元素也会移动到实际显示位置相邻的兄弟元素旁（父元素最右内侧），并占据一定空间，相当于“margin-left可以吃掉兄弟元素的margin”。当margin-left等于父元素宽度时，会移动到父元素最左侧（内侧）

圣杯布局

HTML页面代码

<body>
  <div class="container">
    <div class="main">Main Content</div>
    <div class="left">Left Side</div>
    <div class="right">Right Bar</div>
  </div>
</body>

那么现在的要求是main位于中间，且适应容器宽度，left和right分别位于main两侧，三栏位于同一行。

基本CSS代码

.container {
  color: #fff;
}
.main {
  float: left;
  background-color: #f00;
  height: 200px;
  
  width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */
}
.left {
  float: left;
  height: 200px;
  background-color: #0f0;

  width: 200px;
  margin-left: -100%; /* Float to left */
}
.right {
  float: left;
  height: 200px;
  background-color: #00f;

  width: 250px;
  margin-left: -250px; /* Float to right */
}

效果如下图

但注意到main中内容已经被遮挡（默认text-align: left）。

圣杯布局给出的思路是为两侧设置相对定位（position: relative），同时为父元素（container）设置两侧留白（padding），为两侧留出空间，即可实现两侧与main分离。

圣杯布局CSS代码

.container {
  color: #fff;

  padding: 0 250px 0 200px; /* 为两侧留白 */
}
.main {
  float: left;
  background-color: #f00;
  height: 200px;
  
  width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */
}
.left {
  float: left;
  height: 200px;
  background-color: #0f0;

  width: 200px;
  margin-left: -100%; /* Float to left */

  position: relative;
  left: -200px; /* 找回自身空间 */
}
.right {
  float: left;
  height: 200px;
  background-color: #00f;

  width: 250px;
  margin-left: -250px; /* Float to right */

  position: relative;
  right: -250px; /* 找回自身空间 */
}

效果如下图

双飞翼布局

圣杯布局使用了负边距+相对定位方式，不添加任何额外HTML代码，然而相对定位对性能有影响，考虑到实际应用情况，淘宝UED对此进行了优化，遗弃相对定位，具体做法是为main添加额外的包裹标签。

双飞翼布局HTML代码

<body>
  <div class="container">
    <div class="main"><div class="wrap">Main Content</div></div>
    <div class="left">Left Side</div>
    <div class="right">Right Bar</div>
  </div>
</body>

添加wrap元素

.container {
  color: #fff;

  /*padding: 0 250px 0 200px;*/
}
.main {
  float: left;
  background-color: #f00;
  height: 200px;
  
  width: 100%; /* 注意一定要有宽度，auto也不行，因为已经成为inline-block */
}
.left {
  float: left;
  height: 200px;
  background-color: #0f0;

  width: 200px;
  margin-left: -100%; /* Float to left */

  /*position: relative; */
  /*left: -200px; */
}
.right {
  float: left;
  height: 200px;
  background-color: #00f;

  width: 250px;
  margin-left: -250px; /* Float to right */

  /*position: relative;*/
  /*right: -250px; */
}
.wrap {
  padding: 0 250px 0 200px;
}

达到的效果与之前一致

浮动+负边距布局引申

我们要解决的问题是，主要内容先载入，也就是HTML代码写在前面，而显示在页面的中部（非最前面）。既然负边距可以将浮动元素上移，那么我想就可以创造出这样一种布局方式：

HTML代码如下

<body>
  <div class="container">
    <div class="tip">content tip</div>
    <div class="main">main</div>
    <div class="col1">col1</div>
    <div class="col2">col2</div>
  </div>
</body>

CSS代码如下

.tip {
  float: left;
  width: 100%;
}
.main {
 float: left;
 width: 50%;
 margin-left: -75%;
}
.col1 {
  float: left;
  width: 25%;
  margin-left: -100%;
}
.col2 {
  float: left;
  width: 25%;
  margin-left: -25%;
}

最终创建出3栏自适应宽度布局，数值可自行调整，tip元素内容不可见，可用来提高Accessibility，效果如下