css布局我想是經常困擾初學前端者的乙個問題，至於我，也是初入門檻。在閒暇時間，就喜歡自個兒琢磨，自己也就是這樣不斷地進步的。我想經過不斷的學習，前端技能肯定會更上一層樓的。
今天就**下css的自適應布局吧。
所謂自適應布局，現在的淺顯地認為就是百分比布局，它能隨著瀏覽器視窗的縮放而自行改變其寬度和高度。當然也可以只設定寬度自適應或者高度自適應等。
由於本人做的是移動端的開發，在輸出頁面的時候是限制頁面的寬度的。而本次自適應布局也是在此限制下進行的。
基本的實現是：在瀏覽器可見範圍內輸出兩部分文件，分別實現自適應布局，即最終結果為，兩部分段落能隨著瀏覽器的縮放自動調整寬度和高度。
html**如下：
html,body,object,iframe,div,span,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dd,dt,dl,img
ul,ol,li
img.clearfix
.clearfix:after/* 清除浮動為什麼要使用偽類after */
.the_body
.box
.box .box_lf
.box .box_rf
.box .the_cont
在這裡，我用乙個列表來展現這兩部分的文字。給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**是在文字溢位時就隱藏，並以省略號顯示。
對自適應布局的總結暫時就先到這裡，現在也只是淺顯地總結，隨著學習的深入，將進一步總結。
關於UILabel自適應size的一點小總結
非常簡單，設定這個屬性就可以了 label adjustsfontsizetofitwidth yes 純 計算內容size cgsize s str boundingrectwithsize cgsizemake 200,maxfloat options nsstringdrawingusesli...
布局的一點總結
1.box布局 box布局實現了浮動，並且預設沿著一行排列div。超過部分在頁面可視區域之外 一行的右邊 超過部分不會跑到下一行。box布局的好處 如果左對齊，不用考慮子元素的寬度，box 就可以實現真正意義上的流體布局。只要給出相應屬性，瀏覽器會幫我們做額外的計算。2.選擇按鈕 如果用input的...
Bootstrap布局知識點 自適應布局
柵格布局基本的概念在這就不多介紹 1 container和container fluid的區別 1 container 內容居中，左右兩邊為空 2 container fluid 內容佔滿整個螢幕2 col和col auto的區別 col auto 內容自適應填充 內容多長，就佔多長 col 預設填...