# 圣杯布局与双飞翼

圣杯布局是常见的 css 布局.其利用左中右三种

## 圣杯布局

## 先写出基础格式

```html
<header><h4>Header内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>

```

然后写 css 样式

```css
.header {
  width: 100%;
  height: 100px;
  background-color: darkseagreen;
}
.footer {
  width: 100%;
  height: 30px;
  background-color: darkslategray;
}
.container {
  height: 200px;
  padding: 0 100px 0 50px;
  overflow: hidden;
  background-color: rgb(242, 245, 241);
}
.left,
.middle,
.right {
  position: relative;
  float: left;
  height: 100px;
}
.middle {
  width: 100%;
  background-color: rgb(161, 25, 43);
}
.left {
  width: 50px;
  background-color: rgb(68, 156, 28);
}
.right {
  width: 100px;
  background-color: rgb(25, 39, 161);
}
```

利用负边距布局

```css
.left {
  width: 50px;
  left: -50px;
  background-color: rgb(68, 156, 28);
}
.right {
  width: 100px;
  margin-left: -100px;
  right: -100px;
  background-color: rgb(25, 39, 161);
}
```

我们实现了固定比的布局,但是会出现中间盒子呗左右盒子给压住一部分

## 让中间自适应的盒子安全显示

```css
.container{ padding: 0 200px;}
.left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;}

```

这里的200px是左右盒子的宽度。

## 双飞翼布局

## html 样式

```html
    <div class="header"></div>
    <div class="container">
      <div class="middle">
        <div id="main-content">
          <h4>中间弹性区</h4>
        </div>
      </div>
      <div class="left">
        <h4>左边栏</h4>
      </div>
      <div class="right">
        <h4>右边栏</h4>
      </div>
    </div>
    <div class="footer"></div>
  </div>

```

## css 样式

```js
.middle {
  width: 100%;
  background-color: rgb(224, 41, 185);
}
.main-content {
  margin: 0 100px 0 50px;
}
.left,
.middle,
.right {
  float: left;
  height: 100px;
}
.left {
  width: 50px;
  margin-left: -100%;
  background-color: rgb(68, 156, 28);
}
.right {
  width: 100px;
  margin-left: -100px;
  background-color: rgb(25, 39, 161);
}
```

## 二者区别

双飞翼是淘宝 UED 发明的. 区别在于使用的是 margin 还是 padding. 1.双飞翼布局不用设置相对布局,以及对应的 left 和 right 值 2. 双飞翼布局给主面板添加了一个父标签用来通过 margin 给子面板腾出空间


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shenjunhong.gitbook.io/blog/html-and-css/sheng-bei-bu-ju-yu-shuang-fei-yi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.