努力學習與總結是對自己能力的提升，也希望能幫助到同學們。

BFC

塊狀格式化上下文（block formatting context）簡稱 BFC：是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。

如何觸發(fā)BFC？

1. 根元素（html）: 最大的BFC
2. position 設置為 fixed 或者 absolute
3. display 設置為 inline-block 、table-block 、 table-caption
4. overflow 的值不為 visible
5. float 的值不為 none
6. MDN 格式化上下文

BFC的定位方案

1. 內(nèi)部的box會在 垂直方向上 一個接一個的擺放
2. 屬于同一個BFC中的兩個相鄰元素的 垂直方向上 margin 會重疊
3. BFC中每個元素的左邊margin會與包含塊的左邊border相接觸
4. 計算BFC的高度時，浮動元素也會參與計算

選擇器權重

Css選擇器優(yōu)先級

1. !important -> 最高
2. 內(nèi)聯(lián)style -> 1000
3. id -> 100
4. class -> 10
5. tag -> 1
6. 繼承樣式

margin 屬性

1. margin 屬性為給定元素設置所有四個（上下左右）方向的外邊距屬性。
2. 普通元素的 百分比margin 都是相對于容器的寬度計算的
3. 絕對定位元素的 百分比margin 相對于其定位祖先元素的寬度計算的
4. 上下margin會重疊：只會發(fā)生在 block 元素上，（取最大值）
   1. 解決重疊方法：
   2. 父元素設置 BFC（如overflow：hidden；如position：absolute等）
   3. 父元素設置 border/padding
5. 當 margin 的值為 auto 時。瀏覽器會自動選擇一個合適的margin來應用（自動分配剩余空間）
   1. 需要元素是 塊狀元素
   2. 需要元素 設置寬度
6. margin 可以為 負值

水平居中 簡單版

1. 內(nèi)聯(lián)元素

    text-align: center;

2. 固定寬度的 塊狀元素

    // 設置 左右 margin 為 auto
    margin: 0 auto;

垂直居中 簡單版

1. 單行文本 垂直居中 -> line-height
2. 多行文本 垂直居中

    // vertical-align 只對行內(nèi)元素、表格單元格元素生效
    // 指定 行內(nèi)元素/表格單元元素 基線相對于 塊狀元素基線的位置

    .center-table {
        display: table;
    }
    .center-table p {
        display: table-cell;
        vertical-align: middle;
    }

元素居中（水平且垂直） 進階

1. 固定寬高 居中

通過 絕對定位 + 負margin

    #main{
        position: relative;
        // ... 略
    }
    #center{
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin: -50px;
    }

通過 絕對定位 + margin: auto;

    #main{
        position: relative;
        // ... 略
    }
    #center{
        width: 100px;
        height: 100px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
    }

2. 不定寬高

transform 居中

    #main{
        position: relative;
        // ... 略
    }
    #center{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

flex 居中（一）

    #main{
        display: flex; 
        justify-content: center; 
        align-items: center;
    }

flex 居中（二）

    #main{
        display: flex;
        // ... 略
    }
    #center{
        margin: auto;
    }

瀏覽器如何解析 css

1. css 的解析是從上往下
2. 渲染順序也是從上往下
3. 下載和渲染是同時進行的。
4. css的解析和js的解析是不能同時進行的
5. css選擇器 的解析是從右向左解析
   1. （jQuery選擇器解析方式同理）
   2. 能先確定元素位置，減少匹配次數(shù)

CSS屬性支持判斷

1. 利用屬性覆蓋原理

將高版本瀏覽器支持的特性寫在后面。利用瀏覽器的2個CSS解析特性：

• 后面的屬性覆蓋前面的屬性
• 遇到不認識的語法，CSS parser 不解析。

    div {
        background: red;
        background: linear-gradient(90deg, red, yellow)
    }

2. 使用 .css 的 @supports 來判斷屬性支持情況

    // 支持特定屬性的處理
    @supports (position:sticky) {
        div {
            position:sticky;
        }
    }
    
    // 不支持特定屬性：用not處理
    @supports not (background: linear-gradient(90deg, red, yellow)) {
        div {
            background: red;
        }
    }

    // 如果是多個css屬性：用and處理
    @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
        p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

3. 使用 JS 判斷 CSS 屬性支持情況

作為 @supports 的另一種形式出現(xiàn)的，我們可以使用 javascript 的方式來獲得 CSS 屬性的支持情況。

CSS.supports('display', 'flex'); 必須2個參數(shù)， 否則返回false，（目前不支持IE瀏覽器）

4. 使用 JS 庫 modernizr

如果瀏覽器不支持@supports，可以通過調(diào)用ele.style來判斷屬性支持情況（庫：Modernizr）

5. 通過判斷 賦值再查詢 來判斷是否支持

    var root = document.documentElement; //HTML
 
    for(var key in root.style) {
        console.log(key);
    }

    // 將會打印
    // alignContent
    // alignItems
    // alignSelf
    // alignmentBaseline
    // all
    // animation
    // ...

元素可能有 background 屬性，但是不支持具體的 linear-gradinet() 屬性值。這個時候該如何檢測呢？只需要將具體的值賦值給某一元素，再查詢這個屬性值能否被讀取。

    var root = document.documentElement;
 
    root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)';
    
    if(root.style.backgroundImage) {
    // 支持
    } else {
    // 不支持
    }

簡單的 CSS 屬性支持封裝

通過頁面隱藏的元素進行測試。

    /**
    * 用于簡單的 CSS 特性檢測
    * @param [String] property 需要檢測的 CSS 屬性名
    * @param [String] value 樣式的具體屬性值
    * @return [Boolean] 是否通過檢查
    */
    function cssTest(property, value) {
        // CSS && CSS.supports
        // CSS.supports('display', 'flex');  必須2個參數(shù)， 否則返回false
        
        // 用于測試的元素，隱藏在頁面上
        var ele = document.getElementById('test-display-none');
    
        // 只有一個參數(shù)的情況
        if(arguments.length === 1) {
            if(property in ele.style) {
                return true;
            }
        // 兩個參數(shù)的情況
        }else if(arguments.length === 2){
            ele.style[property] = value;
    
            if(ele.style[property]) {
                return true;
            }
        }
    
        return false;
    }

position定位 細節(jié)

position: absolute;

• 相對于 非static的先輩元素定位
• 如果先輩元素全是static，那么相對于視口定位

position：fixed

• 相對于視口定位
• 如果先輩元素有非none的transform屬性，那么相對于該先輩元素定位
  • （不注意容易產(chǎn)生BUG）

visibility:hidden、display:none、z-index=-1、opacity：0

清除浮動

浮動元素脫離了文檔流，不能撐開元素。需要清除浮動。

清除浮動的方法

1. 偽元素 + clear: both;

    // 全瀏覽器通用的clearfix方案
    // 引入了zoom以支持IE6/7
    .clearfix:after {
        display: table;
        content: " ";
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

    // 全瀏覽器通用的clearfix方案【推薦】
    // 引入了zoom以支持IE6/7
    // 同時加入:before以解決現(xiàn)代瀏覽器上邊距折疊的問題
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: " ";
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

2. 給父元素設置 overflow: hidden;
3. 空白元素 + clear: both; （和偽元素實現(xiàn)原理一樣，不過 low 很多）

rem em px vw

• px：(pixel 像素的縮寫)，相對于顯示器屏幕分辨率
• em：相對于父元素的 font-size
• rem：可想成 root-em，相對于 root（html）的 font-size
• vw：相對視口（viewport）的寬度而定的，長度等于視口寬度的 1/100

偽類和偽元素的作用和區(qū)別

偽類：偽類選擇元素基于的是當前元素處于的狀態(tài)，或者說元素當前所具有的特性，功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類（:first-child :link :visitive :hover :focus :lang）

偽元素：偽元素控制的內(nèi)容實際上和元素是相同的，但是它本身只是基于元素的抽象，不存在于文檔中，所以叫偽元素（:first-line :first-letter :befoe :after)

歡迎關注公眾號「前端進階課」認真學前端，一起進階。

image