css 經常使用知識點全在這裏了。哪位大俠還能補充？

時間 2020-01-04

標籤 css 經常使用知識這裏哪位大俠還能補充欄目 CSS 简体版

原文原文鏈接

努力學習與總結是對本身能力的提高，也但願能幫助到同窗們。javascript

BFC

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

如何觸發BFC？html

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

BFC的定位方案前端

內部的box會在 垂直方向上 一個接一個的擺放
屬於同一個BFC中的兩個相鄰元素的 垂直方向上 margin 會重疊
BFC中每一個元素的左邊margin會與包含塊的左邊border相接觸
計算BFC的高度時，浮動元素也會參與計算

選擇器權重

Css選擇器優先級java

!important -> 最高
內聯style -> 1000
id -> 100
class -> 10
tag -> 1
繼承樣式

margin 屬性

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

水平居中簡單版

內聯元素

text-align: center;

固定寬度的塊狀元素

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

垂直居中簡單版

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

// vertical-align 只對行內元素、表格單元格元素生效
    // 指定 行內元素/表格單元元素 基線相對於 塊狀元素基線的位置

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

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

固定寬高居中

經過絕對定位 + 負margingit

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

經過絕對定位 + margin: auto;github

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

不定寬高

transform 居中web

#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 居中（二）ide

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

瀏覽器如何解析 css

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

CSS屬性支持判斷

利用屬性覆蓋原理

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

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

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

使用 .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;
        }
    }

使用 JS 判斷 CSS 屬性支持狀況

做爲 @supports 的另外一種形式出現的，咱們可使用 javascript 的方式來得到 CSS 屬性的支持狀況。

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

使用 JS 庫 modernizr

若是瀏覽器不支持@supports，能夠經過調用ele.style來判斷屬性支持狀況（庫：Modernizr）

經過判斷賦值再查詢來判斷是否支持

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個參數， 不然返回false
        
        // 用於測試的元素，隱藏在頁面上
        var ele = document.getElementById('test-display-none');
    
        // 只有一個參數的狀況
        if(arguments.length === 1) {
            if(property in ele.style) {
                return true;
            }
        // 兩個參數的狀況
        }else if(arguments.length === 2){
            ele.style[property] = value;
    
            if(ele.style[property]) {
                return true;
            }
        }
    
        return false;
    }

position定位細節

position: absolute;

相對於非static的先輩元素定位
若是先輩元素全是static，那麼相對於視口定位

position：fixed

相對於視口定位
若是先輩元素有非none的transform屬性，那麼相對於該先輩元素定位
- （不注意容易產生BUG）

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

清除浮動

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

清除浮動的方法

僞元素 + clear: both;

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

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

給父元素設置 overflow: hidden;
空白元素 + clear: both; （和僞元素實現原理同樣，不過 low 不少）