CSS布局技巧详解-优快云博客

注1：博客宽度限制附例图片未显示完全

1 让元素(span div)居中的常用方法margin:auto

<html>
	<head>
		<style type="text/css">
		#main{
 			 width: 600px;	  /*设置块级元素的 width 可以阻止它从左到右撑满容器*/
 			 margin: 0 auto;  /*然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。*/ 
			 border:double; 
			 /* 使用MAX-WIDTH可以使浏览器更好的处理窗口的大小*/
			 max-width:600px;
			}
		</style>
		<title>margin:auto的使用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
	<body>
		<div id="main"></div>
	</body>
</html>

效果图如下

2 盒装模型—PADDING,BORDER影响元素的大小，MARGIN对大小无影响

<html>
	<head>
		<style type="text/css">
		.simple {
 				 width: 500px; /*当你设置了元素的宽度，实际展现的元素却能够超出你的设置*/
 				 margin: 20px auto;/* margin不会影响元素的大小*/
				 border:double;
				}

	    .fancy {
 				 width: 500px;
 				 margin: 20px auto;
 				 padding: 50px;/* 内边距会影响元素的大小*/
 			 	 border-width: 10px;/*边框会影响元素的大小*/
				 border:double;
			   }

		</style>
		<title>PADDING,BORDER的使用，MARGIN对大小无影响</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
	<body>
		<div class="simple">我小一些</div>
		<div class="fancy">我大一些</div>
	</body>
</html>

3 元素浮动之后的清除浮动的方法

<html>
	<head>
		<style type="text/css">
		#main{
 			 width: 600px;	  
			 border:double;
			 height:100px;
			 float:left; /* 使此DIV向左浮动*/
			 
			}
		.clear {
  			clear:left; /*清除浮动*/
			height:50px;
		  }
		 .box{
		 	 width: 600px;	 
			 border:double;
			 height:150px;
		 }
		 

		</style>
		<title>清除浮动的使用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
	<body>
		<div id="main"></div>
		<div class="box clear"></div><!-- 可使这个DIV拥有两个类的效果 重叠效果继承第一个类 如HEIGHT-->
	</body>
</html>

4 图片高度大于父元素的高度的时候的处理OVERFLOW

<html>
	<head>
		<style type="text/css">
		.main{
 			 width: 600px;	  /*设置块级元素的 width 可以阻止它从左到右撑满容器*/
			 height:30px;
 			 margin: 0 auto;  /*然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。*/ 
			 border:double; 
			}
		.clearfix {
				 	overflow: auto;/*如果图片高度超过了元素本身的高度可以使用OVERFLOW:AUTO来解决*/
				}

		</style>
		<title>overflow的使用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
	<body>
		<div class="main clearfix"><img src="111.jpg" /></div>
	</body>
</html>

5 布局的新方法FLEX布局

<html>
	<head>
		<style type="text/css">
				.container {
				  display: -webkit-flex;
				  display: flex;
				  border:double;
				}
				.bor{
					border:double;
				}
				.initial {
				  -webkit-flex: initial;
						  flex: initial;
				  width: 200px;
				  min-width: 100px;
				}
				.none {
				  -webkit-flex: none;
						  flex: none;
				  width: 200px;
				}
				.flex1 {
				  -webkit-flex: 1;
						  flex: 1;
				}
				.flex2 {
				  -webkit-flex: 2;
						  flex: 2;
				}

		</style>
		<title>FLEX布局的使用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
	<body>
		<div class="container">
			<div class="initial bor">空间足够的时候，我的宽度是200px，如果空间不足，我会变窄到100px，但不会再窄了。 </div>
			<div class="none bor">无论窗口如何变化，我的宽度一直是200px。 </div>
			<div class="flex1 bor">我会占满剩余宽度的1/3。 </div>
			<div class="flex2 bor">我会占满剩余宽度的2/3。 </div>
		
		</div>
	</body>
</html>