關(guān)于CSS布局&CSS居中&媒體查詢?nèi)叩囊娊?/p>
css布局：
單欄布局：
- 分為最大寬度和固定寬度来屠，80%以上的頁面使用該方法承二。
- 為了編寫簡單和使用方便一般使用固定寬度榆鼠。
雙列布局：
- 一列固定寬度，一列自適應(yīng)寬度（在html中需要先寫固定寬度再寫自適應(yīng)寬度）亥鸠。
三欄布局：
- 兩側(cè)固定寬度妆够，中間自適應(yīng)寬度（在html中需要先寫固定寬度再寫自適應(yīng)寬度））。
圣杯與雙飛翼布局：
- 圣杯布局也雙飛翼布局也都達(dá)到了上述的三欄布局效果负蚊；
- 圣杯布局也雙飛翼布局主要是為了突出中間的固定寬度的主體部分神妹；
- 二者在html中先寫自適應(yīng)寬度再寫固定寬度，為了突出主體的重要性家妆；
- 圣杯布局在瀏覽器縮小到一定程度時候鸵荠，會出現(xiàn)樣式錯誤。但是在雙飛翼布局中解決了上述問題伤极，但是代碼量也更大了蛹找。
水平等距排列：
- 主要是使用浮動和負(fù)margin達(dá)到該效果。
流式布局：
- 百分比布局哨坪，也叫流式布局庸疾，因?yàn)閷挾仁前俜直龋歉叨仁前磒x來寫的;
- 適用頁面特點(diǎn)：左側(cè)固定+右側(cè)自適應(yīng)或者左右固定寬度+中間自適應(yīng)（專業(yè)一點(diǎn)說法：關(guān)鍵元素高寬和位置都不變齿税，只有容器元素在做伸縮變換）
flex布局：
- Flexbox為css提供了功能強(qiáng)大的彈性布局方式彼硫。
- 在PC端兼容性稍差，移動端是其天然適合的場景（關(guān)于flex布局后續(xù)有獨(dú)立的一文作詳解）凌箕。
display：flex;
grid布局：
- 網(wǎng)格布局（Grid）是最強(qiáng)大的 CSS 布局方案拧篮。
- 它將網(wǎng)頁劃分成一個個網(wǎng)格，可以任意組合不同的網(wǎng)格牵舱，做出各種各樣的布局串绩。以前，只能通過復(fù)雜的 CSS 框架達(dá)到的效果芜壁，現(xiàn)在瀏覽器內(nèi)置了礁凡。
- Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個項(xiàng)目的位置慧妄。但是顷牌，它們也存在重大區(qū)別。
- Flex 布局是軸線布局塞淹，只能指定"項(xiàng)目"針對軸線的位置窟蓝，可以看作是一維布局。
- Grid 布局則是將容器劃分成"行"和"列"饱普，產(chǎn)生單元格运挫，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局套耕。Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大谁帕。
- 目前對于老式瀏覽器兼容性差，對與IE11仍有問題冯袍。
移動端布局：
- 設(shè)置meta匈挖；
- 適配是移動端的關(guān)鍵，一般使用媒體查詢或者復(fù)雜的動態(tài)rem解決康愤，使用flex也是移動端布局的常用方案关划。
css居中：
水平居中：
- text-align:center;給文字或者圖片的父元素設(shè)置text-align：center，使文字或者圖片達(dá)到水平居中的效果翘瓮。對于其他行內(nèi)元素一樣有效贮折，例如inline-block后的容器。
- margin：0 auto资盅；在塊級元素中调榄，給它設(shè)置一個寬度，并且使其margin-left等于margin-right便可達(dá)到水平居中的效果呵扛。因?yàn)閴K級元素充滿一整行每庆，所以需要設(shè)置一個寬度，否則就沒有水平居中的說法今穿。
垂直居中：
- 利用padding-left等于padding-right,達(dá)到垂直居中的效果缤灵；
- 絕對定位達(dá)到垂直居中效果；先設(shè)置元素position：當(dāng)absolute；left：50px腮出；top：50%帖鸦； 元素為設(shè)置寬高的時候可以使用transform：translate（-50%，-50%）胚嘲；在元素設(shè)置了寬高的時候作儿，可以使用負(fù)margin其寬高的50%達(dá)到效果。前者兼容性稍差馋劈，不支持老式的瀏覽器攻锰，例如IE9之前的IE；
- vertical-align實(shí)現(xiàn)居中效果妓雾，vertical-align:middle;可以讓行內(nèi)元素或者表格元素在它的父容器基線上對齊實(shí)現(xiàn)垂直居中;
- table-cell實(shí)現(xiàn)居中娶吞，把元素display：table-cell；并設(shè)置vertical-align:middle械姻；（垂直方向）和text-align:center;（水平方向）;可以實(shí)現(xiàn)垂直居中妒蛇，但是display:table-cell會把元素渲染為行內(nèi)元素，對于寬度會有一定影響策添，因?yàn)樵貢湛s;
- display：flex材部；告訴容器其內(nèi)容該如何布局
寫法：- dispaly：flex；(設(shè)置彈性布局)
- align-items: center;（設(shè)置垂直居中）
- justify-content:center;（設(shè)置水平居中）
CSS響應(yīng)式——媒體查詢
媒體查詢：
- 在css2已經(jīng)可以使用@media唯竹，但是功能比較少乐导；在css3后，@media變得更加強(qiáng)大浸颓；
- css語法主要分為兩種物臂，一種的是@開頭的例如@media，@import等等产上，還有一種就是選擇器棵磷；
- @media print｛｝主要用于開發(fā)者需要網(wǎng)頁打印的樣式與瀏覽器展示不一樣時，用于書寫打印文件的樣式晋涣；
- @media screen and （max-width： 990px）｛｝表示屏幕最大寬度為990px時仪媒，則大括號內(nèi)容生效；
and操作符：
- and操作符用于將多個media feature組合成一個查詢谢鹊，同時用于組合media type和media feature算吩，一個基本的media query類似這樣，一個media feature作用于所有的mediatype佃扼；由于現(xiàn)在一般都是展示在視窗上偎巢，所以也可以這樣寫：@media （min-width：700px）｛｝；
- 如果只想在橫向顯示時應(yīng)用就可以使用and操作符把media type和media feature結(jié)合起來兼耀；@media（min-width：700px;）and(orientation:landsape){};這樣上面的media query只在可視窗口最小是700px并且橫向顯示的時候才返回true压昼；例如：在我們需要豎屏的時候且用戶設(shè)備為橫屏的時候求冷，可以利用css讓用戶豎屏；
- @media screen 表示在屏幕情況下看到的樣式窍霞。
media features：
media features是媒體查詢的參數(shù)匠题，例如上面：min-width：800px。
- width：瀏覽器寬度
- height： 瀏覽器高度
- device-width： 設(shè)置屏幕分辨率的寬度值官撼；
- device-height： 設(shè)置屏幕分辨率高度值梧躺；
- orientation： 瀏覽器窗口的方向是縱向還是橫向似谁，當(dāng)窗口的高度值大于等于寬度時該特性值portrait傲绣，否則為landscape；
- aspect-ratio：比例值巩踏，瀏覽器的縱橫比秃诵；
- devce-aspect-ratio：比例值，屏幕的縱橫比塞琼；
- color： 設(shè)備使用多少位的顏色值菠净，如果不是彩色設(shè)備，值為0彪杉；
- color-index： 色彩表的色彩數(shù)毅往；
- monochrome： 單色幀緩沖器每個像素的字節(jié)；
- resolution： 分辨率值派近，設(shè)備分辨率值攀唯；
- scan： 電視機(jī)類型設(shè)備方式，progressive或interlace渴丸；
- grid： 只能指定兩個值0或1侯嘀，是否基于柵格的設(shè)備。
媒體查詢的用法：
- 注意先后順序谱轨，寫的時候一般放在下方戒幔，還要注意選擇器的權(quán)重，一般來說媒體查詢的權(quán)重高一些土童。@import也可以引用媒體查詢
- 響應(yīng)式一般要配合浮動一起使用诗茎，也可以和flex和grid一起使用。
