頁面的布局方式是塊狀元素依次從上至下、從左至右進行布局
對公司、企業而言視覺極佳的布局效果能讓在瞬間抓住客戶的心，能吸引潛在的合作者。
適用性，根據不同行業情況進行不同效果的製作。
吸引性，視覺效果優秀的布局效果能瞬間吸引客戶。
靜態布局是最為原始的布局方式，沒有什麼技術性可言，往往是計算機行業剛剛入門的小白使用的布局方式。製作的網頁上的元素尺寸一律以px為單位。
.bor
.bor p
.border-pic
.border-pic img
優點:這種布局方式不管是對資深的前端開發工程師還是剛入門的小白來說都是最簡單的，最讓人容易以接受、學習的，沒有我們所說的相容性的問題。這種布局方式大多用在門戶**和企業的官網上，這些官網的裝置的尺寸是固定的，這種布局方式往往是最簡單的方法。
缺點：不會隨著pc端的螢幕大小而變化。
彈性布局可以簡便、完整、響應的實現各種頁面上的布局。與靜態不同的是，使用em或rem單位（lem=16px，1rem=10px）進行相對布局，相對使用百分比更加方便、靈活，相應同時支援瀏覽器的字型大小調整和縮放的等正常顯示。
優點：
1.適應性強，在做多種不同的螢幕解析度不同的介面是非常使用。
2.隨意按照寬度、比例劃分元素的寬高。
3.可以輕鬆的改變元素的顯示順序。
4.網頁布局實現快捷，維護起來更加容易。
如果做移動端時，如果客戶對細微的之處的要求不高，使用彈性布局進行製作是最好的選擇，乙份css+乙份js調節font-size搞定。
缺點：瀏覽器相容性較差，只能相容到ie9及以上。
自適應布局分別為不同螢幕不同解析度定義布局，即是建立多個靜態頁面，每個靜態頁面對應乙個螢幕解析度的乙個範圍內。在改變不同的螢幕解析度可以切換到不同的靜態布局上，但是布局中的元素位置會發生改變，但是在每個靜態布局中，頁面中的元素不會隨著視窗大小的調整發生變化。使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局。
優點：
1.對**的複雜程度相容性更大；
2.對開發工程師來說製作的成本代價更低；
3.**執行效果更高效；
4.測試時更加容易，運營相對更加精準。
缺點：在現如今的移動端設計百花齊放的時期之下，同乙個**往往需要為不同的裝置製作不同的頁面，不但會增加開發成本，還會因為客戶的需求改變時，可能會改動多套**、流程相比較來說較繁瑣。
流式布局的布局方式是頁面的元素的寬度按照螢幕的解析度進行適配的調整，但是整體布局不變，也稱之為柵欄系統。使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
缺點：螢幕大小變化時，頁面元素也隨之變化但是布局不變。這就會因為如果螢幕太大或太小都會布局時元素無法正常顯示。
響應式布局是css3增加的新布局方式，該布局方式2023年提出來的乙個概念，說白了就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用「大勢所趨」來形容也不為過。響應式幾乎成為優秀頁面布局的標準。
設計方法：**查詢+流式布局。通常使用@media**查詢，和網格系統配合相對布局單位進行布局，實際上說白了就是綜合響應式等技術通過css給單一網頁不同裝置解析度返回不式時的技術。
優點：適應pc端和移動端，如果有足夠的耐心，頁面效果會很完美。
缺點：
1.只能適應主流的寬高；
2.如果匹配足夠多的裝置螢幕的大小，對於工程師來說工作量不小，設計更需要多個版本，工作量增大。
浮動布局進行呼叫浮動屬性改變頁面中元素的位置，浮動布局應該是目前各大**用的最多的一種布局方式了，但是也特別複雜。浮動元素是脫離文件流的，但不脫離文字流。浮動元素有左浮動（float : left）和右浮動（float : right）兩種
.lian
.lian img
.phone ul li
.phone ul li img
.view
.view input
p.pos_fixedh2.pos_top
h2div.stickyweb前端html css常用布局02
廣東省 交易中心是由廣東省國資委出資控股的唯一一家省級 交易平台。現為中國 協會常務理事單位 廣東省 投融資協會會長單位 廣東省 協會副會長單位 廣東省有色金屬行業協會副會長單位。交易中心結合 廣東的地域特點和產業優勢，創新開展 現貨電子交易業務，致力於打造聯接粵港澳的跨境人民幣 現貨電子交易市場，...
前端7大常用布局方式
頁面的布局方式是塊狀元素依次從上至下 從左至右進行布局 對公司 企業而言視覺極佳的布局效果能讓在瞬間抓住客戶的心，能吸引潛在的合作者。適用性，根據不同行業情況進行不同效果的製作。吸引性，視覺效果優秀的布局效果能瞬間吸引客戶。靜態布局是最為原始的布局方式，沒有什麼技術性可言，往往是計算機行業剛剛入門的...
四種常用布局方式
css四種常用布局方式 常用的四種方式有display，浮動布局，定位布局和伸縮盒布局。1.display布局方式 其中display屬性有三個屬性值，分別為inline，block，inline block。display inline 將塊級元素轉變為行內元素 display block 將行內...