本文主要是介绍面试官：请你实现三栏布局并且优先加载中间内容 我：稳啦- ̗̀(๑ᵔ⌔ᵔ๑)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
三栏布局是网页设计中一种经典布局方式，它将页面分为三个垂直部分：左栏、中栏和右栏，三栏在同一行显示。
这种布局模式在很多网站的首页或内容密集型页面中非常常见，因为它能够有效地组织信息，提供良好的用户体验。常常也是作为面试常考题出现，今天将为大家介绍常见的三栏布局的方式，其中有些就能实现优先加载中间内容。
如何实现加载中间内容，浏览器在渲染页面的时候是按写的顺序渲染，意思是要想优先加载就必须html结构在前面。html结构如下：
<div class="page"><div class="content">中栏内容</div><div class="left">左栏内容</div><div class="right">右栏内容</div></div>
html结构已经确定，接下来的就是css布局样式。话不说，发车！- ̗̀(๑ᵔ⌔ᵔ๑)
flex布局
不多说，flex布局是个人认为目前最强的布局了。灵活多变，满足一切需求。
那让我们是实现一下任务需求：
-
首先要实现三栏内容在同一行中，我们给父元素设置弹性布局，则子元素都会在同一行展示
.page{display:flex} -
要将中栏内容放在中间显示，左栏在左边，右栏在右边显示。这时候我们需要flex布局中的一个属性
order，这个属性可以定义项目的排列顺序，数值越小，排列越靠前，默认为0。
所以我们只需要让中栏内容order为1，左栏为默认0，右栏为2，即可实现。
下面是效果展示：
jcode
不得不说，flex布局是真的简单。但是问题真的有这么简单吗？是的确实这么简单.
，咳咳，其实远在flex布局还没有出现的时候，也已经有超级大佬想出了非常好的解决办法，本篇文章也主要是以讲解这些方法的思路为主。那首先介绍的就是圣杯布局
圣杯布局
圣杯布局。。我怎么一开始就想到了fate，咳咳扯远了。首先我们先设置三栏内容，如下图所示
* {padding: 0;margin: 0;}.page {height: 200px;}
.left,
.right {height: 200px;width: 200px;background: #0ed898;
}.content {height: 200px;width: 100%;background: pink;
}
三栏内容分行显示，圣杯布局的首先样式便是让三栏内容先全部浮动，首先达成可以在一行显示，但是由于中栏内容宽度为100%，所以其他两栏内容将会被挤下去
圣杯布局的精髓就是给.page容器一个内边距，变成下边这样
在给左右栏内容添加相对定位，把每个容器定位到指定位置。下面是完整代码
jcode
双飞翼布局
我也很好奇为什么名字一个个都挺奇怪的，如果有大佬知道的话，欢迎评论区告诉我一下，这个确实让我挺疑惑的。
其实双飞翼布局和圣杯布局个人感觉都挺像的
- 圣杯布局 = 浮动 + 内边距
- 双飞翼 = 浮动 + 外边距
但是双飞翼html结构稍微有点不同
<div class="page"><div class="content"><div class="inner"> 中栏内容</div></div><div class="left">左栏内容</div><div class="right">右栏内容</div></div>
中栏内容使用了一个inner类名的div包裹，作用就是让inner盒子产生一个外边距 margin: 0 200px，给左右两栏提供位置，而圣杯布局是通过padding给左右两栏提供位置。
代码如下：
jcode
结语
其实能实现三栏布局的方式有很多种，比如grip和table布局都是可以实现，这里主要是讨论可以优先渲染中栏内容的布局方式。个人还是非常喜欢flex布局，其他两种可以作为拓展知识了解。
好啦，本次分享就到这啦，喜欢的话就点个赞或者关注吧。- ̗̀(๑ᵔ⌔ᵔ๑)
这篇关于面试官：请你实现三栏布局并且优先加载中间内容 我：稳啦- ̗̀(๑ᵔ⌔ᵔ๑)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
