三列布局
本篇讲三列布局，面试常考题，自己总结的，如有什么问题，欢迎指出！我会用红色标注出主要作用部分，都是最精简的写法，，没有多余的修饰。
布局方式一:两边固定中间自适应
1.flex布局
思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局（如果对flex不了解，可点击打开链接学习）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width:100%;
height:100px;
display:flex;
margin:10px;
}
#left,#right{
width:200px;
height:100px;
margin:10px;
background-color:#999;
}
#center{
flex:1;
height:100px;
margin:10px;/*左右margin不会叠加*/
background-color:#f00;
}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
2.利用浮动（float）
让左右元素浮动，缺点是中间元素必须置于二者之后，不然right元素会进入下一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left,.right{
width:200px;
height:200px;
background-color:#999;
}
.left{
float:left;
}
.right{
float:right;
}
.center{
margin:0 200px;
height:300px;
background-color:#f00;
}
</style>
</head>
<body>
<!--该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是
和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。
当浏览器窗口很小的时候，右边元素会被击倒下一行。-->
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>
3.利用绝对定位（position）
center居中并利用margin为左右两边留出位置，左右绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三列布局</title>
<style type="text/css">
/*左右固定，中间自适应 利用绝对定位*/
.container{
width: 100%;
height: 100%;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: black;
color:#fff;
}
.center{
/*width: auto;*/ /*如果没有这一句，那么，center这个div的文字就不会自动换行*/
margin: 0 400px;
height: 400px;
background-color: yellow;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
4.对中间的宽度进行calc计算
三个元素都向左浮动，左右定宽，中间的对其进行计算，让100%宽度减去左右宽度，即为中间宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
overflow: hidden;
}
.left,.right{
float: left;
width: 100px;
background:red;
}
.center{
float: left;
width:calc(100% - 200px);
background:yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
5.双飞翼布局（重点来了）
目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {min-width: 550px;}
.col {float: left;}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px;/*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding*/
}
#left,#right {
width: 190px;
height: 200px;
background-color: #0000FF;
}
#left{
margin-left: -100%;
}
#right {
margin-left: -190px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="container">
<div id="main" class="col">
<div id="main-wrap"> #main </div>
</div>
<div id="left" class="col">#left</div>
<div id="right" class="col">#right</div>
</div>
</body>
</html>
这种布局的好处是：两边（left和right）不会盖住中间(center)部分，left和right盖住的是wrap元素的两边，即main-wrap的margin部分。
6.圣杯布局（也是重点）
优先渲染主要部分,此部分参考了木羽zwwill
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper {
padding: 0 100px;
overflow:hidden;
}
.col {
position: relative;
float: left;
}
.main {
width: 100%;
height: 200px;
background:yellow;
}
.left,.right {
width: 100px;
height: 200px;
background:red;
}
.left{
margin-left: -100%;
left: -100px;
}
.right {
margin-left: -100px;
right: -100px;
}
</style>
</head>
<body>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
</body>
</html>
圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。
圣杯布局和双飞翼的区别：（按我自己理解）
圣杯布局是整体使用了一个container（上例的wrapper），将三列放入其中，left和right占据的是wrapper的padding-left和 padding-right(上例第八行padding:0 100px;)。
双飞翼布局是在center部分多加了一个节点元素，left和right部分的位置在main-wrap的margin（magin-left和margin-right）部分。
<div id="main" class="col">
<div id="main-wrap"> #main </div>
</div>
布局方式二:两边自适应中间固定
1.css3布局
目前没有浏览器支持 box-flex 属性。Firefox 支持替代的 -moz-box-flex 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
box-flex 属性规定框的子元素是否可伸缩其尺寸。提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div[class=me] {
display: -webkit-box;
}
div div {
background: red;
height: 100px;
}
div div:nth-child(1) {
-webkit-box-flex:1;
}
div div:nth-child(2) {
width: 800px;
background: #ccc;
}
div div:nth-child(3) {
-webkit-box-flex:1;
}
</style>
</head>
<body>
<div class="me">
<div>left</div>
<div>center</div>
<div>right</div>
</div>
</body>
</html>
2.flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrap{
display:flex;
flex-direction:row;
margin-top:20px;
}
.center{
width:800px;
text-align:center;
background:#ccc;
}
.left,.right{
/*flex-grow 属性用于设置或检索弹性盒的扩展比率。*/
flex-grow: 1;
line-height: 30px;
background:red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
利用flex-grow进行布局，详见flex-grow属性
3.左右利用calc()函数计算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{
height:200px;
width: 100%;
}
#left,#right{
float:left;
background-color:#ccc;
height:100%;
width: calc(50% - 500px);
}
#center{
float:left;
background-color:yellow;
height:100%;
width:1000px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
两边自适应中间固定暂时整理到这三种方法。
作者：DOM曼珠沙华
来源：CSDN
原文：https://blog.csdn.net/a18792627168/article/details/79686746
版权声明：本文为博主原创文章，转载请附上博文链接！
网友评论