兩種盒子模型

區別：
	標準盒子模型：width = content
	IE盒子模型：width = content + padding + border
設定：
	標準盒子模型：box-sizing: content-box;
	IE盒子模型：box-sizing: border-box;

CSS選擇器有哪些？優先順序如何計算？

CSS選擇器：

1. id選擇器(#myid)、
2. 類選擇器(.myclassname)、
3. 標籤選擇器(div, h1, p)、
4. 子選擇器（ul > li）、
5. 偽類選擇器（a:hover, li:nth-child）

優先順序（就近原則）：!important > 內聯元素 > id > class > tag

position 有哪些值？

• static（預設）：按照正常文件流進行排列；

• relative（相對定位）：不脫離文件流，參考自身靜態位置定位；

• absolute(絕對定位)：參考距其最近一個不為static的父級元素定位；

• fixed(固定定位)：所固定的參照對像是可視視窗。

display: none 與visibility：hidden 和 opacity : 0的區別？

• display：none 不顯示對應的元素，在文件佈局中不再分配空間（迴流+重繪），可以理解成在頁面中把該元素刪除掉一樣。

• visibility：hidden 隱藏對應元素，在文件佈局中仍保留原來的空間（重繪），但是不會觸發該元素已經繫結的事件

• opacity : 0，該元素隱藏起來了，但不會改變頁面佈局，並且，如果該元素已經繫結一些事件，如click事件，那麼點選該區域，也能觸發點選事件

垂直居中的方法

• 方法 1：絕對定位 + margin: auto

.box span{
      height : 100px;  /* 這裡必須定義內部元素的高度 */
      margin: auto; 
      position: absolute; 
      top: 0; 
      left: 0; 
      bottom: 0; 
      right: 0; 
    }

• 方法 2：絕對定位 + 負邊距

.box span
 
 {
      position : absolute;
      left : 50%;
      top: 50%;
      width: 100px;           
      height: 50px;
      margin-left: -50px; /*在不知道寬高的情況下可以用 translate 平移*/
      margin-top: -25px; 
      text-align : center;
    }

• 方法 3：flex 彈性佈局（推薦）

.box {
      display : flex;
      justify-content : center; /* 主軸上的對齊方式 */
      item-aligns : center; /* 交叉軸上對齊方式 */
    }

• 方法 4：table-cell

.box {
      display : table-cell;
      vertical-algin : middle; /* 把元素放在父元素的中部 */
      text-align : center;
    }

• 方法 5：flex + margin:auto

.flex-container {
      display : flex;
      width: 400px;
      height: 200px;
    }
.flex-item {
	margin: auto;
}

對 BFC 的理解

BFC(塊級格式化上下文)它是指一個獨立的塊級渲染區域，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

• 內部的Box會在垂直方向上一個接一個放置。

• Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。

• 每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。

• BFC的區域不會與float box重疊。

• BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。

• 計算BFC的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發BFC

• 根元素，即html

• float的值不為none（預設）

• overflow的值不為visible（預設）

• display的值為inline-block、table-cell、table-caption

• position的值為absolute或fixed

CSS3 新特性

• border-radius 圓角

	border-radius: 10px;

• text-shadow 陰影

	text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5); /* 水平陰影的位置， 垂直陰影的位置， 模糊的距離， 陰影的顏色*/

• -webkit-gradient 漸變

	  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#2A8BBE), to(#FE280E));

• transition 過渡

transition-property 物件參與過渡的屬性
transition-duration 過渡的持續時間
transition-timing-function 過渡的型別
transition-delay 延遲過渡的時間

	transition: color 5s ease-in 1s;

• transforms 變形轉換

主要包括 translate（水平移動）、rotate（旋轉）、scale（伸縮）、skew（傾斜）

• animation 動畫

animation-name 規定需要繫結到選擇器的 keyframe

animation-duration 規定完成動畫所花費的時間，以秒或毫秒計

animation-timing-function 規定動畫的速度曲線

animation-delay 規定在動畫開始之前的延遲

animation-iteration-count 規定動畫應該播放的次數

animation-direction 規定是否應該輪流反向播放動畫。

  div{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: isAnimate 5s infinite;
  }

  @keyframes isAnimate {
    from { left: 0px; }
    to { left: 200px; }
  }

清除浮動的幾種方式

• 父級元素追加空子元素，並設定clear : both
• 父級元素定義 overflow : hidden
• 父級元素定義偽類 :after 和 zoom

transition和animation的區別

animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值。

他們的主要區別是transition需要觸發一個事件才能改變屬性，而animation不需要觸發任何事件的情況下才會隨時間改變屬性值，並且transition為2幀，從from … to，而animation可以一幀一幀的。

animation 製作動畫必須用關鍵幀宣告一個動畫，而且在animation呼叫關鍵幀宣告的動畫。

什麼是關鍵幀 ?

@keyframes就是關鍵幀，而且需要加webkit字首，比如 ：

/* 當滑鼠懸浮在button class為login的按鈕時，觸發changeColor動畫� */
    
    button.login:hover {
        -webkit-animation: 1s changeColor;
        animation: 1s changeColor;  
    }

    @-webkit-keyframes changeColor {
        0% { background: #c00; }
        50% { background: orange; }
        100% { background: yellowgreen; }
    }
    @keyframes changeColor {
        0% { background: #c00; }
        50% { background: orange; }
        100% { background: yellowgreen; }
    }

    /* 上面程式碼中的0% 100%的百分號都不能省略，0%可以由from代替，100%可以由to代替。 */

sass 和 scss 的關係

SCSS 是 Sass 3 引入新的語法，其語法完全相容 CSS3，並且繼承了 Sass 的強大功能。
唯一不同的是，SCSS 需要使用分號和花括號而不是換行和縮排。

flex 佈局