整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，同时在前端面试中也是属于必问的知识点，那么什么是三栏布局？比如打开京东的首页：
映入眼帘的就是一个常见的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。下面围绕的这样的目的，即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：
红色和蓝色宽度固定，绿色宽度自适应，下面七种方法实现的最终效果跟这个差不多，可能会稍有不同。
1. 流体布局
左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。
缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。
2. BFC 三栏布局
BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。
缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。
3. 圣杯布局
相关解释如下：
(1)中间部分需要根据浏览器宽度的变化而变化，所以要用100%，这里设左中右向左浮动，因为中间100%，左层和右层根本没有位置上去
(2)把左层margin负100后，发现left上去了，因为负到出窗口没位置了，只能往上挪
(3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位
(4)但由于左右栏遮挡住了中间部分，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果
跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。
4. 双飞翼布局
圣杯布局实际看起来是复杂的后期维护性也不是很高，在淘宝UED的探讨下，出来了一种新的布局方式就是双飞翼布局，代码如上。增加多一个div就可以不用相对布局了，只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。利用的是浮动元素 margin 负值的应用，感兴趣的同学可以上网搜搜原理。
主体内容可以优先加载，HTML 代码结构稍微复杂点。
5. Flex 布局
简单实用，未来的趋势，需要考虑浏览器的兼容性
6. Table 布局
缺点：无法设置栏间距
7. 绝对定位布局
使用absolute定位，只需将左右两栏绝对定位到窗口两边，为main添加左右margin创建安全输入区域即可。因为absolute是以第一个定位不是static的父元素定位的，为这个整体添加一个定位不是static的父元素，绝对定位不会与header，footer等重叠。并且main的dom位置在left和right的前面，可在左右两栏之前完成加载
简单实用，并且主要内容可以优先加载。
前端要知道的网络知识一：TCP/IP 协议到底在讲什么
前端要知道的网络知识二：TCP协议的三次握手和四次分手
前端要知道的网络知识三：认识OSI七层模型
前端要知道的网络知识四：TCP的概念和HTTP连接管理
前端要知道的网络知识五：详细的介绍web缓存
前端要知道的网络知识六：详细介绍URL及其用法
前端要知道的网络知识七：初识HTTP报文
前端要知道的网络知识八：GET 和 POST 到底有什么区别
前端要知道的网络知识九：初识HTTPS加密过程，原来如此
前端要知道的网络知识十：HTTPS加密核心RSA算法
....
参考文章
https://www.cnblogs.com/chenyablog/p/7918807.html
https://zhuanlan.zhihu.com/p/24305930
https://zhuanlan.zhihu.com/p/25070186
天来说说网页中实现三栏布局要如何实现的问题，做法有好多，这里就总结4中常用的方法，感兴趣的小伙伴可以看看。
若不是等分分栏的话，一般用得最多的应该是浮动方法，运用浮动做法时候要注意浏览器的兼容性！
展示代码:
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 项目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* 头部样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>头部区域</h1>
</div>
</body>
</html>菜单导航条包含了一些链接，可以引导用户浏览其他页面：
例
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}内容区域一般有三种形式:
不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。
例：
.column {
float: left;
}
/* 左右侧栏的宽度 */
.column.side {
width: 25%;
}
/* 中间列宽度 */
.column.middle {
width: 50%;
}
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
底部区域在网页的最下方，一般包含版权信息和联系方式等。
例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 头部标题 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航条链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接颜色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 创建两列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右侧栏 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 图像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>我的网页</h1>
<p>重置浏览器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#" style="float:right">链接</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>文章标题</h2>
<h5>xx 年xx月 xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
<p>文本...</p>
<p>当热诚变成习惯，恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。
善于安排玩乐和工作，两者保持热诚，就是最快乐的人。热诚使平凡的话题变得生动。！</p>
</div>
<div class="card">
<h2>文章标题</h2>
<h5>xx 年 xx 月xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
<p>文本...</p>
<p>一切事无法追求完美，唯有追求尽力而为。这样心无压力，出来的结果反而会更好！</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>关于我</h2>
<div class="fakeimg" style="height:100px;"></div>
<p>6666</p>
</div>
<div class="card">
<h3>热门文章</h3>
<div class="fakeimg"><img src="img/fy2_wp.png">\</div>
</div>
<div class="card">
<h3>关注我</h3>
<p>本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，
不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。
声明：为非赢利性网站 不接受任何赞助和广告。</p>
</div>
</div>
</div>
<div class="footer">
<h2>底部区域</h2>
</div>
</body>
</html>本文主要介绍了Html的网页布局结构，如何去了解网络的布局，介绍了常见的移动设备的三种网页模式，最后通过一个小项目，总结之前讲解的内容。
代码很简单，希望可以帮助你学习。
*请认真填写需求信息，我们会在24小时内与您取得联系。
