靜態布局
自適應布局
流式布局
彈性布局
響應式布局
布局的應用
常見布局問題
靜態布局就是傳統的**形式，網頁上的所有元素的尺寸一律使用px作為單位。當在螢幕寬高有調整時，出現橫向和豎向的滾動條來查閱被遮掩部分。
編寫簡單，沒有相容性問題。
不能根據使用者的螢幕尺寸做出不同的表現。
建立多個靜態布局分別為不同的螢幕解析度定義布局，每個靜態布局對應乙個螢幕解析度範圍。
使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。
螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
可以在不同尺寸和介質的裝置切換不同的樣式。
在同乙個裝置下還是靜態布局，不能根據螢幕尺寸做出相應的表現。
流式布局頁面元素的寬度按照螢幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。
使用%百分比定義寬度，高度大都是用px來固定，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
可以應對不同尺寸的螢幕，是移動端開發最常用的布局方式。
如果螢幕尺度跨度太大，那麼在過小或過大的螢幕上不能正常顯示或顯示不協調。
包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同 [ 流式布局 ] 或 [ 靜態/固定布局 ] )。
使用 em 或 rem 單位進行相對布局，相對%百分比更加靈活，同時可以支援瀏覽器的字型大小調整和縮放等的正常顯示。
理想狀態是所有螢幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應。
這種只是寬度自適應，高度不是自適應，不能滿足對高度，或元素間距有要求的設計。
每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變。
通常使用 @media **查詢和網格系統配合進行布局。
設計難、實現難、成本大。
如果只做pc端，那麼靜態布局（定寬度）是最好的選擇；
如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，乙份css+乙份js調節font-size搞定。
如果pc，移動要相容，而且要求很高那麼響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據**查詢做不同的布局。
! important>內聯樣式》id選擇器》類選擇器、屬性選擇器、偽類選擇器》元素選擇器、偽物件》萬用字元選擇器》繼承的屬性》瀏覽器預設樣式。
margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
border(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
content(內容) - 盒子的內容，顯示文字和影象。
display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素。
visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素。
使用visibility:hidden比display:none效能上要好。
display:none切換顯示時頁面產生回流（當頁面中的一部分元素需要改變規模尺寸、布局、顯示隱藏等，頁面重新構建，此時就是回流。所有頁面第一次載入時需要產生一次回流）。而visibility切換是否顯示時則不會引起回流。
在文件流中，乙個塊級元素如果沒有設定height，其height是由子元素撐開的。也就是子元素多高，父元素就多高。
但是為子元素設定浮動後，子元素會完全脫離文件流，此時會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。
由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂，也就是所謂的高度塌陷。
解決方案
1.給父級div定義高度
2.使用空元素，如
(.clear)
3.父級div定義 display:table
4.父元素設定 overflow：hidden、auto；
前端常見布局方式實現
這種方式最好應用於 按鈕 文字之類的居中模式，否則就需要借助inline block來進行居中布局。適用於塊級元素不給出寬高的情況下 需要借助transtrom的tanslatex方法 parent child子元素寬度已知的情況下 parent子元素 div 絕對定位 父元素需要被定位 子元素 t...
前端常見的布局方式
一 靜態布局 static layout 布局概念 最傳統 原始的web布局設計。網頁最外層容器 outer 有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條 overflow scroll 來實現滾動查閱。優點採用的是css2之前的寫法,不存在瀏覽器相容性。布局簡單。缺點但是移動端不...
前端布局方式及其選擇
1.靜態布局 靜態布局 給頁面元素設定固定的寬度和高度，單位用px，當視窗縮小，會出現滾動條，拉動滾動條顯示被遮擋內容。針對不同解析度的手機端，分別寫不同的樣式檔案。2.彈性布局 css3引入的，flex布局 優點在於其容易上手，根據flex規則很容易達到某個布局效果，然而缺點是 瀏覽器相容性比較差...