**布局：原始布局方式，利用**的特性展示布局，沒有頁面邏輯且大量冗餘**，現在幾乎不用
固定寬：常用960px，移動端縮放表現差，不友好
流式：使用float實現動態浮動，各解析度下樣式無法保證
flex彈性盒子：簡潔且強大，主流使用
css柵格布局（grid）：將網頁分成一系列行和列，將對應內容放入對應區域；新屬性相容性差
1.組成部分：彈性容器 + 彈性專案（必須為容器的子代）
2.可對容器進行設定的屬性：flex-flow、justify-content、align-items、align-content
flex-flow是flex-direction和flex-wrap的組合:
flex-direction: row/row-reverse/column/column-reverse;
flex-wrap: wrap/nowrap/wrap-reverse;
flex-direction為row時，justify-content用與彈性項的橫向分布;
column時justify-content會失效，此時只能用align-items調整分布；
justify-content：flex-start/flex-end/center/space-between（兩端對齊）/space-around;
flex-direction為row時，align-items用於彈性項在容器中的縱向分布；
column時用於彈性項橫向分布；
align-items：flex-start/flex-end/center/baseline（內部第乙個元素的基線）/strectch（拉伸）;
當flex項允許折行，且確實有多行時，使用align-content屬性調整格式：
align-content: flex-start/flex-end/center/space-between/space-around/stretch
設定order屬性來進行排序：數字越小越靠前，不必是連續的數字，類似z-index；
設定align-self來覆蓋align-item設定的縱向對其格式；
flex屬性預設為flex: 0 1 auto;
三個值分別表示flex-grow（伸展）、flex-shrink（收縮）、flex-basis（基數）;
flex: 1; 是flex: 1 1 0%;的簡寫（0%表示彈性項寬度完全取決於grow的值）
此三個屬性，flex-basis只有當容器設定為可折行（wrap）時才生效，shrink當彈性項的basis值之和大於容器時生效（各項按設定的比例收縮）
title
first
second
third
forth
.box
.logo
html角度：消除瀏覽器預設縮放頁面
@import url('./') (min-width: 481px) and (max-width: 768px);@media (min-width:481px) and (max-width: 768px)
}
使用方法：display: grid/ inline-grid;
元素：容器、內容項
個人感覺grid更側重於整體布局，雖然能實現比flex更細粒度的頁面控制，但相比於flex卻也更複雜。可問題是這樣更複雜的實現實用價值並不大，更何況還有相容性問題。所以目前很少有大面積用grid布局的網頁，看以後css社群如何開發grid的新用法吧。
參考：
css 響應式布局
響應式 型別 all所有 braille盲文觸覺裝置 embossed盲文印表機 print手持裝置 projection列印預覽 screen彩屏裝置 speech 聽覺 類似的 型別 tty不適用畫素的裝置 tv 電視 用法 media embossed 盲文印表機是綠色 box backgro...
CSS 響應式布局
學的太不仔細了，仰天默淚 media query 查詢 常見的屬性 基本語法 href link.css media only screen and max width 480px 先引入外部樣式表，media是css才有的屬性，只有在螢幕解析度小於或等於480px畫素的時候 才會這個外聯樣式才有效...
css 響應式布局
一.使用html中的viewport來實現 viewport語法如下 html 1 width 控制 viewport 的大小，可以指定的乙個值或者特殊的值，如 device width 為裝置的寬度 單位為縮放為 100 時的 css 的畫素 2 height 和 width 相對應，指定高度。3...