前端布局方案有以下幾種：固定布局
固定布局是最簡單的布局，也是小白上手最快的布局，直接設定寬度值和高度值進行布局，不需要考慮是否跟隨螢幕大小變化的布局方案，最能展現出網頁設計的原始效果。百分比布局/流式布局布局單位：
一律採用px
優點：
不會自適應螢幕大小。
高解析度的裝置，固定布局會留下很大的空白，會出現『**比例』，『三分定律』。綜合平衡和其他的設計原則。
螢幕解析度過小時會出現橫向滾動條。
效能消耗：由於一開始就寫了固定寬高，所以是所有布局方案中消耗效能最小的
百分比布局顧名思義就是採用數學中的百分比單位進行布局，不受視窗寬度的影響，通過百分比來限定布局元素，還可以根據客戶端解析度大小進行顯示。響應式布局布局單位：%
優點：
頁面布局根據螢幕解析度進行適配但是整體布局結構不變。
缺點：
視窗比例縮小到百分之五十，布局結構會發生錯亂，一般情況會搭配min-*或者max-*使用。
螢幕尺度跨度太大，在相對其原始設計過小或過大的螢幕上會比例失調。
效能消耗：
在所有方案中，我自認為是消耗效能最大的，比響應式布局還要消耗效能，因為每個裝置的寬高不一樣，瀏覽器需要進行大量的計算
響應式布局是ethan marcotte在2023年5月份提出的乙個概念，講的是乙個**可以適用於多個裝置，而不是為每個裝置都寫一套**，這個概念是為了解決市面上手機移動瀏覽而誕生的。布局單位：
**查詢、rem、vw/vh
優點：
不同解析度裝置靈活變化，能夠解決多裝置顯示適用的問題
缺點：
相容各種裝置工作量大，效率低
一定程度上改變原有的布局結構，使用者體驗差
這是一種折中的選擇方案，多方面導致無法達到頁面布局的最佳效果
效能消耗：相對於百分比來說消耗還算比較小的，但是相當於固定布局消耗還是比較大
**查詢
//**查詢必須在head裡面新增這一句**防止螢幕被手動放大和縮小
"viewport" name=
"viewport" content="width=device-width; initial-scale=
1.0;
maximum-scale=
1; user-scalable=no;">
//**查詢**一般min是從小到大 1=>10，max是從大到小 10=>1
// @media 查詢 必須指定裝置 這裡指定的是screen screen 螢幕寬度 也有其他屬性 max 最大 min 最小
@media screen and (max-width:
320px)
body}
@media screen and (min-width:
320px)
body}
@media screen and (min-width:
400px)
body}
@media screen and (min-width:
600px)
body
}
//**查詢max查詢**
@media screen and (min-width:
900px)
body}
@media screen and (max-width:
900px)
body}
@media screen and (max-width:
500px)
body}
@media screen and (max-width:
400px)
body
}
rem單位rem是相對於html根元素的大小，可以採用**查詢的方式動態設定html根元素大小
vw/vh布局%vw和vh是相對有瀏覽器可視區域的寬度和高度，跟百分比有些類似，但又不同
大部分相對於祖先元素，也有相對於自身的情況比如（border-radius、translate等)
vw/vh
相對於可視視窗的尺寸
響應式布局和百分比布局的區別：響應式布局可以隨著螢幕變化變化為多個布局格式，但是百分比從始到終都是乙個模板彈性布局/flex布局
布局單位:em
優點：
常見的布局中，通常有一部分是固定高度，而其他部分是剩餘大小分配的，這種情況我們可以使用彈性布局。
如果結合其他布局方式，可以說是完美的，不過需要有一些需要考慮的。
缺點：
相容性: 瀏覽器在 ie10 以上的可以考慮，ie10以下會出現相容性問題，需要做相容
效能
不怎麼消耗效能，因為不需要他去計算，是通過css屬性方式進去
em
em單位是相當於父級盒子來說的，因此得不到推廣，rem和em相對於百分比來說比較靈活。
國人製作網頁習慣用css強制定義字型大小，確保到每個裝置上的效果一致，採用的都是絕對單位px。要是從**易用性出發字型大小應該是可變的，一些眼睛視力比較弱的人需要放大字型去檢視頁面內容。然而現在佔據大部分瀏覽器市場的ie無法調整那些使用px作為單位的字型大小。國外則非常重視**的易用性，一部分外國**已經使用em作為字型單位。
grid布局/二維布局
grid(網格)布局是乙個二維布局是在基於網路上的布局系統。flex布局改善了我們的布局方式，但它主要是為了解決一維布局，而不是複雜的二維布局。flex和grid能夠協同工作且配合十分的好。grid(網格) 布局是第乙個專門為解決布局問題而建立的 css 模組定位布局採用grid布局的元素，稱為grid容器，簡稱「容器」。其所有直系子元素（直系子元素的子元素不包含在內）自動成為容器成員，被稱為grid專案，簡稱「專案」。
優點：
可以讓很多繁瑣的布局變得簡單，和flex結合使用更佳。
提高網頁的規範性和可重用性，將頁面模組的尺寸標準化，對於大型**的開發和維護能大大節約成本。
能讓整個**各個頁面的布局保持一致，增加頁面的相似度。
缺點：
消耗效能較小，因為不需要他去計算，是通過css屬性方式進去
通過css定位屬性進行定位，如子絕父相等等浮動布局
浮動布局會脫離文件流，還需要清除浮動
.father:before,#father:after
.father:after
.father
2019前端技術需要掌握的
1 html語義化標籤的理解 結構化的理解 能否寫出簡潔的html結構 seo優化。2 h5中新增的屬性，如自定義屬性data 類名classname等 新增表單元素 拖拽drag。3 h5中新增的api 修改的api 廢棄的api稍作了解 離線儲存 audio video 2.關於css 1 cs...
前端需要掌握的PHP基礎
php 是 php hypertext preprocessor 的首字母縮寫，php能夠生成動態頁面內容，能夠建立 開啟 讀取 寫入 刪除以及關閉伺服器上的檔案。能夠接收表單資料。能夠傳送並取回cookie。能夠新增 刪除 修改資料庫中的資料。下面介紹一些前端用到的基礎方法 php語法以結尾，注釋...
前端學習路線 前端攻城獅，需要掌握的技術
前端並不是簡單的寫寫頁面。對於很多人來說，也許不知道前端具體是做什麼的，也不知道自己該學什麼？前端本身就是包含很多，看似也很難下手。但是學習路線明確了自然就好了，所以我就整理了一下，重點在下面 自從 node.js 的出現令前端開發擁有了控 務器的能力，也意味著前端開發向接入層邁進。而前端行業現在的...