关于自适应布局的一点总结

      css布局我想是经常困扰初学前端者的一个问题，至于我，也是初入门槛。在闲暇时间，就喜欢自个儿琢磨，自己也就是这样不断地进步的。我想经过不断的学习，前端技能肯定会更上一层楼的。

      今天就浅谈下css的自适应布局吧。

      所谓自适应布局，现在的浅显地认为就是百分比布局，它能随着浏览器窗口的缩放而自行改变其宽度和高度。当然也可以只设定宽度自适应或者高度自适应等。

      由于本人做的是移动端的开发，在输出页面的时候是限制页面的宽度的。而本次自适应布局也是在此限制下进行的。

      基本的实现是：在浏览器可见范围内输出两部分文档，分别实现自适应布局，即最终结果为，两部分段落能随着浏览器的缩放自动调整宽度和高度。

      HTML代码如下：

	
	


	

		

			

				
这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，
			
			

				
这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，
			
		
	

 css代码如下：

	html,body,object,iframe,div,span,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dd,dt,dl,img{margin: 0;padding:0;}
	ul,ol,li{list-style: none;}
	img{display: block;}
	.clearfix{zoom:1;clear: both;}
	.clearfix:after{display: block;visibility: hidden;content: "";font-size: 0;clear: both;height: 0;}/* 清除浮动为什么要使用伪类after */
	.the_body{width:100%;min-width: 320px;max-width: 640px;margin: 0 auto;background: #ffd010;overflow: hidden;/* 这里为什么要加overflow */}
	.box{margin: 10px 1.5625%;}
	.box .box_lf{width: 49%;margin-right: 1%;float: left;background: #fff;}
	.box .box_rf{width: 49%;margin-left: 1%;float: left;background: #fff;}
	.box .the_cont{padding:10px 5px;}

       在本次的布局中，还定义了全局样式，主要初始化段落或列表的间距、样式等。也用到了清除浮动的样式，至于清除浮动的样式随后总结。最终的效果如下：

      在这里，我用一个列表来展现这两部分的文本。给ul设置一个margin，上下margin固定为10px，左右margin为百分比，是1/64。在这里不能给每个li设置50%的宽度，因为要给它们一个间距。那么在这里设置li的宽度为49%，距左或距右为1%。为了让文本显示地更美观一些，就给每段文本加了一个内间距（padding:10px 5px;）。

      那么，自适应布局是怎么实现的呢？就是这个百分比的设置，在这里百分比的设置是关键，文本的宽度加上文本的间距刚好是ul的一半，即50%。最后，加一个浮动，让各段文本向左浮动就可以实现了。

      这里的浮动也是一个难点，在之后将会总结。

      另外，再做一些特殊的处理，让文字在一行上显示，并且做出一个溢出则隐藏的效果。

      最终的效果如下：

      上面这张图是在640px下的效果。

      下面这张图是在320px下的效果。

      而实现以上效果，只需对文本添加以下样式：white-space: nowrap;text-overflow:ellipsis;overflow: hidden;。这段css代码是在文本溢出时就隐藏，并以省略号显示。

      对自适应布局的总结暂时就先到这里，现在也只是浅显地总结，随着学习的深入，将进一步总结。