圣杯布局和双飞翼布局

最新推荐文章于 2022-06-29 06:04:25 发布

qb扛把子

最新推荐文章于 2022-06-29 06:04:25 发布

阅读量285

点赞数

文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/qq_45927123/article/details/103842618

版权

简述圣杯布局和双飞翼布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。
两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局和双飞翼布局共同点

虽然两者的实现方法略有差异，不过都遵循了以下要点：

两侧宽度固定，中间宽度自适应
中间部分在 DOM 结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的
标签

圣杯布局 DOM 结构

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

圣杯布局 css 结构

body {
  min-width: 550px;
}

#container {
  padding-left: 200px;
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px;
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px;
  margin-right: -150px;
}

#footer {
  clear: both;
}

双飞翼布局

1. DOM 结构

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
  <body></body>
</body>

2.css 代码

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px;
  margin-left: -100%;
}

#right {
  width: 150px;
  margin-left: -150px;
}

#footer {
  clear: both;
}

question 如果去掉额外添加的
标签，能否完成相同的布局呢？答案是肯定的。有几种实现方法呢？

1.flex 布局

<!--DOM结构 -->
<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>


    #container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}

2.css grid网格实现圣杯布局

<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</footer></div>


    body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
    
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}

3.使用calc()

    .column {
  float: left;
}
    
#center {
  margin-left: 200px;
  margin-right: 150px;
  width: calc(100% - 350px);
}

4使用border-box

.column {
  float: left;
}
    
#center {
  padding-left: 200px;
  padding-right: 150px;
  box-sizing: border-box;
  width: 100%;
}