html+css的布局有三種方式：自然布局/流動布局/定位布局
自然布局：沒有任何修飾的布局是自動靠左的。即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或m.。
流動布局：流式布局（liquid）的特點（也叫"fluid") 是頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，
那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。
定位布局：相對定位和絕對定位都是相對于父div標籤的。
相對------以這個元素的本來應該在的位置為參照點
絕對——以父div標籤的原點（左上角）為參照點。
由於外層是position:relative，所以裡層是absolute的話，則會以外層的左上角為位移參考對齊。當然外層只寫position:relative，寫上left,top這兩個值，則表示以：以這個元素的本來應該在的位置為布局參照原點進行left,top對齊。
還有一種情況是，只是乙個position:absolute;外層沒有position:relative，這時會找尋那個點為參考呢？這時候的原則是：如果某父級元素中有relative者，則以某父級元素為參考原點，如果沒有position:relative，則以body為參考原點。如果position:absolute外層沒有relative時，這兩個布局上是沒有區別的。
當然最後一種情況是：外層是：position:absolute;裡邊是position:relative，那會是什麼情況？按著原來的原則，absolute會參考body為布局原點，relative會參考他本來應該在的位置為布局原點，這時候其實就是參考外層左上角為布局原點。
其它的要看實際情況而定。
在移動端的發展出現了響應式布局和自適應布局；
響應式布局：分別為不同的螢幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著視窗調整而自動適配。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
自適應布局：自適應布局（adaptive）的特點是分別為不同的螢幕解析度定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨視窗大小的調整發生變化。
你可以把自適應布局看作是靜態布局的乙個系列。
關於移動端布局的幾種方式
關於移動端的布局有很多的方式，下面我就來談談個人的一些看法。首先因為手機螢幕的多樣化這為移動端的布局帶來了一定的難度，如何讓頁面自適應，現在有很多種解決方案，以下就是我關於移動端的一些解決方案，僅供參考 1.使用viewport進行布局 在html頁面的head標籤內引入這句 這句 可以讓頁面自動縮...
幾種布局方式
1.固定布局 方法裡把加好，然後根據設計稿設定相應的寬度即可，其他地方類似於pc端。優點 思路沿用pc端，上手比較快 缺點 大屏手機顯示網頁比較寬，而固定布局寬度參照永遠是固定的寬度 設計稿的大小 導致左右兩邊會有空白。手機橫屏的時候兩邊空白更亮。2.流動布局 方法適用百分比 做單位。優點 能更很好...
html 布局方式
基本布局方式 屬性 值 定位參照物 是否仍佔據文件流的位置 描述 position static 由文件流自然形成 是 預設值，無需顯式定義。元素出現在正常的流中 忽略 top,bottom,left,right,z index 宣告 relative 相對自己在文件流中的位置 是，該元素在文件流中...