css布局我想是经常困扰初学前端者的一个问题，至于我，也是初入门槛。在闲暇时间，就喜欢自个儿琢磨，自己也就是这样不断地进步的。我想经过不断的学习，前端技能肯定会更上一层楼的。
今天就浅谈下css的自适应布局吧。
所谓自适应布局，现在的浅显地认为就是百分比布局，它能随着浏览器窗口的缩放而自行改变其宽度和高度。当然也可以只设定宽度自适应或者高度自适应等。
由于本人做的是移动端的开发，在输出页面的时候是限制页面的宽度的。而本次自适应布局也是在此限制下进行的。
基本的实现是：在浏览器可见范围内输出两部分文档，分别实现自适应布局，即最终结果为，两部分段落能随着浏览器的缩放自动调整宽度和高度。
HTML代码如下：
<!doctype html> <html> <head> <title>浅谈自适应布局</title> <meta charset="utf-8"/> </head> <body> <section class="the_body"> <ul class="box clearfix"> <li class="box_lf"> <p class="the_cont">这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，这是左边的一段文字，</p> </li> <li class="box_rf"> <p class="the_cont">这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，这是右边的一段文字，</p> </li> </ul> </section> </body> </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代码是在文本溢出时就隐藏，并以省略号显示。
对自适应布局的总结暂时就先到这里，现在也只是浅显地总结，随着学习的深入，将进一步总结。