• margin水平居中的使用
  • margin: 0 auto; 目標元素為塊級元素，並且設定寬度，沒有寬度預設為100%，這會導致沒有auto值
• vertical-align的使用（垂直對齊方式）
  • vertical-align設定行內元素垂直對齊方式，對塊狀元素無感
  • vertical-align的值為百分比時，是相對於line-height屬性計算的
• 實現水平方向上的li標籤平均佔據空間
  • 使用display: flex屬性
  • 設定屬性justify-content: space-between;
• 也可以考慮使用絕對定位+top、left等屬性實現佈局，但是容易出現不可預知的問題，所以不建議佈局時不首先考慮這個方法
• flex佈局（更加靈活地處理佈局問題）
  • 意為彈性佈局
  • 需考慮相容性的問題，webkit核心的瀏覽器（比如chrome、safari等）需使用以下程式碼

    .box{
      display: -webkit-flex; /* 用於相容webkit核心的瀏覽器*/
      display: flex;
    }

設定為flex佈局之後該父元素成為容器，它的子元素都成為容器成員。 容器包含兩根軸，分別是主軸（main start）、交叉軸（cross start）,主軸的開始位置為容器的左邊框，結束位置為右邊框。交叉軸開始位置是上邊框，結束為止為下邊框

• 容器的屬性
  • justify-content：定義了子元素在主軸上的排列方式 屬性有：flex-start（從主軸開始處）、flex-end（從主軸結束處）、center（居中）、space-between（兩端對齊、間隔相等）、space-around（專案間隔相等）
  • align-iterms：定義了子元素在交叉軸的對齊方式 屬性有：flex-start、flex-end、center（中點對齊）、baseline（以第一行文字為基線對齊）、stretch（預設佔滿整個空間） 瞭解更詳細的資訊可以參考阮一峰老師的部落格
• 將背景圖片按比例縮放剪裁以滿足響應式的需求
• 假設直接將一個比較大的圖片設定為背景 .div{ background: url(ImageSources/hero-banner-homepage.image.large_2x.jpg) no-repeat; width: 100%; height: 680px; } 結果會變的異常詭異： 因為圖片本身遠遠大於要求的框的大小 所以就要用到以下程式碼：

.div{width: 100%;
    background: url(ImageSources/hero-banner-homepage.image.large_2x.jpg) no-repeat;
    background-size: cover;
    background-position: center 30%;
    position: relative;
    z-index: -1;
    padding-top: 1px;
    height: 680px;
    }

background-size: cover——把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域,背景影象的某些部分也許無法顯示在背景定位區域中。