当面试官问你怎么用css实现三栏布局 一篇文章秒了
哈喽哈喽,大家好。我是你们的金樽清酒。今天我给大家带来的是css面试题,三栏布局。我们都知道css呢在面试中问的都比较少也比较简单。但是呢?有一些题目呢也比较偏。那同样都是面试者想在css上拿分超越同水平面试者,那就必须对css的实现方法认识全面,而不是浅尝辄止。那今天我们就来详细的了解一下常考的三栏布局,了解一下大名鼎鼎的圣杯和双飞翼布局。emmmm,听着就很牛逼。
假如您也和我一样,在准备春招。欢迎加我微信shunwuyu,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!”
什么是三栏布局
三栏布局是指网页设计中常见的一种页面布局方式,通常将页面分为左栏、中栏和右栏,每个栏目可以用来展示不同的内容或功能。这种布局方式通常用于构建网站的主体结构,以便更好地组织和展示页面内容。
在三栏布局中,通常将主要内容放置在中间栏,辅助内容或导航放置在左右两栏。这种布局方式通常适用于各种类型的网站,如博客、新闻网站、电子商务网站等。
使用三栏布局可以使页面内容更加有序和易于阅读,同时也能够更好地利用页面空间,提供更多的信息和功能。
举个例子
这就是三栏布局,左右两侧的盒子宽度固定,然后中间的盒子会随屏幕自适应。一般中间放主体内容,左右两边放辅助内容。
看,当我们的屏幕变化的时候,由于左右两边是固定死的,所以中间会自适应宽度,这就是三栏布局。看起来其实三栏布局也蛮简单的,那怎么去实现呢?你又能想出多少种办法去实现呢?
如何实现三栏布局
- 方法一 弹性布局
<!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
:定义网格的列大小和数量。
<!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布局是做不到的。那我们用什么呢?
<!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,这不拿捏面试官,我太狂咯。
- 双飞翼布局
<!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),而不是内容框。这意味着填充和边框将会被包含在指定的宽度和高度之内,而不会增加元素的实际尺寸。这样可以更方便地控制元素的尺寸,特别是在设计响应式布局时非常有用。
以下是一个示例:
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,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!”
原文链接:https://juejin.cn/post/7337941065020751913 作者:jinzunqinjiu