CSS之常見佈局|經常使用單位|水平垂直居中

常見佈局：

　　1. 流式佈局：百分比佈局，寬高、margin、pinding都是百分比

　　2. 固定佈局：盒子的寬高固定，如：margin、padding等

　　3. 浮動佈局：float

　　4. 彈性佈局：flex（Webkit內核的瀏覽器，必須加上-webkit前綴。）

　　5. 響應式佈局：媒體查詢，如 &:hover

　　6. 定位佈局：position

 

　　彈性佈局：

　　　　概念：用Flex佈局的元素，稱爲Flex容器，他全部的子元素自動成爲成員，成爲Flex項目

　　　　例舉做用：

　　　　　　· 能夠經過設置項目(flex容器中的子元素)的 flex 值來實現自動伸縮

　　　　　　· 能夠經過設置 justify-content（主軸的排列方式） 或者 align-items（交叉軸的排列方式） 的爲 center 來實現水平垂直居中

　　　　容器的屬性：　　

 　　flex-direction：row | row-reverse | column | column-reverse;//決定主軸的方向（即項目的排列方向）。
    row（默認值）：主軸爲水平方向，起點在左端。
    row-reverse：主軸爲水平方向，起點在右端。
    column：主軸爲垂直方向，起點在上沿。
    column-reverse：主軸爲垂直方向，起點在下沿。


    flex-wrap//默認狀況下，項目都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。
    nowrap（默認）：不換行。
    wrap：換行，第一行在上方。
    wrap-reverse：換行，第一行在下方。


    flex-flow:<flex-direction> || <flex-wrap>;//是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。


    justify-content:flex-start | flex-end | center | space-between | space-around;//屬性定義了項目在主軸上的對齊方式。
    具體對齊方式與軸的方向有關。下面假設主軸爲從左到右。
    flex-start（默認值）：左對齊
    flex-end：右對齊
    center： 居中
    space-between：兩端對齊，項目之間的間隔都相等。
    space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。


    align-items:flex-start | flex-end | center | baseline | stretch;//定義項目在交叉軸上如何對齊。
    它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下      
    flex-start：交叉軸的起點對齊。
    flex-end：交叉軸的終點對齊。
    center：交叉軸的中點對齊。
    baseline: 項目的第一行文字的基線對齊。
    stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。


    align-content//定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。
    flex-start：與交叉軸的起點對齊。
    flex-end：與交叉軸的終點對齊。
    center：與交叉軸的中點對齊。
    space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
    space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
    stretch（默認值）：軸線佔滿整個交叉軸。

 

　　　項目屬性：

// 定義項目的排列順序。數值越小，排列越靠前，默認爲0。 
order: <integer>
// 定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大
flex-grow: <number>
// 定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
flex-shrink:<number>;
// 定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。
// 瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。
flex-basis:<length> | auto
//是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
// 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
// 容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，
// 表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。
align-self: auto | flex-start | flex-end | center | baseline |stretch;

 

實現水平垂直居中的方式

　　未知盒子寬高

　　　　1. 使用 inline-block 和 text-align 及 vertical-align

　　　　2. 使用table-cell（模擬表格）， inline-block實現 (主要設置 text-align / vertical-align 屬性)

　　　　3. 使用彈性佈局實現水平垂直居中 (justify-content: center; align-items: center;)

　　　　4. 使用transform實現垂直居中

　　2. 使用絕對定位和邊距的方式實現（已知盒子寬高）

 

經常使用單位及區別

　　px：相對長度單位。相對於屏幕分辨率而言

　　em：值不固定，繼承 父級元素 的字體大小

　　rem：值根據 根元素（html）的字體大小而言的

　　移動端rem單位大小自適應自適應代碼（直接設置 62.5% 會出現些一些小bug）

/*手機自適應*/
(function (doc,win) {
    let docEl = doc.documentElement // 根元素html 
     //判斷窗口有沒有orientationchange這個方法，有就賦值給一個變量，沒有就返回resize方法。
     let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'         
     let recalc = function () {
          let clientWidth = docEl.clientWidth; if (!clientWidth) return; 
         // if(clientWidth>=560){
         //   clientWidth=560; 
         //   把document的fontSize大小設置成跟窗口成必定比例的大小，從而實現響應式效    果。
         // } 
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; 
    }; 
    if (!doc.addEventListener) return;
    recalc(); 
    //addEventListener事件方法接受三個參數：
    //第一個是事件名稱好比點擊事件onclick，第二個是要執行的函數，第三個是布爾
    win.addEventListener(resizeEvt, recalc, false);
　　//綁定瀏覽器縮放與加載時間
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

　　

 

永遠不要自覺得是，在神面前你只是個愣頭青