關于CSS布局&CSS居中&媒體查詢三者的見解
css布局：
單欄布局：
- 分為最大寬度和固定寬度，80%以上的頁面使用該方法。
- 為了編寫簡單和使用方便一般使用固定寬度。
雙列布局：
- 一列固定寬度，一列自適應寬度（在html中需要先寫固定寬度再寫自適應寬度）。
三欄布局：
- 兩側固定寬度，中間自適應寬度（在html中需要先寫固定寬度再寫自適應寬度））。
圣杯與雙飛翼布局：
- 圣杯布局也雙飛翼布局也都達到了上述的三欄布局效果；
- 圣杯布局也雙飛翼布局主要是為了突出中間的固定寬度的主體部分；
- 二者在html中先寫自適應寬度再寫固定寬度，為了突出主體的重要性；
- 圣杯布局在瀏覽器縮小到一定程度時候，會出現樣式錯誤。但是在雙飛翼布局中解決了上述問題，但是代碼量也更大了。
水平等距排列：
- 主要是使用浮動和負margin達到該效果。
流式布局：
- 百分比布局，也叫流式布局，因為寬度是百分比，但是高度是按px來寫的;
- 適用頁面特點：左側固定+右側自適應或者左右固定寬度+中間自適應（專業一點說法：關鍵元素高寬和位置都不變，只有容器元素在做伸縮變換）
flex布局：
- Flexbox為css提供了功能強大的彈性布局方式。
- 在PC端兼容性稍差，移動端是其天然適合的場景（關于flex布局后續有獨立的一文作詳解）。
display：flex;
grid布局：
- 網格布局（Grid）是最強大的 CSS 布局方案。
- 它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過復雜的 CSS 框架達到的效果，現在瀏覽器內置了。
- Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。
- Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。
- Grid 布局則是將容器劃分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。Grid 布局遠比 Flex 布局強大。
- 目前對于老式瀏覽器兼容性差，對與IE11仍有問題。
移動端布局：
- 設置meta；
- 適配是移動端的關鍵，一般使用媒體查詢或者復雜的動態rem解決，使用flex也是移動端布局的常用方案。
css居中：
水平居中：
- text-align:center;給文字或者圖片的父元素設置text-align：center，使文字或者圖片達到水平居中的效果。對于其他行內元素一樣有效，例如inline-block后的容器。
- margin：0 auto；在塊級元素中，給它設置一個寬度，并且使其margin-left等于margin-right便可達到水平居中的效果。因為塊級元素充滿一整行，所以需要設置一個寬度，否則就沒有水平居中的說法。
垂直居中：
- 利用padding-left等于padding-right,達到垂直居中的效果；
- 絕對定位達到垂直居中效果；先設置元素position：當absolute；left：50px；top：50%； 元素為設置寬高的時候可以使用transform：translate（-50%，-50%）；在元素設置了寬高的時候，可以使用負margin其寬高的50%達到效果。前者兼容性稍差，不支持老式的瀏覽器，例如IE9之前的IE；
- vertical-align實現居中效果，vertical-align:middle;可以讓行內元素或者表格元素在它的父容器基線上對齊實現垂直居中;
- table-cell實現居中，把元素display：table-cell；并設置vertical-align:middle；（垂直方向）和text-align:center;（水平方向）;可以實現垂直居中，但是display:table-cell會把元素渲染為行內元素，對于寬度會有一定影響，因為元素會收縮;
- display：flex；告訴容器其內容該如何布局
寫法：- dispaly：flex；(設置彈性布局)
- align-items: center;（設置垂直居中）
- justify-content:center;（設置水平居中）
CSS響應式——媒體查詢
媒體查詢：
- 在css2已經可以使用@media，但是功能比較少；在css3后，@media變得更加強大；
- css語法主要分為兩種，一種的是@開頭的例如@media，@import等等，還有一種就是選擇器；
- @media print｛｝主要用于開發者需要網頁打印的樣式與瀏覽器展示不一樣時，用于書寫打印文件的樣式；
- @media screen and （max-width： 990px）｛｝表示屏幕最大寬度為990px時，則大括號內容生效；
and操作符：
- and操作符用于將多個media feature組合成一個查詢，同時用于組合media type和media feature，一個基本的media query類似這樣，一個media feature作用于所有的mediatype；由于現在一般都是展示在視窗上，所以也可以這樣寫：@media （min-width：700px）｛｝；
- 如果只想在橫向顯示時應用就可以使用and操作符把media type和media feature結合起來；@media（min-width：700px;）and(orientation:landsape){};這樣上面的media query只在可視窗口最小是700px并且橫向顯示的時候才返回true；例如：在我們需要豎屏的時候且用戶設備為橫屏的時候，可以利用css讓用戶豎屏；
- @media screen 表示在屏幕情況下看到的樣式。
media features：
media features是媒體查詢的參數，例如上面：min-width：800px。
- width：瀏覽器寬度
- height： 瀏覽器高度
- device-width： 設置屏幕分辨率的寬度值；
- device-height： 設置屏幕分辨率高度值；
- orientation： 瀏覽器窗口的方向是縱向還是橫向，當窗口的高度值大于等于寬度時該特性值portrait，否則為landscape；
- aspect-ratio：比例值，瀏覽器的縱橫比；
- devce-aspect-ratio：比例值，屏幕的縱橫比；
- color： 設備使用多少位的顏色值，如果不是彩色設備，值為0；
- color-index： 色彩表的色彩數；
- monochrome： 單色幀緩沖器每個像素的字節；
- resolution： 分辨率值，設備分辨率值；
- scan： 電視機類型設備方式，progressive或interlace；
- grid： 只能指定兩個值0或1，是否基于柵格的設備。
媒體查詢的用法：
- 注意先后順序，寫的時候一般放在下方，還要注意選擇器的權重，一般來說媒體查詢的權重高一些。@import也可以引用媒體查詢
- 響應式一般要配合浮動一起使用，也可以和flex和grid一起使用。
