總結之CSS篇

1，盒模型

頁面渲染時，dom元素所採用的 佈局模型，能夠經過 box-sizing 進行設置，根據計算高度的區域可分爲：

• content-box （W3C 標準盒模型）
• border-box （IE盒模型）

1，content-box中，元素的寬，高包含元素的 padding，border

// div大小爲 140 * 140，內容盒大小爲 100 * 100
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 10px black;
}

2，border-box中，元素的寬，高不包含元素的padding，border，margin

// div大小爲 100 * 100，內容盒大小爲 60 * 60
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 10px black;
}

2，選擇器優先級

• !important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
• 選擇器 從右往左 解析

3，屬性繼承

• 全部元素可繼承：visibility cursor
• 內聯元素可繼承：letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
• 塊元素可繼承：text-align text-indent

4，居中佈局

1，水平居中

// 行內元素，在父元素上設置 text-align 便可
div {
    text-align: center;
}

// 塊級元素，設置 margin
div {
    margin: 0 auto;
}

// absolute + transform 結合使用
div {
    position: relative;
    div {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

// flex + justify-content: center
div {
    display: flex;
    justify-content: center;
}

2，垂直居中

// 行內元素：line-height
div {
    height: 20px;
    line-height: 20px;
}

// absolute + transform
div {
    position: relative;
    div {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
}

// flex + align-items: center
div {
    display: flex;
    align-items: center;
}

// table
div {
    display: table-cell;
    vertical-align: center;
}

3，水平垂直居中

// absolute + transform
div {
    position: relative;
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

// flex + justify-content + align-items 
div {
    display: flex;
    align-items: center;
    justify-content: center;
}

5，BFC

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。

下列方式會建立塊格式化上下文：

• 根元素
• float屬性不爲none
• position爲absolute或fixed
• display爲inline-block, table-cell, table-caption, flex, inline-flex
• overflow不爲visible

佈局規則

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
• 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
• BFC的區域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算

6，去除浮動影響

• 經過 clear:both 清除浮動
• 父級設置高度
• 建立父級 BFC

7，css動畫

animation：幀動畫

• animation-name：綁定到選擇器的 keyframe 名稱
• animation-duration：完成動畫所花費的時間，以秒或毫秒計
• animation-timing-function：動畫的速度曲線
• animation-delay：動畫開始以前的延遲
• animation-iteration-count：動畫的播放次數
• animation-direction：是否輪流反向播放動畫

transition：過渡動畫

• transition-property：過渡效果的 CSS 屬性的名稱
• transition-duration：完成過渡效果所須要的時間
• transition-timing-function：速度曲線
• transition-delay：動畫延遲時間

以上爲大概能想到的經常使用 CSS 屬性，簡單的總結下，水文一篇，後續持續補充完善～