前端页面的布局方式

布局方式

今天来细聊下页面的布局方式，主要分为两大类宽度自适应布局和高度自适应布局，在实际应用中不同方式的布局都具有不同的效果。

宽度自适应

两栏布局，左侧固定，右侧自适应。以下列举了5种方法：

1. margin-left,左侧固定宽度，并设置浮动float，右侧设定margin-left值为左侧宽度的大小。

   .boxLeft{
   	background: red;
   	height:600px;
   	width: 200px;
   	float: left;
   }
   .boxRight{
   	background: blue;
   	height:600px;
       margin-left: 200px;
   }
   

2.css3属性calc() ,左侧设置固定宽并且左浮动，右侧宽度为calc(100% - 宽度px);
注意：100%和符号后面都有一个空格

.boxLeft{
	background: red;
	width: 200px;
	height:600px;
	float: left;
}
.boxRight{
	background: blue;
	height:600px;
	float:left或者right;
   calc:(100% - 200px);
}

3.fiex,父级元素设置display:flex,左侧设置固定宽，右侧flex:1;

.box{
	display: flex;
}
.boxLeft{
	background: red;
	height:200px;
	width: 200px;
}
.boxRight{
	background: darkcyan;
	height:200px;
	flex: 1;

4.overflow:hidden,左侧固定宽度，右侧overflow:hidden

.boxLeft{
		background: red;
		width: 200px;
        height: 200px;
		float: left;
	}   
	.boxRight{
		background: blue;
        height: 600px;
        overflow: hidden;
	}

5.position:absolute,左侧固定宽度并设定位position:absolute,右侧margin-left

 .boxLeft{
    	background: red;
		width: 200px;
        height: 200px;
        position: absolute;
}   
.boxRight{
	   background: blue;
       height: 600px;
       margin-left: 200px;
}

转载:https://blog.csdn.net/animatecat/article/details/82691399