前端頁面的佈局方式

佈局方式

今天來細聊下頁面的佈局方式，主要分爲兩大類寬度自適應佈局和高度自適應佈局，在實際應用中不同方式的佈局都具有不同的效果。

寬度自適應

兩欄佈局，左側固定，右側自適應。以下列舉了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