使用container的嵌套实现下面布局_CSS 圣杯布局和双飞翼布局的理解与思考

最新推荐文章于 2024-04-16 17:45:13 发布

weixin_39880490

最新推荐文章于 2024-04-16 17:45:13 发布

阅读量712

点赞数

文章标签：使用container的嵌套实现下面布局使用container的嵌套语句实现下面布局双飞翼布局内容不换行

1. 开始正文之前的自我吐槽

圣杯布局和双飞翼布局一直是前端面试的高频考点，然而本人对布局和css这方面实在不擅长==，每次被面试官问到css相关的问题，都含含糊糊；到了后面自己闲麻烦直接说"我不太懂css!"。然而总被强硬的怼回来，“你不会css你还是前端吗！”。

2.历史由来

圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：

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

下面我将依次介绍圣杯布局和双飞翼布局的实现方法，并在最后根据个人思考对原有方法做出一些修改，给出其它一些可行的方案。

3.圣杯布局

1. 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>

首先定义出整个布局的DOM结构，主体部分是由container包裹的center,left,right三列，其中center定义在最前面

2. CSS代码

假设左侧的固定宽度为200px，右侧的固定宽度为150px，则首先在container上设置：

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

为左右两列预留出相应的空间，得到如下示意图

随后分别为三列设置宽度与浮动

根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。
接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距（nagetive margin）随后还需要使用定位(position)方法

#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;
}

在#center中，包含了一条声明width: 100%，这是中间栏能够做到自适应的关键。可能会有朋友认为不需要设置这条声明，因为觉得center在不设置宽度的情况下会默认将宽度设置为父元素(container)的100%宽度。但需要注意到，center是浮动元素，由于浮动具有包裹性，在不显式设置宽度的情况下会自动“收缩”到内容的尺寸大小。如果去掉width: 100%，则当中间栏不包含或者包含较少内容时，整个布局会“崩掉”，

双飞翼布局

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>

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
2. CSS代码
按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除：

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;
}

总结与思考
通过对圣杯布局和双飞翼布局的介绍可以看出，圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构（通常<aside>和<article>/<section>一起被嵌套在<main>中）；

而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小。
其实通过思考不难发现，两者在代码实现上都额外引入了一个<div>标签，其目的都是为了既能保证中间栏产生浮动（浮动后还必须显式设置宽度），又能限制自身宽度为两侧栏留出空间。
从这个角度出发，如果去掉额外添加的<div>标签，能否完成相同的布局呢？答案是肯定的，不过这需要在兼容性上做出牺牲：

weixin_39880490

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用container的嵌套实现下面布局_CSS 圣杯布局和双飞翼布局的理解与思考

1. 开始正文之前的自我吐槽圣杯布局和双飞翼布局一直是前端面试的高频考点，然而本人对布局和css这方面实在不擅长==，每次被面试官问到css相关的问题，都含含糊糊；到了后面自己闲麻烦直接说"我不太懂css!"。然而总被强硬的怼回来，“你不会css你还是前端吗！”。2.历史由来圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略...
复制链接

扫一扫