CSS_三栏布局的五种方式&圣杯布局和双飞燕布局

谁借莪１个温暖的怀抱￠ 2023-10-06 17:43 34阅读 0赞

## 一、三栏布局的五种方式 ##

### 1.1、float ###

<!DOCTYPE html>
    <html style="height: 100%">
        <head>
            <meta charset="utf-8">
    		<style type="text/css">
    			.outer{
         
    				min-width:600px;
    			}
    			.side{
         
    				width: 300px;
    				height:300px;
    				background-color:#bfa;
    			}
    			.left{
         
    				float:left;
    			}
    			.right{
         
    				float:right;
    			}
    			.mid{
         
    				float:left;
    				width: calc(100% - 600px);
    				height:300px;
    				background-color:#55ffff;
    			}
    		</style>
        </head>
    	
        <body >
    		<div class="outer">
    			<div class="side left"></div>
    			<div class="side right"></div>
    			<div class="mid"></div>
    		</div>
    		
        </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]

### 1.2、position ###

<!DOCTYPE html>
    <html style="height: 100%">
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.outer {
         
    				position: relative;
    			}
    
    			.inner {
         
    				position: absolute;
    				top: 0;
    				height: 300px;
    				background-color: #bfa;
    			}
    
    			.left {
         
    				left: 0;
    				width: 300px;
    			}
    
    			.right {
         
    				right: 0;
    				width: 300px;
    			}
    
    			.mid {
         
    				left: 300px;
    				right: 300px;
    				background-color: #55ffff;
    
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="outer">
    			<div class="inner left"></div>
    			<div class="inner mid"></div>
    			<div class="inner right"></div>
    		</div>
    
    	</body>
    </html>

### 1.3、flex ###

<!DOCTYPE html>
    <html style="height: 100%">
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.outer {
         
    				display: flex;
    			}
    
    			.inner {
         
    				width: 300px;
    				height: 300px;
    				background-color: orange;
    			}
    
    			.mid {
         
    				flex: 1;
    				background-color: #55ffff;
    
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="outer">
    			<div class="inner left"></div>
    			<div class="inner mid"></div>
    			<div class="inner right"></div>
    		</div>
    
    	</body>
    </html>

### 1.4、table ###

<!DOCTYPE html>
    <html style="height: 100%">
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.outer {
         
    				display: table;/*会自动缩放宽高*/
    			}
    
    			.inner {
         
    				width: 300px;
    				height: 300px;
    				background-color: orange;
    			}
    
    			.mid {
         
    				display: table-cell;
    				width:100%;/*继承父级软板，会自动计算剩余宽度*/
    				background-color: #55ffff;
    
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="outer">
    			<div class="inner left"></div>
    			<div class="inner mid"></div>
    			<div class="inner right"></div>
    		</div>
    
    	</body>
    </html>

### 1.5、grid ###

<!DOCTYPE html>
    <html style="height: 100%">
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.outer {
         
    				display: grid;
    				width:100%;
    				grid-template-rows: 300px 300px 300px;
    				grid-template-columns: 300px auto 300px;
    			}
    
    			.inner {
         
    				background-color: orange;
    			}
    
    			.mid {
         
    				background-color: #55ffff;
    
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="outer">
    			<div class="inner left"></div>
    			<div class="inner mid"></div>
    			<div class="inner right"></div>
    		</div>
    
    	</body>
    </html>

## 二、圣杯布局&双飞燕布局 ##

圣杯布局  
双飞燕布局  
概括为=>左右固定，中间自适应  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]

### 2.1、圣杯布局 ###

#### 2.1.1、使用浮动+margin布局 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>圣杯布局</title>
    		<style type="text/css">
    			html,
    			body {
         
    				height: 100%;
    				overflow: hidden;
    				/*一个屏幕视口*/
    			}
    
    			.container {
         
    				height: 100%;
    				/*给左右区域留有位置*/
    				padding: 0 200px;
    			}
    
    			.left,
    			.right {
         
    				width: 200px;
    				min-height: 200px;
    				/*演示需要，实际开发时删除*/
    				background: lightblue;
    			}
    
    			.center {
         
    				width: 100%;
    				min-height: 400px;
    				background: lightsalmon;
    			}
    
    			.left,
    			.center,
    			.right {
         
    				float: left;
    			}
    
    			 .left {
         
    				margin-left: -100%;
    				position: relative;
    				left: -200px;
    			} 
    
    			.right {
         
    				margin-right: -200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container clearfix">
    			<div class="center">中间内容</div>
    			<div class="left">左边</div>
    			<div class="right">右边</div>
    		</div>
    	</body>
    </html>

#### 2.1.2、使用flex布局 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>圣杯布局</title>
    		<style type="text/css">
    			html,
    			body {
         
    				/*一个屏幕视口*/
    				overflow: hidden;
    			}
    
    			.container {
         
    				display: flex;
    				justify-content: space-between;
    				height: 100%;
    			}
    
    			.left,
    			.right {
         
    				flex: 0 0 200px;
    				height: 200px;
    				background: lightblue;
    			}
    
    			.center {
         
    				flex: 1;/*抢占所有剩余空间*/
    				min-height: 400px;
    				background-color: lightsalmon;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="left">左边</div>
    			<div class="center">中间内容</div>
    			<div class="right">右边</div>
    		</div>
    	</body>
    </html>

#### 2.1.3、使用position定位布局 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>圣杯布局</title>
    		<style type="text/css">
    			html,
    			body {
         
    				/*一个屏幕视口*/
    				overflow: hidden;
    			}
    
    			.container {
         
    				position:relative;
    				height: 100%;
    			}
    
    			.left,
    			.right {
         
    				position:absolute;
    				top:0;
    				width: 200px;
    				min-height: 200px;
    				background: lightblue;
    			}
    
    			.left{
         
    				left: 0;
    			}
    			
    			.right{
         
    				right: 0;
    			}
    			.center {
         
    				margin:0 200px;
    				min-height: 400px;
    				background-color: lightsalmon;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="left">左边</div>
    			<div class="center">中间内容</div>
    			<div class="right">右边</div>
    		</div>
    	</body>
    </html>

### 2.2、双飞燕布局 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>双飞燕布局</title>
    		<style type="text/css">
    			html,
    			body {
         
    				height: 100%;
    				overflow: hidden;
    				/*一个屏幕视口*/
    			}
    
    			.container,
    			.left,
    			.right {
         
    				float: left;
    			}
    
    			.container {
         
    				width: 100%;
    			}
    
    			.container .center {
         
    				margin:0 200px;
    				min-height: 400px;
    				background: lightsalmon;
    			}
    
    			.left,
    			.right {
         
    				width:200px;
    				min-height: 200px;
    				background: lightblue;
    			}
    
    			.left {
         
    				margin-left: -100%;
    
    			}
    
    			.right {
         
    				margin-left: -200px;
    			}
    		</style>
    	</head>
    	<body class="clearfix">
    		<div class="container">
    			<div class="center">中间内容</div>
    		</div>
    		<div class="left">左边</div>
    		<div class="right">右边</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210520102510549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210512225447777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70