css布局小技巧

一、左右布局

1. 使用display: inline-block;

注意，要解决display: inline-block;带来的空隙

<style>
	*{margin: 0;padding: 0;}		
	.box1{
		border: 1px solid red;width: 200px;
		/* 解决display: inline-block;带来的空格间隙 */
		letter-spacing: -3px;
		font-size:0;
	}
	.box1 div{
		width: 50%;height: 50px;box-sizing: border-box;border: 1px solid blue;				
		display: inline-block;
		/* 解决display: inline-block;带来的底部空隙 */
		 vertical-align: top; 								
	}
</style>
<div class="box1">
	<div></div>
	<div></div>			
</div>

2. 使用浮动定位float，

注意，父元素要清除浮动。详情参照几种常用的清除浮动方法

<style>
	*{margin: 0;padding: 0;}	
	.clearfix:after {content: " ";display: block;clear: both;height: 0;}
	.clearfix {zoom: 1;}
	.box1{border: 1px solid red;width: 200px;		}
	.box1 div{
		width: 50%;height: 50px;box-sizing: border-box;border: 1px solid blue;				
		float: left;								
	}
</style>
<div class="box1 clearfix">
	<div></div>
	<div></div>			
</div>

3. 使用绝对定位position: absolute;

,注意，绝对定位的话，父集元素要给相应的高，并且添加position: relative;

<style>
	*{margin: 0;padding: 0;}	
	.box1{
		border: 1px solid red;width: 200px;	
				
		height: 100px;
		position: relative; 
	}
	.box1 div{box-sizing: border-box;border: 1px solid blue;width: 50%;height: 50px;}
	.box1 div:nth-of-type(1){
		position: absolute;	 left: 0;top:0;
	}
	.box1 div:nth-of-type(2){
		position: absolute;	 right: 0;top:0;				
	}
</style>
<div class="box1 clearfix">
	<div></div>
	<div></div>			
</div>

4. 使用display：flex,

注意：flex布局要做兼容性处理

<style>
	*{margin: 0;padding: 0;}
	.flex_box {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;align-items: center;-webkit-align-items: center;}
	.flex1 {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
	.box1{border: 1px solid red;width: 200px;	}
	.box1 div{box-sizing: border-box;border: 1px solid blue;width: 50%;height: 50px;}
</style>
<div class="box1 flex_box">
	<div class="flex1"></div>
	<div class="flex1"></div>			
</div>

6. 其他方法,

这是左边固定，右边自适应的布局

<style>
	*{margin: 0;padding: 0;}	
	.box1{border: 1px solid red;width: 100%;}			
	.box1 div{box-sizing: border-box;border: 1px solid blue;}
	.box1 div:nth-of-type(1){
		width: 100px;height: 100%;float: left;
	}
	.box1 div:nth-of-type(2){
		overflow: hidden;height: 100%;
	}
</style>
<div class="box1 clearfix">
	<div>111</div>
	<div>222</div>			
</div>

二、左中右布局—基本与上面的无异，稍作修改宽度就可以了

三、水平居中

1. margin

<style>
	*{margin: 0;padding: 0;}	
	.box1{border: 1px solid red;width: 100%;height: 300px;}			
	.box1 div{
		box-sizing: border-box;border: 1px solid blue;height: 100px;width: 100px;
		margin: 0 auto;
	}
</style>
<div class="box1">
	<div>111</div>		
</div>

• display: inline-block

<style>
	*{margin: 0;padding: 0;}	
	.box1{
		border: 1px solid red;width: 100%;height: 300px;
		text-align: center;
	}			
	.box1 div{
		box-sizing: border-box;border: 1px solid blue;height: 100px;width: 100px;
		display: inline-block
	}
</style>
<div class="box1">
	<div>111</div>		
</div>

2. 绝对定位

<style>
	*{margin: 0;padding: 0;}	
	.box1{
		border: 1px solid red;width: 100%;height: 300px;
		position: relative;
	}			
	.box1 div{
		box-sizing: border-box;border: 1px solid blue;height: 100px;width: 100px;
		position: absolute;left: 50%;top: 0;
		-webkit-transform:  translateX(-50%);
		-moz-transform:  translateX(-50%);
		-ms-transform:  translateX(-50%);
		-o-transform: translateX(-50%);
		transform:  translateX(-50%);
	}
</style>
<div class="box1">
	<div>111</div>		
</div>

3. flex布局

<style>
	*{margin: 0;padding: 0;}	
	.box1{
		border: 1px solid red;width: 100%;height: 300px;
		display: flex;
		justify-content:center;
	}			
	.box1 div{box-sizing: border-box;border: 1px solid blue;height: 100px;width: 100px;}
</style>
<div class="box1">
	<div>111</div>		
</div>

四、垂直居中

1.transform

<style>
	*{margin: 0;padding: 0;}	
	.box1{border: 1px solid red;width: 100%;height: 300px;	}			
	.box1 div{
		box-sizing: border-box;border: 1px solid blue;height: 100px;width: 100px;
		position:relative;top: 50%;left: 0;
		transform:translateY(-50%);
	}
</style>
<div class="box1">
	<div>111</div>		
</div>

五等其他小技巧

后续补充。。。。