码迷,mamicode.com
首页 > Web开发 > 详细

css布局汇总

时间:2017-09-17 19:05:33      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:log   stat   设置   nsf   static   ie8   charset   splay   hid   

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>

  

 

css布局汇总

标签:log   stat   设置   nsf   static   ie8   charset   splay   hid   

原文地址:http://www.cnblogs.com/cyany/p/7536400.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!