css布局汇总

1.块元素：   margin：0 auto；

2.行内块或行内元素：text-align:center;

3.position：static（默认），relative（相对自身的位置定位），absolute（相对最近的有定位元素的父盒子定位，除static之外的两种），定位配合top，left，right，bottom使用

4.float：left，right ，注意：需要清除浮动影响 

  1. 对后面一级的元素使用clear：both；
  2. 使用overflow：hidden；
  3. 对浮动的元素的父盒子设置容纳浮动盒子的高
  4. 使用伪元素.clear:after{content:".";display:block;clear:both;height:0;width：0；}
  5. 为了兼容IE，需要加上*zoom：1；      

5.利用对父盒子设置display：table-cell   ；但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .big{
 8             width: 500px;
 9             height: 500px;
10             background-color: #ccc;
11             text-align: center;
12             display: table-cell;
13             vertical-align: middle;
14         }
15         .small{
16             width: 200px;
17             height: 300px;
18             display: inline-block;
19             background-color: #53ff53;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="big">
25         <div class="small"></div>
26     </div>
27 </body>
28 </html>

6.对盒子进行position：absolute；top：50%；left：50%；margin-left:负的盒子宽度的一半；margin-top：负的盒子高度的一半；

7.对上面的代码进行小改动，在不知道盒子的大小的时候，对偏移的位置用transform：translate3d(-50%.-50%,0)

8.利用float：left和相对定位position：relative定位，细节是不需要知道居中的盒子的大小，不过需要对定位的盒子加一层盒子，先对中层盒子移动一半，然后再对小盒子移动多走的一半

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    .wrap{
	    	width: 300px;
	    	height: 300px;
	    }
		.big{
			background: #ccc;
			float: left;
			clear: both;
			position: relative;
			left: 50%;
		}
		.small{
			position: relative;
			left: -50%;
			background-color: #53ff53;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="big">
			<div class="small">sadskla</div>
		</div>
	</div>
</body>
</html>

　　

 

posted @ 2017-09-17 17:34  cyany_blue  阅读(190)  评论(0)  编辑  收藏  举报