当面试官问你怎么用css实现三栏布局 一篇文章秒了
哈喽哈喽，大家好。我是你们的金樽清酒。今天我给大家带来的是css面试题，三栏布局。我们都知道css呢在面试中问的都比较少也比较简单。但是呢？有一些题目呢也比较偏。那同样都是面试者想在css上拿分超越同水平面试者，那就必须对css的实现方法认识全面，而不是浅尝辄止。那今天我们就来详细的了解一下常考的三栏布局，了解一下大名鼎鼎的圣杯和双飞翼布局。emmmm,听着就很牛逼。
假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"
什么是三栏布局
三栏布局是指网页设计中常见的一种页面布局方式，通常将页面分为左栏、中栏和右栏，每个栏目可以用来展示不同的内容或功能。这种布局方式通常用于构建网站的主体结构，以便更好地组织和展示页面内容。
在三栏布局中，通常将主要内容放置在中间栏，辅助内容或导航放置在左右两栏。这种布局方式通常适用于各种类型的网站，如博客、新闻网站、电子商务网站等。
使用三栏布局可以使页面内容更加有序和易于阅读，同时也能够更好地利用页面空间，提供更多的信息和功能。
举个例子
这就是三栏布局，左右两侧的盒子宽度固定，然后中间的盒子会随屏幕自适应。一般中间放主体内容，左右两边放辅助内容。
看，当我们的屏幕变化的时候，由于左右两边是固定死的，所以中间会自适应宽度，这就是三栏布局。看起来其实三栏布局也蛮简单的，那怎么去实现呢？你又能想出多少种办法去实现呢？
如何实现三栏布局
- 方法一 弹性布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 200px;
display: flex;
}
.left {
width: 200px;
height: 100%;
background-color: aqua;
}
.content {
width: 100%;
height: 100%;
background-color: cadetblue;
flex: 1;
}
.right {
width: 200px;
height: 100%;
background-color: bisque;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
</body>
</html>将最外层盒子设为弹性布局，然后左右两边的盒子固定宽度。将中中的盒子flex设为1，将剩余所有空间给中间的盒子，就能达到自适应宽度的效果。
- 方法二 grid布局 和弹性布局一样。grid的布局能达到和弹性布局一样的效果。左右两边的宽度固定死然后将剩余的空间给中间的主体部分。那就要用到
grid-template-columns：定义网格的列大小和数量。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 200px;
display: grid;
grid-template-columns: 200px 1fr 200px;
}
.left {
width: 200px;
height: 100%;
background-color: aqua;
}
.content {
width: 100%;
height: 100%;
background-color: cadetblue;
flex: 1;
}
.right {
width: 200px;
height: 100%;
background-color: bisque;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
弹性布局的方法
</body>
</html>
- 方法三 圣杯布局！！！ 圣杯布局是项目常用的方法，因为它有一个特别巧妙的地方。我们想一个这样子的情况。三栏布局中间是主体部分，左右两边是广告或者是导航栏。那我们是先让客户看广告呢还是先看主体内容呢?当然呢，如果你想让客户先看广告那就可以跳过圣杯布局呢（坏笑）。那圣杯布局有什么奇妙的地方呢？那就是将html结构中主体部分的盒子放在前面。显然html结构是这样的，那用弹性布局和grid布局是做不到的。那我们用什么呢？
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
height: 200px;
padding: 0 200px 0 200px;
}
.left{
width: 200px;
height: 100%;
background-color: aqua;
float: left;
position: relative;
right: 200px;
margin-left: -100%;
}
.content{
width: 100%;
height: 100%;
background-color: cadetblue;
float: left;
}
.right{
width: 200px;
height: 100%;
background-color: bisque;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>实现原理 float + margin负值 + position:relative
首先给外层大盒子留好边距，并且将三个盒子都左浮。可以看到下面的效果。 
本来都是浮动，三个盒子应该在同一行的，但是由于上面空间不够被挤下来，然后左右都加margin left：200px;变成下面的效果，你会发现，左右两边各遮挡了中间200px的宽度。
最后一步 position：relative；左边相对自身左移200px,右边相对自身右移200px。
三栏布局就完成啦，而且按照这个html结构，会先加载主体内容，就非常的nice，这不拿捏面试官，我太狂咯。
- 双飞翼布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
height: 200px;
}
.conatiner{
height: 100%;
background-color: cadetblue;
padding: 0 200px 0 200px;
float: left;
width: 100%;
box-sizing: border-box;
}
.left{
width: 200px;
height: 100%;
background-color: aqua;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
height: 100%;
background-color: bisque;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="conatiner">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>双飞翼布局的html结构也是先加载主体内容，并且用浮动加marginfu值，无须定位。用到了box-sizing: border-box;
拓展一下box-sizing: border-box; box-sizing: border-box; 是一个CSS属性，用于指定元素的框模型的计算方式。默认情况下，当您设置元素的宽度和高度时，浏览器会将这些尺寸应用于元素的内容框（content box），并在内容框外绘制填充（padding）和边框（border）。这意味着，添加填充和边框会增加元素的实际尺寸。
然而，当您将 box-sizing 属性设置为 border-box 时，浏览器会将指定的宽度和高度应用于元素的边框框（border box），而不是内容框。这意味着填充和边框将会被包含在指定的宽度和高度之内，而不会增加元素的实际尺寸。这样可以更方便地控制元素的尺寸，特别是在设计响应式布局时非常有用。
以下是一个示例：
css
cssCopy code
/* 默认框模型 */
.element {
width: 200px; /* 实际宽度为 200px + padding + border */
height: 100px; /* 实际高度为 100px + padding + border */
padding: 10px;
border: 1px solid #000;
}
/* border-box 框模型 */
.element {
box-sizing: border-box;
width: 200px; /* 实际宽度为 200px */
height: 100px; /* 实际高度为 100px */
padding: 10px;
border: 1px solid #000;
}在上述示例中，对于默认框模型，元素的宽度和高度会包括填充和边框的尺寸，而对于 border-box 框模型，填充和边框的尺寸会被包含在指定的宽度和高度内。
总之，使用 box-sizing: border-box; 可以更方便地控制元素的尺寸，减少在设计布局时的复杂性。也就是说内外边距不算在元素的宽度里面。然后margin -200px将三者弄到同一行，且由于内边距不计算在主体元素里面，所以左右部分占据位置，达到三栏布局效果。
总结
好了，实现三栏布局的方法大概就是这四种。一般应用是圣杯布局和双飞翼布局。因为这种html结构可以先加载主体内容，增加用户的体验。
假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"