前言：今天看到一篇前端妹子的面試總結，前端妹子一直說自己懶。頓時讓我感覺到無地自容啊。2016年畢業，計算機行業，接觸前端是2014 年吧，要說總結，真的是除了在學校裡做的幾個本的筆記外就沒有了啦。從事前端工作兩年多了，一點總結都沒有，也是一直處於原生開發，react和vue的文件看了又看，卻一直沒有實現過一個小專案。每次面試都不理想，物件也說沒見過我總結，總結和筆記才是成長的必要條件。這裡就把前端妹子提的那幾個前端面試的問題總結一下。趕緊的追！

1. 常用的幾種佈局方式

• 固定佈局
• 流式佈局（自適應佈局）
• 彈性佈局（伸縮佈局）
• 定位佈局
• 浮動佈局
• 響應式佈局（媒體查詢）

固定佈局、流式佈局、定位佈局、和浮動佈局都比較簡單。都可以檢視W3C。簡單的我是這個理解這幾個的。如下：

固定佈局的固定說的是盒子的寬高都是固定的。margin，padding等。
流式佈局的流式是指的盒子的寬高和margin，padding是百分比。所以也稱為百分比佈局。有以下幾點需要注意
* 百分比是基於元素父級的大小計算得來的；
* 元素的水平或者豎直間距都是相對於父級的寬度計算的.(margin&padding)
* 邊框不能用百分比設定
定位佈局指的是，絕對定位和相對定位以及固定定位。這個可檢視W3C。
浮動定位是隻float:left;和float:right;要記得清浮動。

這頁面中的佈局，現在我都是綜合幾種佈局一塊來實現的，那種以哪一種的佈局方式為主要形式，此頁面就可以說是哪一種的佈局頁面。

下面主要的是談談彈性佈局（flex-box）當然關於flex-box的文章很多，我寫在這裡只是為了寫給自己的，我的理解有誤的話，也歡迎有人來提出。可點選檢視阮一峰老師的文章

CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分佈一個容器裡專案佈局，即使它們的大小是未知或者動態的，這裡簡稱為Flex。

相容性

所以說在pc端用的還廣泛，畢竟有的企業，還是在相容性方面要求的比較嚴格，但是手機端flexBox實現的還不錯，可以考慮寫一個彈性佈局的手機app專案。

定義
任何一個容器都可以指定為Flex佈局。

.box {
    display:flex;
}

行內元素也可以制定為Flex佈局

.box {
    display: inline-flex;
}

Webkit核心的瀏覽器，必須加上-webkit字首。

.box {
    display: -webkit-flex; /* Safari */
    display: flex;
}

注意，設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。

基本概念
用Flex佈局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱”專案”。

容器的屬性

    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（預設值）：軸線佔滿整個交叉軸。

專案的屬性

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

以上是菜鳥教程的文件，我就照搬過來了，菜鳥教程有相應的比較好圖片解說。
總結： 重申一下這個概念，有助於對文件的理解：

軸線：專案排在一條線上（這條線就是軸線）
主軸：主軸並不一定是水平軸，flex-direction：row則代表主軸是水平軸，那麼交叉軸就是垂直軸，
flex-direction:column則代表主軸是垂直軸，那麼交叉軸就是水平軸。
align-content：多根軸線才會起效果，就是專案在主軸方向上排了多列。
justify-content：主軸上的專案的排列對齊方式
justify-content：交叉軸上的專案的排列對齊方式

面試題：
（1）.Flex專案移動到頂部
如何將flex專案移動到頂部，取決於主軸的方向。如果它是垂直的方向通過justify-content設定；如果它是水平的方向通過align-items設定。
（2）.Flex專案移到左邊
flex專案稱動到左邊或右邊也取決於主軸的方向。如果flex-direction設定為row，設定justify-content控制方向；如果設定為column，設定align-items控制方向。
（3）.Flex專案移動右邊

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

（4）.水平垂直居中
在Flexbox容器中製作水平垂直居中是微不足道的。設定justify-content或者align-items為center。另外根據主軸的方向設定flex-direction為row或column。
（5）.Flex專案實現自動伸縮
您可以定義一個flex專案，如何相對於flex容器實現自動的伸縮。需要給每個flex專案設定flex屬性設定需要伸縮的值。

.bigitem{ -webkit-flex:200; flex:200; }  .smallitem{ -webkit-flex:100; flex:100; }

上面幾條是我看了幾遍才懂，正在努力集中注意力。懶時間長了，注意力都難集中了。

2. 實現水平垂直居中的幾種方法

• 用inline-block和text-align及vertical-align來實現：這種方法適合於未知寬度高度的情況下。（最基本的方法）
• 用相對絕對定位和負邊距實現上下左右居中（已知寬度和高度）

 .img{
       height: 200px;
       width: 200px;
       position: relative;
       top: 50%;
       left: 50%;
       margin: -100px 0 0 -100px;//負邊距是寬度和高度的一半
  }

• 使用table-cell，inline-block實現水平垂直居中：適合高度寬度未知的情況（模擬表格）

    <style>
        #container{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            height: 300px;
            background: #ccc;
        }
        #center-div{
            display: inline-block;
        }
    </style>

-使用css3中的transform來時實現水平垂直居中：適合高度寬度未知的情況

    <style>
        #container{
            position: relative;
            height: 200px;
            background: #333;
        }
        #center-div{
            position: absolute;//絕對定位中的transform
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

-使用Flexbox來實現水平垂直居中；適合寬度高度未知情況，但是要注意相容性

        .box{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: #009f95;
        }

3.css3動畫的一些屬性

• 2D轉換（transform的屬性方法）
  -translate()通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數
  -rotate()通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
  -scale()通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）引數
  -skew()通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）引數
  -matrix()方法把所有 2D 轉換方法組合在一起。
  -matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。

  matrix(n,n,n,n,n,n)     定義 2D 轉換，使用六個值的矩陣。
  translate(x,y)  定義 2D 轉換，沿著 X 和 Y 軸移動元素。
  translateX(n)   定義 2D 轉換，沿著 X 軸移動元素。
  translateY(n)   定義 2D 轉換，沿著 Y 軸移動元素。
  scale(x,y)  定義 2D 縮放轉換，改變元素的寬度和高度。
  scaleX(n)   定義 2D 縮放轉換，改變元素的寬度。
  scaleY(n)   定義 2D 縮放轉換，改變元素的高度。
  rotate(angle)   定義 2D 旋轉，在引數中規定角度。
  skew(x-angle,y-angle)   定義 2D 傾斜轉換，沿著 X 和 Y 軸。
  skewX(angle)    定義 2D 傾斜轉換，沿著 X 軸。
  skewY(angle)    定義 2D 傾斜轉換，沿著 Y 軸。
  

• 3D轉換

  matrix3d(n,n,n,n,n,n,
  n,n,n,n,n,n,n,n,n,n)    定義 3D 轉換，使用 16 個值的 4x4 矩陣。
  translate3d(x,y,z)  定義 3D 轉化。
  translateX(x)   定義 3D 轉化，僅使用用於 X 軸的值。
  translateY(y)   定義 3D 轉化，僅使用用於 Y 軸的值。
  translateZ(z)   定義 3D 轉化，僅使用用於 Z 軸的值。
  scale3d(x,y,z)  定義 3D 縮放轉換。
  scaleX(x)   定義 3D 縮放轉換，通過給定一個 X 軸的值。
  scaleY(y)   定義 3D 縮放轉換，通過給定一個 Y 軸的值。
  scaleZ(z)   定義 3D 縮放轉換，通過給定一個 Z 軸的值。
  rotate3d(x,y,z,angle)   定義 3D 旋轉。
  rotateX(angle)  定義沿 X 軸的 3D 旋轉。
  rotateY(angle)  定義沿 Y 軸的 3D 旋轉。
  rotateZ(angle)  定義沿 Z 軸的 3D 旋轉。
  perspective(n)  定義 3D 轉換元素的透視檢視。
  

• transform-origin：改變元素中心點的位置

• transiton過渡

transition: property duration timing-function delay;
transition-property: none|all|property;//過渡的元素名稱
transition-duration: time;（time是毫秒計的）//過渡的時間
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);//過渡的速度曲線
transition-delay: time;//過渡效果開始之前延遲

4.CSS實現寬度自適應100%,寬高16:9的比例的矩形。

.rect {
     width: 100%;
     padding-bottom: 56.25%;
     border: 1px solid #000;
}

講一下其原理，我們來看W3C對應邊距採用不同值得定義

padding的值如果用百分比的話是依據於父元素寬度。