CSS（cascading style sheet）層疊樣式表

• 給文件新增樣式：優先順序：內聯樣式>內部樣式表>外部樣式表
  • 內聯樣式
  • 內部樣式表
  • 外聯樣式表

• CSS書寫順序：
  • 顯示屬性：display/position/float/clear
  • 自身屬性：width/height/margin/padding/border/background
  • 文字屬性：color/font/text-align/vertical-align/whitespace

常用樣式總結：

• 單行文字截斷並新增省略號：

white-space: nowrap;/* 不換行 */
overflow-x: hidden;
text-overflow：ellipsis;
 
/* 隱藏部分加省略號 */
word-wrap: normal;

• 容器內多行文字垂直居中方法：

.container {
  display：table；/* 外層容器 */
}
.content {
  display：table-cell; /* 內層文字 */
  vertical-align：middle;
}

• 行內塊和行內元素文字對齊方式調整：

vertical-align：bottom；/* 預設 */
vertical-align：top；
vertical-align：middle；
vertical-align：10px;
vertical-align：-10px；

• 如何讓內盒子在外盒子中居中？外層盒子固定寬高，內層給100%，外層設定padding
• 給定位元素設定相對定位relative和絕對定位absolute的區別和聯絡：
  • 都是使用left/right top/bottom來設定位置
  • absolute新建一個層並把原來的位置騰出來，定位是相對於其上級定位元素（包括絕對定位和相對定位元素）的位置，若其上級都沒有定位元素，就是相對於HTML文件
  • relative新建了一個層，但是原來的位置不給騰出來，相對於原來位置的定位
  • 一般我們設定定位都是給父級元素一個relative，給子級元素一個absolute，這樣可以直接設定子級相對父級元素的位置
• 清除浮動：
  
  • 塊級元素無法識別浮動元素的位置，高度塌陷問題

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

• margin塌陷問題：子元素設定margin-top，父元素隨子元素一起有了這個margin值，而不是子元素相對於父元素在其上增加margin；
  
  • 讓父級元素觸發BFC（Block Formatting Context，塊格式化上下文），下列方式會導致BFC：
    • float: right/left
    • position: absolute/fixed
    • display: inline-block; table-cell;(多行文字垂直居中)
    • flex
    • overflow: hidden/auto/scroll
  • 或者給父級元素：border-top: 1px solid transparent;

• 背景圖片屬性設定：

background-color: #fff;
background-image: url(/img/bg.png);
background-repeat：no-repeat；
background-attachment: fixed;/* fixed：背景圖片固定在視口，不滾動；scroll：預設值，背景repeat並滾動 */
background-position:center center;/* x | y； 可以是百分數，畫素值，left，right | bottom，top， */ 
background-size: 100% 100%；/* 值可以是：百分數，畫素值，另外，cover：圖片佔滿整個盒子，縮放視窗時切掉多餘的部分，圖片不變形；contain：圖片在盒子內部完整呈現，只按照原比例調整大小，但盒子不一定佔滿 */

• 網站的ico圖示設定：
  • 把字尾為.ico的小圖示下載下來之後, 放在專案根目錄下
  • 在HTML裡, head標籤中間引入程式碼: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
• 兩種盒模型：

box-sizing: content-box;/* 預設值，標準盒模型，width、height的值只包括內容，不包括邊框border、內邊距padding、外邊距margin */
box-sizing: border-box;/* 怪異盒模型，設定的width、height的值包括內容、內邊距padding和邊框，但不包括外邊距margin */

• 如何設定水平垂直居中？
  • 內聯元素水平居中：給父級新增 text-align: center
  • 內聯元素垂直居中：line-height: 20px（父級元素的高度）
  • 塊級元素水平居中：margin: 0 auto （要求塊級元素自己有設定寬度）
  • 塊級元素居中：絕對定位，設定top: 50%; left: 50%，給元素水平和垂直方向的margin值設為自身寬或高的一半的負值
  • flex佈局（下面具體說）
• flex佈局
  • 彈性容器{ display: flex }，裡面的所有一級子元素稱為彈性子元素；
  • 彈性盒子有橫軸、縱軸，根據橫縱軸來佈局；
  • 彈性子元素裡面的元素跟所有設定都無關；
  • 彈性子元素預設在彈性容器內一行展示；
  • 彈性容器的屬性：
    • flex-direction：row從左向右，row-reverse從右向左，column從下往上，column-reserve從上往下。解釋：子元素在容器中的排列方向，預設從左向右排列；
    • justify-content：flex-start，center，flex-end，space-between，space-around。解釋：子元素在橫軸上的對齊方式；
    • align-items：flex-start，flex-end，center，stretch，baseline。解釋：子元素在縱軸的對齊方式；
    • flex-wrap：no-wrap，wrap，wrap-reverse。子元素超過一行時的換行方式；
    • align-content：center，space-between，space-around，stretch。多行子元素行與行之間如何對齊；
  • 彈性子元素的屬性：
    • flex，可以設定固定值：{ flex: 0, 0, 30px }；也可以設定數字：{ flex: 1 }，其中的1,2,3,4……代表彈性元素如何分配空間，數字越大分配到的空間就越大
    • align-self：彈性元素自身在縱軸的對齊方式
• CSS新特性
  • transition: property duration timing-function delay; （CSS屬性名 過渡時間 過渡曲線 過渡延長時間）
  • transform
    
    • transform: rotate(30deg) 旋轉
    • transform: translate(100px, 20px) 移動
    • transform: scale(2, 1.5) 縮放　
    • transform: skew(30deg, 10deg) 扭曲
  • animation: move 1s linear; // 定義動畫的時間 動畫的名稱 動畫的貝塞爾曲線