CSS相關基礎知識彙總

時間 2019-11-11

標籤 css 相關基礎知識彙總欄目 CSS 简体版

原文原文鏈接

一、盒模型

盒子模型是由內容、邊框、間隙（padding）、間隔（margin）組成
盒子實際寬度（高度）=內容（content）+邊框（border）+間隙（padding）+間隔（margin）。對於任何一個元素設置width和height控制內容大小，也能夠分別設置各自的邊框（border）、間隙（padding）、間隔（margin）
border是元素的外圍，計算元素的寬和高要把border加上
padding用於控制content與border之間的距離，padding:10px 20px 10px 10px;分別對應上、右、下、左四個方向，padding區域也有顏色
margin用於控制塊與塊（能夠理解成塊級元素）之間的距離

2、flex（彈性佈局）

Webkit 內核的瀏覽器，必須加上-webkit前綴css

flex-direction

　　row（默認值）：主軸爲水平方向，起點在左端。html

　　row-reverse：主軸爲水平方向，起點在右端。node

　　column：主軸爲垂直方向，起點在上沿。css3

　　column-reverse：主軸爲垂直方向，起點在下沿。git

flex-wrap

　　nowrap（默認）：不換行github

　　wrap：換行，第一行在上方web

　　wrap-reverse：換行，第一行在下方算法

flex-flow

　　flex-direction屬性和flex-wrap屬性的簡寫形式chrome

justify-content

　　flex-start（默認值）：左對齊編程

　　flex-end：右對齊

　　center：居中

　　space-between：兩端對齊，項目之間的間隔都相等。

　　space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

align-items

　　flex-start：交叉軸的起點對齊。

　　flex-end：交叉軸的終點對齊。

　　center：交叉軸的中點對齊。

　　baseline: 項目的第一行文字的基線對齊。

　　stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

align-content

　　flex-start：與交叉軸的起點對齊。

　　flex-end：與交叉軸的終點對齊。

　　center：與交叉軸的中點對齊。

　　space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

　　space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。

　　stretch（默認值）：軸線佔滿整個交叉軸。

3、css單位

px：絕對單位，頁面按精確像素展現
em：相對單位，基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%

4、css選擇器

通用選擇器：*

類別選擇器：.class

id選擇器：#id

標籤選擇器：p

後代選擇器：div p

子選擇器：div > p

羣組選擇器：div , p

相鄰同胞選擇器：div +p

僞類選擇器：:link :visited :active :hover :focus :first-child

僞元素選擇器：:first-letter :first-line:before :after :lang(language)

屬性選擇器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

超連接：LVHA的順序解決點擊連接後hover不出現的問題

不一樣級別： !important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

同一級別：CSS優先級：是由四個級別和各級別的出現次數決定的。四個級別分別爲：行內選擇符、ID選擇符、類別選擇符、元素選擇符。

　　優先級的算法：
　　每一個規則對應一個初始"四位數"：0、0、0、0
　　如果行內選擇符，則加一、0、0、0
　　如果 ID選擇符，則加0、一、0、0
　　如果類選擇符/屬性選擇符/僞類選擇符，則分別加0、0、一、0
　　如果元素選擇符/僞元素選擇符，則分別加0、0、0、1
　　算法：將每條規則中，選擇符對應的數相加後獲得的」四位數「，從左到右進行比較，大的優先級越高。

5、bfc（塊級格式化上下文）清除浮動

BFC特性：

塊級格式化上下文會阻止外邊距疊加：當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，若是這兩個相鄰的塊框不屬於同一個塊級格式化上下文，那麼它們的外邊距就不會疊加。

塊級格式化上下文不會重疊浮動元素：根據規定，一個塊級格式化上下文的邊框不能和它裏面的元素的外邊距重疊。這就意味着瀏覽器將會給塊級格式化上下文建立隱式的外邊距來阻止它和浮動元素的外邊距疊加。因爲這個緣由，當給一個挨着浮動的塊級格式化上下文添加負的外邊距時將會不起做用。

BFC佈局規則：

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

哪些元素會生成BFC

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

清除浮動的方法：

①在浮動的盒子之下再放一個標籤，在這個標籤中使用clear:both，來清除浮動對頁面的影響。即加標籤，並設置標籤的style爲clear:both

②僞類元素

.clearfix:after{

content:"";//設置內容爲空

height:0;//高度爲0

lineheight:

0;//行高爲0

display:block;//將文本轉爲塊級元素

visibility:hidden;//將元素隱藏

clear:both//清除浮動

}

③觸發BFC

6、層疊上下文

層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規範中，每一個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。通常狀況下，元素在頁面上沿X軸Y軸平鋪，咱們察覺不到它們在Z軸上的層疊關係。而一旦元素髮生堆疊，這時就能發現某個元素可能覆蓋了另外一個元素或者被另外一個元素覆蓋。

若是一個元素含有層疊上下文，(也就是說它是層疊上下文元素)，咱們能夠理解爲這個元素在Z軸上就「高人一等」，最終表現就是它離屏幕觀察者更近。

層疊等級指的又是什麼？層疊等級(stacking level，叫「層疊級別」/「層疊水平」也行)

在同一個層疊上下文中，它描述定義的是該層疊上下文中的層疊上下文元素在Z軸上的上下順序。
在其餘普通元素中，它描述定義的是這些普通元素在Z軸上的上下順序。

普通元素的層疊等級優先由其所在的層疊上下文決定。

層疊等級的比較只有在當前層疊上下文元素中才有意義。不一樣層疊上下文中比較層疊等級是沒有意義的。

如何產生層疊上下文呢？如何讓一個元素變成層疊上下文元素呢？

HTML中的根元素<html></html>自己就具備層疊上下文，稱爲「根層疊上下文」。
普通元素設置position屬性爲非static值並設置z-index屬性爲具體數值，產生層疊上下文。
CSS3中的新屬性也能夠產生層疊上下文。

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。

首先，z-index屬性值並非在任何元素上都有效果。它僅在定位元素（定義了position屬性，且屬性值爲非static值的元素）上有效果。
判斷元素在Z軸上的堆疊順序，不只僅是直接比較兩個元素的z-index值的大小，這個堆疊順序實際由元素的層疊上下文、層疊等級共同決定。

屏幕上的xyz軸

<style>
  div {  
    position: relative;  
    width: 100px;  
    height: 100px;  
  }  
  p {  
    position: absolute;  
    font-size: 20px;  
    width: 100px;  
    height: 100px;  
  }  
  .a {  
    background-color: blue;  
    z-index: 1;  
  }  
  .b {  
    background-color: green;  
    z-index: 2;  
    top: 20px;  
    left: 20px;  
  }  
  .c {  
    background-color: red;  
    z-index: 3;  
    top: -20px;  
    left: 40px;  
  }
</style>

<body>  
  <div>  
    <p class="a">a</p>  
    <p class="b">b</p>  
  </div> 

  <div>  
    <p class="c">c</p>  
  </div>  
</body>

由於p.a、p.b、p.c三個的父元素div都沒有設置z-index，因此不會產生層疊上下文，因此.a、.b、.c都處於由<html></html>標籤產生的「根層疊上下文」中，屬於同一個層疊上下文，此時誰的z-index值大，誰在上面。

<style>
  div {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .box1 {
    z-index: 2;
  }
  .box2 {
    z-index: 1;
  }
  p {
    position: absolute;
    font-size: 20px;
    width: 100px;
    height: 100px;
  }
  .a {
    background-color: blue;
    z-index: 100;
  }
  .b {
    background-color: green;
    top: 20px;
    left: 20px;
    z-index: 200;
  }
  .c {
    background-color: red;
    top: -20px;
    left: 40px;
    z-index: 9999;
  }
</style>

<body>
  <div class="box1">
    <p class="a">a</p>
    <p class="b">b</p>
  </div>

  <div class="box2">
    <p class="c">c</p>
  </div>
</body>

咱們發下，雖然p.c元素的z-index值爲9999，遠大於p.a和p.b的z-index值，可是因爲p.a、p.b的父元素div.box1產生的層疊上下文的z-index的值爲2，p.c的父元素div.box2所產生的層疊上下文的z-index值爲1，因此p.c永遠在p.a和p.b下面。

同時，若是咱們只更改p.a和p.b的z-index值，因爲這兩個元素都在父元素div.box1產生的層疊上下文中，因此，誰的z-index值大，誰在上面。

「層疊順序」(stacking order)表示元素髮生層疊時按照特定的順序規則在Z軸上垂直顯示。因而可知，前面所說的「層疊上下文」和「層疊等級」是一種概念，而這裏的「層疊順序」是一種規則。

在不考慮CSS3的狀況下，當元素髮生層疊時，層疊順訊遵循上面途中的規則。
這裏值得注意的是：

左上角"層疊上下文background/border"指的是層疊上下文元素的背景和邊框。
inline/inline-block元素的層疊順序要高於block(塊級)/float(浮動)元素。
單純考慮層疊順序，z-index: auto和z-index: 0在同一層級，但這兩個屬性值自己是有根本區別的。

劃重點了！！！！到底應該怎麼判斷呢？？？

首先先看要比較的兩個元素是否處於同一個層疊上下文中：

若是是，誰的層疊等級大，誰在上面（怎麼判斷層疊等級大小呢？——看「層疊順序」圖）。
若是兩個元素不在統一層疊上下文中，請先比較他們所處的層疊上下文的層疊等級。

當兩個元素層疊等級相同、層疊順序相同時，在DOM結構中後面的元素層疊等級在前面元素之上。

CSS3中的屬性對層疊上下文的影響

CSS3中出現了不少新屬性，其中一些屬性對層疊上下文也產生了很大的影響。以下：

父元素的display屬性值爲flex|inline-flex，子元素z-index屬性值不爲auto的時候，子元素爲層疊上下文元素；
元素的opacity屬性值不是1；
元素的transform屬性值不是none；
元素mix-blend-mode屬性值不是normal`；
元素的filter屬性值不是none；
元素的isolation屬性值是isolate；
will-change指定的屬性值爲上面任意一個；
元素的-webkit-overflow-scrolling屬性值設置爲touch。

CSS3中，元素屬性知足以上條件之一，就會產生層疊上下文。

本部分參考連接：https://www.jianshu.com/p/0f88946a0746

7、常見頁面佈局

1. 左定寬，右自適應

<!--position + margin：-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 200px;
            height: 600px;
            background: red;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/
            color: #fff;

            position: absolute;
            top: 0;
            left: 0;
        }

        .right {
            height: 600px;
            background: yellow;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/

            margin-left: 210px;
        }
    </style>

<div class="left">定寬</div>
<div class="right">自適應</div>

<!--float + margin：-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 200px;
            height: 600px;
            background: red;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/
            color: #fff;

            float: left;
        }

        .right {
            height: 600px;
            background: yellow;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/

            margin-left: 210px;
        }
    </style>
<div class="left">定寬</div>
<div class="right">自適應</div>

<!--3.float + overflow-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 200px;
            height: 600px;
            background: red;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/
            color: #fff;

            float: left;
        }

        .right {
            height: 600px;
            background: yellow;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/

            /*建立BFC   
            設置 overflow: hidden 會觸發 BFC 模式（Block Formatting Context）塊級格式上下文。*/
            overflow: hidden;
        }
    </style>
<div class="left">定寬</div>
<div class="right">自適應</div>

<!--4. flex-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            display: flex;
        }

        .left {
            width: 200px;
            height: 600px;
            background: red;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/
            color: #fff;
        }

        .right {
            height: 600px;
            background: yellow;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/

            flex: 1;
        }
    </style>
<body class="parent">
<div class="left">定寬</div>
<div class="right">自適應</div>
</body>

2. 聖盃佈局

比較特殊的三欄佈局，一樣也是兩邊固定寬度，中間自適應，惟一區別是dom結構必須是先寫中間列部分，這樣實現中間列能夠優先加載。

  .container {
    padding-left: 220px;//爲左右欄騰出空間
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }
  <article class="container">
    <div class="center">
      <h2>聖盃佈局</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </article>

3. 雙飛翼佈局

一樣也是三欄佈局，在聖盃佈局基礎上進一步優化，解決了聖盃佈局錯亂問題，實現了內容與佈局的分離。並且任何一欄均可以是最高欄，不會出問題。

    .container {
        min-width: 600px;//確保中間內容能夠顯示出來，兩倍left寬+right寬
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }
    <article class="container">
        <div class="center">
            <div class="inner">雙飛翼佈局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

4. 等高佈局

咱們經過等高佈局即可解決聖盃佈局的第二點缺點，由於背景是在 padding 區域顯示的， 設置一個大數值的 padding-bottom，再設置相同數值的負的 margin-bottom，並在全部列外面加上一個容器，並設置 overflow:hidden 把溢出背景切掉。這種可能實現多列等高佈局，而且也能實現列與列之間分隔線效果，結構簡單，兼容全部瀏覽器。

.center,
.left,
.right {
   padding-bottom: 10000px;
   margin-bottom: -10000px;
}
.container {
   padding-left: 220px;
   padding-right: 220px;
   overflow: hidden;//把溢出背景切掉
}

本部分摘自：http://www.javashuo.com/article/p-oomacldo-dg.html

8、響應式佈局

① 設置 Meta 標籤

大多數移動瀏覽器將HTML頁面放大爲寬的視圖（viewport）以符合屏幕分辨率。你可使用視圖的meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度做爲視圖寬度並禁止初始的縮放。在<head>標籤里加入這個meta標籤。

user-scalable = no 屬性可以解決 iPad 切換橫屏以後觸摸才能回到具體尺寸的問題。

②經過媒介查詢來設置樣式 Media Queries

Media Queries 是響應式設計的核心。

它根據條件告訴瀏覽器如何爲指定視圖寬度渲染頁面。假如一個終端的分辨率小於 980px，那麼能夠這樣寫：

@media screen and (max-width: 980px) {

  #head { … }

  #content { … }

  #footer { … }

}

這裏的樣式就會覆蓋上面已經定義好的樣式。

③ 設置多種試圖寬度

假如咱們要設定兼容 iPad 和 iphone 的視圖，那麼能夠這樣設置：

/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {}

9、css預處理，後處理

CSS 預處理器

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件。

廣義上說，目標格式爲 CSS 的 預處理器 是 CSS 預處理器，但本文特指以最終生成 CSS 爲目的的 領域特定語言。
Sass、LESS、Stylus 是目前最主流的 CSS 預處理器。

實現原理

取到 DSL 源代碼 的 分析樹
將含有 動態生成 相關節點的 分析樹 轉換爲 靜態分析樹
將 靜態分析樹 轉換爲 CSS 的 靜態分析樹
將 CSS 的 靜態分析樹 轉換爲 CSS 代碼

優缺點

優勢：語言級邏輯處理，動態特性，改善項目結構
缺點：採用特殊語法，框架耦合度高，複雜度高

CSS 後處理器

CSS 後處理器是對 CSS 進行處理，並最終生成 CSS 的預處理器，它屬於廣義上的 CSS 預處理器。
咱們好久之前就在用 CSS 後處理器了，最典型的例子是 CSS 壓縮工具（如 clean-css），只不過之前沒單獨拿出來講過。還有最近比較火的 Autoprefixer，以 Can I Use 上的瀏覽器支持數據爲基礎，自動處理兼容性問題。

CSS 後處理器 是對 CSS 進行處理，並最終生成 CSS 的 預處理器，它屬於廣義上的 CSS 預處理器。
咱們好久之前就在用 CSS 後處理器 了，最典型的例子是 CSS 壓縮工具（如 clean-css），只不過之前沒單獨拿出來講過。

實現原理

將 源代碼 作爲 CSS 解析，得到 分析樹
對 CSS 的 分析樹 進行 後處理
將 CSS 的 分析樹 轉換爲 CSS 代碼

優缺點

優勢：使用 CSS 語法，容易進行模塊化，貼近 CSS 的將來標準
缺點：邏輯處理能力有限

本部分參考連接：https://blog.csdn.net/yushuangyushuang/article/details/79209752

10、css3新特性

1.CSS3的選擇器

E:last-child 匹配父元素的最後一個子元素E。
E:nth-child(n)匹配父元素的第n個子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。

2. @Font-face 特性

Font-face 能夠用來加載字體樣式，並且它還可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

 @font-face {
          font-family: iconfont;
          src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);              
 }

3. 圓角 border-radius: 15px;

4.陰影（Shadow）

.class1{
    text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
}

5.CSS3 的漸變效果

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

6.css彈性盒子模型

<div class="boxcontainer">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
.boxcontainer { 
    width: 1000px; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
} 
            
 .item { 
    background: #357c96; 
    font-weight: bold; 
    margin: 2px; 
    padding: 20px; 
    color: #fff; 
    font-family: Arial, sans-serif; 
}

7.Transition 對象變換時的過渡效果

 transition-property 對象參與過渡的屬性
 transition-duration 過渡的持續時間
 transition-timing-function 過渡的類型
 transition-delay 延遲過渡的時間

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
<!--示例代碼-->
<style type="text/css">
    .main{
        position: relative;
        margin: 0 auto;
        height:45px;
        width: 300px;
        background-color:lightgray;
        transition:background-color .6s ease-in 0s;
    }
    .main:hover{
        background-color: dimgray;
    }
</style>
<div class="main"></div>

8. Transforms 2D/3D轉換效果　　

主要包括 translate（水平移動）、rotate（旋轉）、scale（伸縮）、skew（傾斜）、沿X，Y，Z軸的旋轉

<style type="text/css">
    .main{
        position: relative;
        top:200px;
        margin: 0 auto;
        height:45px;
        width: 300px;
        background-color:dimgray;
        transition:transform .6s ease 0s;
        transform: rotate(0deg);
    }
    .main:hover{
        transform: rotate(180deg);
    }
</style>
 <div class="main"></div>

9. Animation動畫特效

下面的表格列出了 @keyframes 規則和全部動畫屬性：

屬性	描述
@keyframes	規定動畫。
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name	規定 @keyframes 動畫的名稱。
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。
animation-delay	規定動畫什麼時候開始。默認是 0。
animation-iteration-count	規定動畫被播放的次數。默認是 1。
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。

<style type="text/css">
    .main{
        position: absolute;
        left: 10px;
        top:200px;
        height:45px;
        width: 300px;
        background-color:cadetblue;
    }
    .main:hover{
        animation: animations 2s ease 0s;
    }
    @keyframes animations {
        0%{
            left: 10px;
            opacity: 1;
        }
        50%,70%{
            left: 50%;
            opacity: .7;
            margin-left:-150px;
        }
        100%{
            left: 100%;
            opacity: 0;
            margin-left:-300px;
        }
    }
</style>
 <div class="main"></div>

當動畫爲 25% 及 50% 時改變背景色，而後當動畫 100% 完成時再次改變：

@keyframes myfirst {
　　0% {background: red;}
　　25% {background: yellow;}
　　50% {background: blue;}
　　100% {background: green;}
}

補充：CSS3動畫卡頓怎麼解決？

雖說瀏覽器執行js是單線程執行（注意，是執行，並非說瀏覽器只有1個線程，而是運行時，runing），但實際上瀏覽器的2個重要的執行線程，這 2 個線程協同工做來渲染一個網頁：主線程和合成線程

通常狀況下，主線程負責：運行 JavaScript；計算 HTML 元素的 CSS 樣式；頁面的佈局；將元素繪製到一個或多個位圖中；將這些位圖交給合成線程。

相應地，合成線程負責：經過 GPU 將位圖繪製到屏幕上；通知主線程更新頁面中可見或即將變成可見的部分的位圖；計算出頁面中哪部分是可見的；計算出當你在滾動頁面時哪部分是即將變成可見的；當你滾動頁面時將相應位置的元素移動到可視區域。

在使用height，width，margin，padding做爲transition的值時，會形成瀏覽器主線程的工做量較重，例如從margin-left：-20px渲染到margin-left:0，主線程須要計算樣式margin-left:-19px,margin-left:-18px，一直到margin-left:0，並且每一次主線程計算樣式後，合成進程都須要繪製到GPU而後再渲染到屏幕上，先後總共進行20次主線程渲染，20次合成線程渲染，20+20次，總計40次計算。

也就是說，主線程每次都須要執行Scripts，Render Tree ,Layout和Paint這四個階段的計算。

而若是使用transform的話，例如tranform:translate(-20px,0)到transform:translate(0,0)，主線程只須要進行一次tranform:translate(-20px,0)到transform:translate(0,0)，而後合成線程去一次將-20px轉換到0px，這樣的話，總計1+20計算。

css3動畫卡頓的解決方案： 在使用css3 transtion作動畫效果時，優先選擇transform，儘可能不要使用height，width，margin和padding。

本部分摘自：http://www.javashuo.com/article/p-ojjjvoyb-g.html

11、display有哪些取值

none 此元素不會被顯示，而且不佔據頁面空間，這也是與visibility:hidden不一樣的地方，設置visibility:hidden的元素，不會被顯示，可是仍是會佔據原來的頁面空間。
inline 行內元素元素會在一行內顯示，超出屏幕寬度自動換行，不能設置寬度和高度，元素的寬度和高度只能是靠元素內的內容撐開。示例元素：span,b,i,a,u,sub,sup,strong,em
block 塊級元素會獨佔一行，若是不設置寬度，其寬度會自動填滿父元素的寬度，能夠設置寬高，即便設置了寬度，小於父元素的寬度，塊級元素也會獨佔一行。示例元素：div,h1-h6,ul,ol,dl,p
inline-block 行內塊元素與行內元素同樣能夠再一行內顯示，並且能夠設置寬高，能夠設置margin和padding。示例元素：input,button,img
list-item 列表元素。示例元素：li
table 會做爲塊級表格來顯示(相似於<table>)，表格先後帶有換行符。
inline-table 會做爲內聯表格來顯示(相似於<table>)，表格先後沒有換行符。
flex 多欄多列布局，火狐能夠直接使用，谷歌和歐朋須要在屬性值前面加-webkit-前綴，比較適合移動端開發使用。

12、相鄰的兩個inline-block節點爲何會出現間隔，該如何解決

inline-block 後的元素建立了一個行級的塊容器，該元素內部（內容）被格式化成一個塊元素，同時元素自己則被格式化成一個行內元素。

也就是說，它是一個格式化爲行內元素的塊容器。兼具行內元素和塊元素的特色。

DOM 規範中規定，一切皆是節點，換行或者空格，會被當成文檔節點來處理。
因此那個空隙就是這個空的文檔節點致使。（它由空格、換行或回車所產生空白符所致）

方法1. 將標籤之間的空格與換行所有去掉

<p>
    <span>hello</span><span>world</span>
</p>

可是這樣寫很不人性化，能夠用以下方式解決：

也就是在相鄰的元素之間加上空白的html註釋，變相地取消了他們之間的空白節點。還有其餘的幾種改法這裏不一一列舉，你們也能夠自由發揮，只要是取消了相鄰元素之間的空白節點就能達到目的。

<ul>
    <li>控球后衛</li><!--
    --><li>得分後衛</li><!--
    --><li>小前鋒</li><!--
    --><li>大前鋒</li><!--
    --><li>中鋒</li>
</ul>

方法2. font-size設爲零

<p>
    <span>hello</span>
    <span>world</span>
</p>

span { 
    display:inline-block;
    width:100px;
    background:#36c;
    color:#fff;
    font-size:30px;
    text-align:center;
}

p {
    font-size: 0;
}

方法3. letter-spacing和word-spacing改爲某個負值

.span {
    letter-spacing: -.5em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -.5em; /* IE < 8 && gecko: collapse white-space between units */
}

方法4. 使用負邊距margin

ul li {
    display: inline-block;
    width: 160px;
    text-align: center;
    border-right: 1px solid #8E0303;
    margin-right: -10px;
}
ul li:last-child {
    border-right: none;
    margin-right: 0;
}

十3、meta viewport 移動端適配

讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width: 讓當前viewport寬度等於設備的寬度

user-scalable=no: 禁止用戶縮放

initial-scale=1.0: 設置頁面的初始縮放值爲不縮放

maximum-scale=1.0: 容許用戶的最大縮放值爲1.0

minimum-scale=1.0: 容許用戶的最小縮放值爲1.0

十4、CSS實現寬度自適應100%，寬高16:9的比例的矩形

第一步先計算高度，假設寬100%，那麼高爲h=9/16=56.25%

第二步利用以前所說設置padding-bottom方法實現矩形

<div class="box">
  <div class="scale">
    <p>這是一個16：9的矩形</p>
  </div>
</div>

.box {
  width: 80%;
}

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

十5、rem佈局的優缺點

rem佈局的本質是等比縮放，通常是基於寬度。

通常內容型的網站，都不太適合使用rem，由於大屏用戶能夠本身選擇是要更大字體，仍是要更多內容，一旦使用了rem，就剝奪了用戶的自由，好比百度知道，百度經驗都沒有使用rem佈局；

一些偏向app類的，圖標類的，圖片類的，好比淘寶，活動頁面，比較適合使用rem，由於調大字體時並不能調大圖標的大小,rem能夠作到100%的還原度，但同時rem的製做成本也更大。

本部分參考連接： https://www.jianshu.com/p/09bd0ca51ef5

十6、畫三角形和圓形

當咱們設置盒子的width和height爲0時，此時效果以下：

而後將border的底部取消

最後設置border的左邊和右邊爲白色

/* border-radius的值要設置高寬的一半值  */
圓形 {
    display:inline-block;
    margin-right:5px;
    border-radius:50px; /* 圓形邊緣弧度 */
    width:100px; /* 寬度 */
    height:100px; /* 高度 */
    background-color: red;
}

十7、1像素邊框問題

咱們在html中，若是要設置一個1像素的邊框，最多見的就是border: 1px solid #000; 這句就表示設置一個1像素的，實心的，黑色的邊框。這個css語句，在pc上毫無問題，可是隨着移動web的興起，貌似就有些問題了。能夠試驗一下，把這句放到手機瀏覽器中顯示一下，而後屏幕截圖，你會驚奇的發現，1px已經顯示爲2px了。若是你放到iphone6 plus下，你會更神奇的發現，竟然是3px。

那麼，爲何設置爲1px的邊框，在手機下會顯示爲2px，甚至3px呢？其實，這就是retina屏幕搞的鬼。

至於retina的原理，這裏就很少介紹了，retina的作法是把1像素分割成4個像素顯示，這樣看起來更細膩，但其實仍是1像素。因此，1px的邊框，在retina屏幕上就會顯示成2px的寬度。

viewport的設置和屏幕物理分辨率是按比例而不是相同的. 移動端window對象有個devicePixelRatio屬性, 它表示設備物理像素和css像素的比例, 在retina屏的iphone手機上, 這個值爲2或3, css裏寫的1px長度映射到物理像素上就有2px或3px那麼長。

viewport講解以及像素問題： http://www.javashuo.com/article/p-bzisvqdc-cb.html

viewport + rem 方案

利用viewport + rem + js 動態的修改頁面的縮放比例，實現小於1像素的顯示。在頁面初始化時，在頭部引入原始默認狀態以下，接下來的任務就是js的動態修改縮放比以及實現rem根元素字體大小的設置。

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 

var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

本部份內容參考：https://www.jianshu.com/p/fa670b737a29

十8、position

position的取值：static(靜態定位)、relative（相對定位）、absolute(絕對定位)、fixed（固定定位）。

其中static和fixed比較好理解：static是position的默認值，沒有定位，元素出如今正常的的流中（忽略top、bottom、left、right、z-index聲明）；fixed是至關於瀏覽器窗口進行定位，元素的位置經過left、right、top、bottom進行規定，可經過z-index進行層次分級

relative：定位爲relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在他是默認參照父級的原始點爲原始點，無父級則以文本流的順序在上一個元素的底部爲原始點，配合TRBL（Top、Right、Bottom、left）進行定位。【通俗的說就是不管父級是否存在有沒有TRBL均是以父級的左上角進行定位，可是父級的padding屬性會對其有影響】

absolute:定位爲absolute的元素脫離正常的文本流，但其在正常流中的位置不存在。若是父級沒有設定position屬性，則當前absolute元素以瀏覽器左上角爲原始點進行定位，不然以父級元素左上角原定進行定位，位置由TRBL決定，父級的padding屬性，對其不起做用。

relative定位的層是相對其最近的父元素（無論這個父元素的是什麼定位方式），而absolute定位的層是相對其最近的定義爲absolute或relative的父層（可能不是直接父元素）若是其父層都未定義absolute或relative，則相對body進行定位。

inherit：規定應該從父元素繼承 position 屬性的值。

十9、CSS能夠給子元素繼承的樣式

字體相關：line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相關：letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相關：list-style-image, list-style-position, list-style-type, list-style
顏色：color

二10、div水平居中和垂直居中

1) 只適用: 寬高已定

設置position: absolute(父元素記得設置: relative), 而後top和left設置50%, 50%, 再設置margin-left=寬/2, margin-top:寬/2

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    position: relative;     /*很重要,不能忘*/
}
.div2{
    background: yellow;
    width:300px;
    height:200px;
    margin-left:-150px;
    margin-top:-100px;
    top:50%;
    left:50%;
    position: absolute;
}

2) 只適用: 固定寬高; 若是寬高隨意,想靠內部撐開的話, 會佔滿整個父div

依然是利用position：子div的上下左右都設置成0，而後margin設置auto。關鍵是要設置position：子absolute，父relative。

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    position: relative;     /*很重要,不能忘*/
}
.div2{
    background: yellow;
    width:300px;
    height:200px;
    margin:auto;
    bottom: 0;
    top:0;
    left:0;
    right:0;
    position: absolute;
}

3) 適用: 不管是否固定寬高均可用. 問題在於兼容性. ie9及如下不支持

設置父級flex屬性: display:flex; justify-content:center; align-items: center;

這種方法在子級div有多個時也能夠實現居中----具體看flex屬性設置

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    display: flex;
    justify-content: center;　　/*使垂直居中*/
    align-items:center;　　　　/*使水平居中*/      
}
.div2{
    background: yellow;
    /*width:300px;
    height:200px;*/
}

4) 適用: 要設寬度, 不然會使得寬度爲父級div的寬度

父級元素設置display:table-cell ，而後vertical-align：middle。這種方法能夠設置垂直居中. 這時候只要在子元素裏設置margin:auto便可實現水平居中

可是這種方法好像會使父元素的居中無效。

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    display:table-cell;
    vertical-align: middle;        
}
.div2{
    background: yellow;
    width:300px;
    /*height:200px;*/
    margin:auto;
}

5) 適用: 可不指定寬高

使用transform居中. 設置父級position:relative; 子級position:absolute. 而後top: 50%; left:50%; transform:translate(-50%,-50%)

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    position: relative;
}
.div2{
    background: yellow;
    position: absolute;
    /*width:200px;*/
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6) 適用: 指定寬高百分比

保證left和right的百分數同樣就能夠實現水平居中，保證top和bottom的百分數同樣就能夠實現垂直居中。可是這種方法不能由內部元素自動調節div的寬高，而是經過父元素大小控制的

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    position: relative;
}
.div2{
    background: yellow;
    position: absolute;
    left: 30%;
    right: 30%;
    top:40%;
    bottom: 40%;
}

7) 使用display:inline-block加僞元素

box 容器經過 after或者before 生成一個高度 100% 的「備胎」，他的高度和容器的高度是一致的，相對於「備胎」垂直居中，在視覺上表現出來也就是相對於容器垂直居中了

.div1{
    width:600px;
    height:200px;
    border:1px solid black;
    text-align: center;
}
.div1:after{
    content:"";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.div2{
    background: black;
    color:white;
    display: inline-block;
}

二11、雪碧圖

使用雪碧圖的目的：有時爲了美觀，咱們會使用一張圖片來代替一些小圖標，可是一個網頁可能有不少不少的小圖標，瀏覽器在顯示頁面的時候，就須要像服務器發送不少次訪問請求，這樣一來，一是形成資源浪費，二是會致使訪問速度變慢。這時候，把不少小圖片（須要使用的小圖標）放在一張圖片上，按照必定的距離隔開，就解決了上述的兩個問題。
通俗來講：將小圖標合併在一塊兒以後的圖片稱做雪碧圖，每一個小圖標的使用須要配合background-position來獲取。

使用雪碧圖的優勢有如下幾點：

1.將多張圖片合併到一張圖片中，能夠減少圖片的總大小。

2.將多張圖片合併成一張圖片後，下載所有所需的資源，只需一次請求。能夠減少創建鏈接的消耗。

如何使用雪碧圖？

1.肯定在哪裏引入精靈圖，併爲其設置大小。

2.在樣式CSS中插入背景圖，background-image:url("");

3.利用background-position：x y;屬性和background-size：cover；background-repeat：no-repeat;等屬性的組合進行定位。

<li class="cat1"><i></i><h3>服飾內衣</h3></li>
<li class="cat2"><i></i><h3>鞋包配飾</h3></li>
<li class="cat3"><i></i><h3>運動戶外</h3></li>
<li class="cat4"><i></i><h3>珠寶手錶</h3></li>

i{
    width: 30px;
    height: 24px;
    float: left;
    background: url(images/sprite.png);
    margin: 5px 10px 0 0 ;
}
.cat1 i{
    background-position: 0 0;
}
.cat2 i{
    background-position: 0 -24px;
}
.cat3 i{
    background-position: 0 -48px;
}
.cat4 i{
    background-position: 0 -72px;
}

https://www.toptal.com/developers/css/sprite-generator 該網站能夠快速製做雪碧圖並生成對應的css代碼

後續遇到新的問題還會繼續補充·······

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。