三栏布局就是在网页上以平铺方式展现左中右三列布局，其特点在于，左右两列固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化，简单来说就是两端固定，中间自适应。
常用的主要有6种布局方式：浮动，绝对定位，flex，grid，圣杯布局和双飞翼布局
浮动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-浮动</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
overflow: hidden;
}
.left {
border: 1px solid black;
float: left;
width: 100px;
}
.right {
border: 1px solid black;
float: right;
width: 100px;
}
.center {
margin: 0 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="left">左边区域<br /><br /></article>
<article class="right">右边区域<br /><br /></article>
<article class="center">中间区域</article>
</section>
</body>
</html>
绝对定位
- 两边通过绝对定位定位到父盒子的左、右边框上，再根据实际的需要设置两边盒子的宽度，高度是根据内容自适应的，中间内容区通过定位属性左、右自适应宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-绝对定位</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
.left {
position: absolute;
border: 1px solid black;
width: 100px;
left: 0;
}
.center {
border: 1px solid black;
position: absolute;
left: 100px;
right: 100px;
}
.right {
border: 1px solid black;
position: absolute;
width: 100px;
right: 0;
}
</style>
</head>
<body>
<section class="container">
<article class="left">左边区域<br /><br /></article>
<article class="center">中间区域<br /><br /></article>
<article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>
flex布局
相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-flex</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
}
.left {
border: 1px solid black;
width: 100px;
}
.center {
border: 1px solid black;
/* 使该盒子占据容器盒子的全部剩余空间 */
flex: 1;
}
.right {
border: 1px solid black;
width: 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="left">左边区域<br /><br /></article>
<article class="center">中间区域<br /><br /></article>
<article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>
grid布局
- 使用grid网格布局实现三列布局，和之前所讲的gird实现双列布局是同样的思想，只是把列数变为了3，高度依然不设置，通过容器项的内容高度自适应撑开整体高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-grid</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
/* 设置为 3列 ，且中间宽度自适应*/
grid-template-columns: 100px auto 100px;
}
.left {
border: 1px solid black;
}
.center {
border: 1px solid black;
}
.right {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left">左边区域<br /><br /></article>
<article class="center">中间区域<br /><br /></article>
<article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>
圣杯布局
- 圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-圣杯布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
overflow: hidden;
padding: 0 100px;
}
.left {
/* 浮动，保证之后的"margin-left"属性可以将自身拉到上一行 */
float: left;
width: 100px;
/* 将元素向左移动属性值的单位，100%相对于父容器计算 */
margin-left: -100%;
/* 需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域 */
position: relative;
/* 移动自身的宽度，刚好进入容器的"padding-left"区域 */
left: -100px;
background-color: greenyellow;
}
.center {
float: left;
width: 100%;
background-color: darkorange;
}
.right {
float: left;
width: 100px;
margin-left: -100px;
position: relative;
left: 100px;
background-color: darkgreen;
}
</style>
</head>
<body>
<section class="container">
<article class="center">中间区域<br /><br /></article>
<article class="left">左边区域<br /><br /></article>
<article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>
双飞翼布局
双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-双飞翼布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
/* 解决子浮动元素高度塌陷的问题 */
overflow: hidden;
}
.left {
/* 浮动，保证之后的"margin-left"属性可以将自身拉到上一行 */
float: left;
width: 100px;
/* 将元素向左移动属性值的单位，100%相对于父容器计算 */
margin-left: -100%;
background-color: greenyellow;
}
.center {
float: left;
width: 100%;
background-color: darkorange;
}
.right {
float: left;
width: 100px;
margin-left: -100px;
background-color: darkgreen;
}
.main {
margin: 0 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="center"><div class="main">中间区域<br /><br /></div></article>
<article class="left">左边区域<br /><br /></article>
<article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>
标签：solid,布局,100px,1px,black,三栏,border,left From： https://www.cnblogs.com/qianduan-Wu/p/16729725.html