弹性布局小介绍

1.弹性布局

弹性布局是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持，可以在 Web 应用开发中使用.

 

2.弹性布局与响应式布局的区别

弹性布局不需要人为的计算百分比,他能自动分配大小,你只需要写每一个所占的比例就行比如A和B,你想让A占2/3,B占1/3.你就可以写2,1就行.浏览器自动分配.也可以写定值. 

3..弹性布局的一般步骤和注意事项

	1 找到其父标签 设置display:box;
	2 在子标签中通过box-flex属性设置布局所占百分比(可以是数字或者固定px),内容撑开其大小;
	3 子标签默认是水平布局;
	4 要考虑浏览器兼容问题,很多浏览器不支持,因为w3c对这种标准还在发展建设中;
	5 弹性布局有很多不同的写法,以课堂笔记的写法为主.

4.下面就是举的一个例子:还有几个对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹性布局</title>
		<style type="text/css">
			*{margin: 0;
			padding: 0;
			}
			html,body{height: 100%;}
			/*顶部*/
			header{
				border: 1px solid green;
				/*这行代码意思是让其子标签可以弹性伸缩*/
				display: -webkit-box;
				display: -moz-box;
				
				/*弹性盒子的一些属性*/
				/*布局方式水平还是垂直*/
				/*-webkit-box-orient:horizontal;*/
				/*-moz-box-orient: horizontal;*/
				/*水平对齐,默认就是水平对齐*/
				
				
				/*-webkit-box-orient: vertical;*/
				/*-moz-box-orient: vertical;*/
				/*垂直对齐*/
				
				
				
				/*水平对齐方式*/
				/*-webkit-box-align: end;*/
				/*-moz-box-align: center;*/
				
				
				
				
                 /*垂直对齐方式*/
                 /*-webkit-box-pack: end;*/
                 /*-moz-box-pack: start;*/ 
				
				
				
			}
			
			.logo{
				
				/*height: 200px;*/
				width: 200px;
				background: yellow;
				/*-webkit-box-flex: 1;*/
				/*-moz-box-flex: 1;*/
				
			}
			nav{
				background: red;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
		
					}
					
					
					
			.warp{
				height: 50%
			}
			section{
				display: -webkit-box;
				display: -moz-box;
				height: 200px;
				border: 1px dashed black;
				-webkit-box-orient:horizontal;
				-moz-box-orient: horizontal;
				/*水平,默认就是水平*/
				
				
				/*-webkit-box-orient: vertical;*/
				/*-moz-box-orient: vertical;*/
				/*垂直*/
				
				
				
				/*水平对齐方式*/
				/*-webkit-box-align: end;*/
				/*-moz-box-align: end;*/
				
				
				
				
                 /*垂直对齐方式*/
                 /*-webkit-box-pack: center;*/
                 /*-moz-box-pack: center;*/ 
				
				
			}
			
			.left{
				background-color: green;
				-webkit-box-flex: 1;
				-webkit-box-flex: 1;
				
				
			}
			
			.center{
				background-color: aqua;
				-webkit-box-flex:2 ;
				-moz-box-flex: 2;
				/*border: 10px solid chartreuse;*/
			}
			.right{
			background-color: salmon;
				-webkit-box-flex:1 ;
				-moz-box-flex:1 ;
				
			}
			
			footer{
				display: -webkit-box;
				display: -moz-box;
				height: 20%;
			}
			footer div{
				border: 1px solid red;
				-webkit-box-flex: 1;
				-webkit-box-flex: 1;
			}
			
			
		</style>
	</head>
	<body>
		<div class="warp">
			<header>
				<div class="logo">
					左logo
				</div>
				<nav>导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航
					导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
					导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
					导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
					导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
					导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
					导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
					航导航导航导航导航导航导航导航导航导航导航导航
				</nav>
			</header>
			
			<section>
				<div class="left">左边</div>
				<div class="center">中间</div>
				<div class="right">右边</div>
				
			</section>
			
			<footer>
				<div class="one">11</div>
				<div class="two">22</div>
				<div class="three">33</div>
				<div class="four">44</div>
			</footer>
		</div>
		
		
		
	</body>
</html>

　　本人也是新手,希望写的不好的地方大神多指点QAQ

posted @ 2016-08-09 16:33  骑着小猪来编程  阅读(304)  评论(0)    收藏  举报