前端面试之轻松实现CSS两栏布局的几种方式(实践有效）

你的名字 2022-10-01 12:52 129阅读 0赞

这里实现得两栏布局是左边部分的宽度固定，右边部分的宽度自适应  
其效果就如下图，在浏览器屏幕大小变化的过程中，左边块的大小是不变的，右边块的宽度是自适应的。  
![在这里插入图片描述][20190612165843289.gif]  
实现方法有以下几种：  
**1通过设置浮动实现。需要两个div实现，一个div设置浮动，并设置宽度，另一个div不用设置任何东西**  
如果要给右边块设置什么的话下面两种方法也行：

*  **(left左浮动并设置宽度right设置margin-left为left的宽度也能实现）**
 *  **(left设置左浮动并和宽度right，right设置over-flow:hidden也能实现）**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>两栏布局——float</title>
    	<style>
    		div{
    			height:300px;
    		}
    		.left{
    			width:200px;
    			background-color:gray;
    			float:left;
    		}
    		.main{
    			background-color:pink;
    			/* margin-left:200px; */
    			/* 或者overflow:hidden; */
    		}
    	</style>
    </head>
    <body>
    	<div class = 'left'></div>
    	<div class = 'main'></div>
    </body>
    </html>

**2、通过相对定位和绝对定位实现。需要三个div，其中一个div是父容器，包含两个子元素。两个子元素设置相对定位，给上边的子元素设置宽度，下边的子元素设置left,值为上边子元素的宽度，再设置right:0。就能够实现了。（其中给父容器设置相对定位是因为可以让其设置绝对定位的子元素相对它进行移动；给上边的子元素设置绝对定位可以让下边的子元素跟它在同一行。）**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>两栏布局——absolue</title>
    	<style>
    		.outer{
    			position:relative;
    			height:300px;
    		}
    		.left{
    			position:absolute;
    			width:300px;
    			background-color:blue;
    			height:100%;
    		}
    		.main{
    			background-color:yellow;
    			position:absolute;
    			left:300px;
    			right:0;
    			height:100%;
    
    		}
    	</style>
    </head>
    <body>
    	<div class = 'outer'>
    		<div class = 'left'></div>
    		<div class = 'main'></div>
        <div>
    </body>
    </html>

3、**通过弹性盒子flex实现。需要三个div，其中一个div是父容器，包含两个子元素。父元素设置display:flex;上边子元素设置宽度，下边子元素设置flex:1**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>两栏布局——flex</title>
    	<style>
    		.outer{
    			height:300px;
    			width:100%;
    			display:flex;
    		}
    		.left{
    			width:300px;
    			height:100%;
    			background-color:blue;
    		}
    		.main{
    			flex:1;
    			background-color:yellow;
    			height:100%;
    		}
    	</style>
    </head>
    <body>
    	<div class = 'outer'>
    		<div class = 'left'></div>
    		<div class = 'main'></div>
    	</div>
    </body>
    </html>

认识以下flex:  
flex是三个属性的简称，即flex-grow、flex-shrink、flex-basis；flex得默认值为0 1 auto。

*  flex-grow：含义是对额外空间的占据量
 *  flex-shrink：这个属性只有在没有额外空间时起作用，意思是没有额外空间时，成员贡献出空间的大小
 *  flex-basis来设置，这个值呢，表示在分配额外空间之前，成员占据的空间，默认值为auto，意思就是你本来占多少就是多少

一般还有几个常用值  
flex：auto； 等同于 flex：1 1 auto; 意思就是占满额外空间，可缩放。  
flex:none; 等同于flex：0 0 auto； 意思是不占额外空间，不可缩放。

另外一种两栏布局：左右宽度比为1：2，右边又分为上下结构，高度比为1：1。实现代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.outer{
    			display:flex;
    			height:300px;
    			width:100%;
    			
    		}
    		.left{
    			height:100%;
    			width:33.3%;
    			background-color:pink;
    		}
    		.right{
    			flex:1;
    		}
    		.r_top{
    			height:50%;
    			background-color:blue;
    		}
    		.r_bottom{
    			height:50%;
    			background-color:green;
    		}
    
    
    	</style>
    </head>
    <body>
    	<div class = 'outer'>
    		<div class = 'left'></div>
    		<div class = 'right'>
    			<div class = 'r_top'></div>
    			<div class = 'r_bottom'></div>
    		</div>
    	</div>
    </body>
    </html>

[20190612165843289.gif]: /images/20220118/8a74ca463bb94a1a9c95541472f714dc.png