前言：
搞前端必须知道的布局，工作中必会用到，面试必会考到！
流式布局：
页面划分份数时候使用百分比，页面上各种元素的宽也都使用百分比，同时搭配 max-width、min-width使用。这种布局用于早期移动端，屏幕尺寸差异不大
缺点：页面元素宽度是百分比，但是页面的字体等元素大小是固定的px，导致屏幕如果过大的话，虽然元素被拉伸边长了，但是字体没有变大，导致页面显示非常不协调。
圣杯布局
两侧宽度固定，中间宽度自适应的“三栏布局”
实现步骤：
编写DOM代码：
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>- 为了保证中间区域优先显示，所以将 id 为center的div优先放到前边，优先加载
- 其中 container 容器中 包裹着 center 、 left 、right 容器
样式代码：
- 将 center、left、right 全部浮动
- 同时设置container宽度为100%，设置左右padding值，为了给 left 和 right 留出位置
- 因为container浮动会导致 footer 位置异常，所以需要清除浮动
#container,#left,#right{
float:left;
}
#container{
width:100%;
padding:0,200px;
}
footer{
clear:both;
}- 开始调整 left 的位置，首先将其 设置 负边距 调整到和 center 相同的位置
- 然后 通过 设置 position：relative ，在设置 right 属性，使其 到达屏幕左侧位置
- 设置margin-left 为 负值 可以将元素往前拖动，达到 center的位置！
- margin-left ：-100%， 移动的距离 根据 父级元素的宽度计算，移动的宽度就是父级元素的宽度
#left{
width:200px;
margin-left:-100%;
position:relative;
right:200px;
}- 给 right 元素进行位置的赋值
- margin-right：-200px
- 这里 大家不要搞混，其实 left 、right、center 在一条线上，因为 container宽度 不够所有的元素都在一条直线上，因此left 和right 会被挤下来
- 所以，想让 right 跑到屏幕右侧，只需要将其拉扯到 屏幕右侧即可，就是 margin-right：-200px对其进行位置的设置即可
#right {
margin-right:-200px;
}最终代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
header,
footer {
width: 100%;
background-color: aqua;
}
#container {
padding: 0 200px;
}
#center {
height: 300px;
width: 100%;
float: left;
background-color: green;
}
#left {
height: 300px;
width: 200px;
float: left;
position: relative;
margin-left: -100%;
right: 200px;
background-color: yellow;
}
#right {
height: 300px;
width: 200px;
float: left;
margin-right: -200px;
background-color: blue;
}
footer {
clear: both;
}
</style>
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
双飞翼布局
两侧宽度固定，中间宽度自适应的“三栏布局”
实现步骤：
编写DOM代码：
- 和圣杯布局不同的是，container 容器只是包裹 center 元素，且 container 容器进行浮动
- left 和 right 都在 container 容器外部浮动
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<footer>footer</footer>
</body>样式代码：
- container 、 left 、righ 都进行浮动
- container 容器内的 center 设置 margin-left 和 margin-right 预留 左右 的空隙
- left 元素 设置 margin-left : -100% ,将其移动到 屏幕最左侧
- right 元素 设置 margin-left：-200px 将其移动到屏幕最右侧
<style>
header,
footer {
width: 100%;
background-color: aqua;
}
#container {
float: left;
width: 100%;
}
#center {
height: 300px;
margin: 0 200px 0;
background-color: red;
}
#left {
height: 300px;
width: 200px;
float: left;
margin-left: -100%;
background-color: blue;
}
#right {
height: 300px;
width: 200px;
float: left;
margin-left: -200px;
background-color: yellow;
}
footer {
clear: both;
}
</style>
最终代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
header,
footer {
width: 100%;
background-color: aqua;
}
#container {
float: left;
width: 100%;
}
#center {
height: 300px;
margin: 0 200px 0;
background-color: red;
}
#left {
height: 300px;
width: 200px;
float: left;
margin-left: -100%;
background-color: blue;
}
#right {
height: 300px;
width: 200px;
float: left;
margin-left: -200px;
background-color: yellow;
}
footer {
clear: both;
}
</style>
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<footer>footer</footer>
</body>
</html>
flex 实现 三栏布局
实现结构和圣杯布局相似，但是更加简单
最终代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
header,
footer {
width: 100%;
background-color: aqua;
}
#container {
display: flex;
}
#center {
/* 默认占满整个空间 */
flex:1;
height: 300px;
background-color: red;
}
#left{
/*不放大，不缩小，宽度为200px*/
flex:0 0 200px;
/*越小的项目越靠前*/
order: -1;
height: 300px;
background-color: blue;
}
#right{
/*不放大，不缩小，宽度为200px*/
flex:0 0 200px;
height: 300px;
background-color: yellow;
}
</style>
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
感谢观看，如有疑问，请在评论区中，回复！