很長一段時間沒有寫靜態頁面布局，很多東西都開始模糊了，趁著最近做了乙個小專案，把一些靜態頁面布局的知識簡單梳理一下，加深自己的印象
一、流式布局——flex布局
1.流式布局的特徵
（1）寬度自適應，高度固定，但是不是百分百還原設計圖
（2）圖示和字型的大小都是固定的，並不是所有的東西都是自適應的
（3）對於大的banner圖（主要指輪播圖），寬度自適應
2.流式布局的型別
（1）左側固定，右側自適應
（2）右側固定，左側自適應
（3）兩側固定，中間自適應
（4）等分布局
3-flex布局（彈性布局、伸縮布局）
給乙個盒子設定了屬性：display：flex； 則該盒子就變成了乙個彈性盒子，而彈性盒子有自己的布局規則
(1)彈性盒子的主軸排列方式
justify-content——取值：flex-start 、flex-end、center、space-between、space-around
常用取值：space-between 均分對齊排列，兩邊貼邊；space-around 均分對齊排列，不貼邊
（2）flex布局的換行問題
flex布局和浮動不同，當多個盒子設定成左或右浮動時，如果一行排放不下時，會自動掉下去。但是flex布局多行排放需要手動設定flex-wrap屬性
取值：nowrap預設值，不換行，此時不管有多少的子盒子，都排在一行，盒子越多，每個盒子所佔的主軸空間越小；
wrap 當父盒子寬度不夠時就會換行
（3）flex屬性：是使用flex實現自適應布局時重要屬性
作用：當不想給盒子設定固定的寬度時，設定flex屬性來按比例給盒子分配寬度，從而實現了盒子寬度的自適應（隨父盒子寬度的改邊而改變）
取值:是數值
例如：
二、響應式布局——rem布局
rem：是乙個長度單位，會根據根元素(html)字型大小換算
rem布局相對於flex布局的優點是：（1）能夠讓整個頁面的字型和圖示自適應，而且rem布局能夠適配所有的螢幕，（2）不用管設計圖的大小，flex布局要注意二倍圖、三倍圖
rem布局原理：因為rem的基準點是根元素html的字型大小，因此給不同螢幕的html設定不同的font-size大小，就能使不同螢幕的布局元素得到適配
適配不同螢幕的方法：rem + **查詢
rem布局開發的步驟：（1）給拿到的設計圖固定乙個font-size，推薦定為100px或50px，便於計算;（2）使用**查詢，等比例的設定每一螢幕的html的字型大小，
比例關係：設計固定的font-size/設計圖的大小 =當前螢幕的font-size/當前螢幕的大小；（3）在設計圖上量出來的盒子大小全部轉換為rem單位即可，不需要考慮設計圖是否是二倍圖、三倍圖。
/*rem + **查詢：以設計圖：640px font-size:100px 為例 *//* 適配320px~400px的螢幕 */
@media(min-width:320px)
}/* 適配400px~640px的螢幕 */
@media(min-width:400px)
}/* 適配640px以上的螢幕 */
@media(min-width:640px)
}/*注意點:使用**查詢適配不同螢幕時，螢幕大小要從小的往大的寫，如上，因為後寫的會覆蓋先寫的*/
CSS 常用布局
1.寬度100 自適應視窗寬度 content content 只是定義了寬度為100 背景為白色與body色加以區分 footer footer 2.寬度100 最小定寬780px content content 只是定義了寬度為100 背景為白色與body色加以區分 這個布局中我們使用了min ...
css常用布局
單列布局長這個樣子，主要有兩種 普通單欄，通欄的單欄布局 比較簡單，設定 定寬 水平居中即可 頭部 內容尾部 執行結果鏈結描述 瀏覽器寬度超過960px時，外margin出現。當收縮瀏覽器寬度，小於960px時，margin為0，出現滾動條。執行結果鏈結描述 在header 和footer上再包裹一...
常用布局小節
1.居中塊級元素 定寬居中 div行內塊元素 文字居中 baba son2.定位問題 2.1 相對定位 大多情況，相對定位的作用是用來 約束 絕對定位 的參考點 2.2 絕對定位 3.假高度，假寬度填充元素後，記得去除假寬度 如果是浮動元素，建議保留寬高 ele4.字型的大小，行高 5.行內塊級元素...