CSS知識點及技巧整理

這些個知識點是我我的認爲的，下面咱們就來看看這些個知識點。

1.怎麼讓一個不定寬高的 DIV，垂直水平居中?

使用Flex

• 只須要在父盒子設置：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

• 父盒子設置:display:relative
• Div 設置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

• 父盒子設置:display:table-cell; text-align:center;vertical-align:middle;
• Div 設置: display:inline-block;vertical-align:middle;

2.position 幾個屬性的做用

2.1 relative，absolute，fixed，static

position 的常見四個屬性值: relative，absolute，fixed，static。通常都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。

• static:默認位置。 在通常狀況下，咱們不須要特別的去聲明它，但有時候遇到繼承的狀況，咱們不肯意見到元素所繼承的屬性影響自己，從而能夠用Position:static取消繼承，即還原元素定位的默認值。設置爲 static 的元素，它始終會處於頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 聲明)。通常不經常使用。
• relative:相對定位。 相對定位是相對於元素默認的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來的位置爲基準偏移，而無論其餘元素會怎麼 樣。注意 relative 移動後的元素在原來的位置仍佔據空間。
• absolute:絕對定位。 設置爲 absolute 的元素，若是它的 父容器設置了 position 屬性，而且 position 的屬性值爲 absolute 或者 relative，那麼就會依據父容器進行偏移。若是其父容器沒有設置 position 屬性，那麼偏移是以 body 爲依據。注意設置 absolute 屬性的元素在標準流中不佔位置。
• fixed:固定定位。 位置被設置爲 fixed 的元素，可定位於相對於瀏覽器窗口的指定座標。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 爲依據的。 注意設置 fixed 屬性的元素在標準流中不佔位置。

2.2 sticky

position新增的屬性「sticky」：
設置了sticky的元素，在屏幕範圍（viewport）時該元素的位置並不受到定位影響（設置是top、left等屬性無效），當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設置的left、top等屬性成固定位置的效果。

sticky屬性有如下幾個特色：

• 該元素並不脫離文檔流，仍然保留元素本來在文檔流中的位置。
• 當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即若是你設置了top: 50px，那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定，再也不向上移動。

比較蛋疼的是這個屬性的兼容性還不是很好，目前還是一個試驗性的屬性，並非W3C推薦的標準。它之因此會出現，也是由於監聽scroll事件來實現粘性佈局使瀏覽器進入慢滾動的模式，這與瀏覽器想要經過硬件加速來提高滾動的體驗是相悖的。

詳見： https://blog.csdn.net/sinat_37390744/article/details/77479239

3.浮動與清除浮動

3.1 浮動相關知識

float屬性的取值：

• left：元素向左浮動。
• right：元素向右浮動。
• none：默認值。元素不浮動，並會顯示在其在文本中出現的位置。

浮動的特性：

• 浮動元素會從普通文檔流中脫離，但浮動元素影響的不只是本身，它會影響周圍的元素對齊進行環繞。
• 無論一個元素是行內元素仍是塊級元素，若是被設置了浮動，那浮動元素會生成一個塊級框，能夠設置它的width和height，所以float經常用於製做橫向配列的菜單，能夠設置大小而且橫向排列。

浮動元素的展現在不一樣狀況下會有不一樣的規則：

• 浮動元素在浮動的時候，其margin不會超過包含塊的padding。PS：若是想要元素超出，能夠設置margin屬性
• 若是兩個元素一個向左浮動，一個向右浮動，左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。
• 若是有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象。
• 若是有多個浮動元素，後面的元素高度不會超過前面的元素，而且不會超過包含塊。
• 若是有非浮動元素和浮動元素同時存在，而且非浮動元素在前，則浮動元素不會高於非浮動元素
• 浮動元素會盡量地向頂端對齊、向左或向右對齊

重疊問題

• 行內元素與浮動元素髮生重疊，其邊框，背景和內容都會顯示在浮動元素之上
• 塊級元素與浮動元素髮生重疊時，邊框和背景會顯示在浮動元素之下，內容會顯示在浮動元素之上

clear屬性
clear屬性：確保當前元素的左右兩側不會有浮動元素。clear只對元素自己的佈局起做用。
取值：left、right、both

3.2 父元素高度塌陷問題

爲何要清除浮動，父元素高度塌陷
解決父元素高度塌陷問題：一個塊級元素若是沒有設置height，其height是由子元素撐開的。對子元素使用了浮動以後，子元素會脫離標準文檔流，也就是說，父級元素中沒有內容能夠撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。

3.3 清除浮動的方法

方法1：給父級div定義 高度
原理：給父級DIV定義固定高度（height），能解決父級DIV 沒法獲取高度得問題。
優勢：代碼簡潔
缺點：高度被固定死了，是適合內容固定不變的模塊。（不推薦使用）

方法二：使用空元素，如<div class="clear"></div> (.clear{clear:both})
原理：添加一對空的DIV標籤，利用css的clear:both屬性清除浮動，讓父級DIV可以獲取高度。
優勢：瀏覽器支持好
缺點：多出了不少空的DIV標籤，若是頁面中浮動模塊多的話，就會出現不少的空置DIV了，這樣感受視乎不是太使人滿意。（不推薦使用）

方法三：讓父級div 也一併浮起來
這樣作能夠初步解決當前的浮動問題。可是也讓父級浮動起來了，又會產生新的浮動問題。 不推薦使用

方法四：父級div定義 display:table
原理：將div屬性強制變成表格
優勢：不解
缺點：會產生新的未知問題。（不推薦使用）

方法五：父元素設置 overflow：hidden、auto；
原理：這個方法的關鍵在於觸發了BFC。在IE6中還須要觸發 hasLayout（zoom：1）
優勢：代碼簡介，不存在結構和語義化問題
缺點：沒法顯示須要溢出的元素（亦不太推薦使用）

方法六：父級div定義 僞類:after 和 zoom

.clearfix:after{
    content:'.';
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
}
.clearfix {zoom:1;}

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優勢：結構和語義化徹底正確,代碼量也適中，可重複利用率（建議定義公共類）
缺點：代碼不是很是簡潔（極力推薦使用）

經益求精寫法

.clearfix:after {
    content:」\200B」; 
    display:block; 
    height:0; 
    clear:both;
 }
.clearfix { *zoom:1; } 照顧IE6，IE7就能夠了

詳細關於浮動的知識請參看這篇文章：[
http://luopq.com/2015/11/08/C...]( http://luopq.com/2015/11/08/C...

4.BFC相關知識

定義：BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有 Block-level box 參 與， 它規定了內部的 Block-level Box 如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則
BFC 就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

• BFC這個元素的垂直方向的邊距會發生重疊，垂直方向的距離由margin決定，取最大值
• BFC 的區域不會與浮動盒子重疊（清除浮動原理）。
• 計算 BFC 的高度時，浮動元素也參與計算。

哪些元素會生成 BFC

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

5.box-sizing是什麼

設置CSS盒模型爲標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding
box-sizing屬性能夠爲三個值之一：

• content-box，默認值，只計算內容的寬度，border和padding不計算入width以內
• padding-box，padding計算入寬度內
• border-box，border和padding計算入寬度以內

6.px，em，rem 的區別

px 像素(Pixel)。絕對單位。像素 px 是相對於顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算 機系統的數字化圖像長度單位，若是 px 要換算成物理長度，須要指定精度 DPI。
em 是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置， 則相對於瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，所以並非一個固定的值。
rem 是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 爲元素設定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。

7.CSS 引入的方式有哪些? link 和@import 的區別是?

有四種：內聯(元素上的style屬性)、內嵌(style標籤)、外鏈(link)、導入(@import)
link和@import的區別：

• link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
• link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
• link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
• link支持使用Javascript控制DOM去改變樣式；而@import不支持。

8.流式佈局與響應式佈局的區別

流式佈局
使用非固定像素來定義網頁內容，也就是百分比佈局，經過盒子的寬度設置成百分比來根據屏幕的寬度來進
行伸縮，不受固定像素的限制，內容向兩側填充。

響應式開發
利用CSS3 中的 Media Query(媒介查詢)，經過查詢 screen 的寬度來指定某個寬度區間的網頁佈局。

• 超小屏幕(移動設備) 768px 如下
• 小屏設備 768px-992px
• 中等屏幕 992px-1200px
• 寬屏設備 1200px 以上

因爲響應式開發顯得繁瑣些，通常使用第三方響應式框架來完成，好比 bootstrap 來完成一部分工做，固然也 能夠本身寫響應式。

區別

-	流式佈局	響應式開發
開發方式	移動Web開發+PC開發	響應式開發
應用場景	通常在已經有PC端網站，開發移動的的時候只須要單獨開發移動端	針對一些新建的網站，如今要求適配移動端，因此就一套頁面兼容各類終端
開發	正對性強，開發效率高	兼容各類終端，效率低
適配	只適配移動設備，pad上體驗相對較差	能夠適配各類終端
效率	代碼簡潔，加載快	代碼相對複雜，加載慢

9.漸進加強和優雅降級

關鍵的區別是他們所側重的內容，以及這種不一樣形成的工做流程的差別

• 優雅降級一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。。
• 漸進加強針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

區別：

• 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給
• 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要
• 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

10.CSS隱藏元素的幾種方式及區別

display:none

• 元素在頁面上將完全消失，元素原本佔有的空間就會被其餘元素佔有，也就是說它會致使瀏覽器的重排和重繪。
• 不會觸發其點擊事件

visibility:hidden

• 和display:none的區別在於，元素在頁面消失後，其佔據的空間依舊會保留着，因此它只會致使瀏覽器重繪而不會重排。
• 沒法觸發其點擊事件
• 適用於那些元素隱藏後不但願頁面佈局會發生變化的場景

opacity:0

• 將元素的透明度設置爲0後，在咱們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
• 和visibility:hidden的一個共同點是元素隱藏後依舊佔據着空間，但咱們都知道，設置透明度爲0後，元素只是隱身了，它依舊存在頁面中。
• 能夠觸發點擊事件

設置height，width等盒模型屬性爲0

• 簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，若是元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。
• 若是元素設置了border，padding等屬性不爲0，很顯然，頁面上仍是能看到這個元素的，觸發元素的點擊事件徹底沒有問題。若是所有屬性都設置爲0，很顯然，這個元素至關於消失了，即沒法觸發點擊事件。
• 這種方式既不實用，也可能存在着着一些問題。但平時咱們用到的一些頁面效果可能就是採用這種方式來完成的，好比jquery的slideUp動畫，它就是設置元素的overflow:hidden後，接着經過定時器，不斷地設置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom爲0，從而達到slideUp的效果。

其餘腦洞方法

• 設置元素的position與left，top，bottom，right等，將元素移出至屏幕外
• 設置元素的position與z-index，將z-index設置成儘可能小的負數

11.消除圖片底部間隙的方法

• 圖片塊狀化 - 無基線對齊：img { display: block; }
• 圖片底線對齊：img { vertical-align: bottom; }
• 行高足夠小 - 基線位置上移：.box { line-height: 0; }

12."nth-child"和"nth-of-type"的區別

「nth-child」選擇的是父元素的子元素，這個子元素並無指定確切類型，同時知足兩個條件時方能有效果：其一是子元素，其二是子元素恰好處在那個位置；「nth-of-type」選擇的是某父元素的子元素，並且這個子元素是指定類型。參考

13.CSS中的顏色體系有哪些？

參考

14. CSS流體佈局下的寬度分離原則

所謂「寬度分離」原則，就是CSS中的width屬性不與影響寬度的 pading/border（有時候包括margin）屬性共存，width 獨立佔用一層標籤，而padding、border、margin 利用流動性在內部自適應呈現。

舉例：元素邊框內有20px的留白問題

.father { width:102px; }
.son {
    border:1px solid;
    padding:20px;
}

15. !important問題

超越!important：max-width會覆蓋width，並且這種覆蓋是超級覆蓋，比!important的權重還要高

超越最大：min-width覆蓋max-width，此規則發生在min-width和max-width衝突的時候，以下：

.container{
    min-width:1400px;
    max-width:1200px;
}

16. 任意高度元素的展開收起動畫

使用 height + overflow:hidden 實現會比較生硬。好的方式是使用max-height。

.element{
    max-height:0;
    overflow:hidden;
    transition: height .25s;
}
.element.active {
    max-height: 666px; /* 一個足夠大的最大高度值 */
}

17. 基於僞元素的圖片內容生成技術

需求：圖片還沒加載時就把 alt 信息呈現出來。

實現：圖片沒有 src ，所以，::before和::after 能夠生效，咱們能夠經過 content 屬性呈現 alt 屬性值。

img::after{
    /* 生成 alt 信息 */
    content: attr(alt);
    /* 尺寸和定位 */
    postion:absolute; bottom: 0;
    width:100%;
    background-color:rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: transform .2s;
}
img:hover::after{
    transform: translateY(0);
}

當咱們給圖片添加src 屬性時圖片從普通元素變成替換元素，本來還支持的::before和::after 此時所有無效，此時再hover圖片，是不會有任何信息出現的。

18. 輕鬆實現hover圖片變成另一張圖片

img:hover{
    content: url(laugh-tear.png);
}

content 改變的僅僅是視覺呈現，當咱們鼠標右鍵或其餘形式保存這張圖片時，所保存的仍是原來 src 對應的圖片。這種方法還能夠用在官網標誌上。

因爲使用 conetnt 生成圖片沒法設置圖片的尺寸，要想在移動端使用該技術，建議使用SVG圖片。

19. content屬性的特色

咱們使用 content生成的文本是沒法選中、沒法複製的，好像設置了user-select:none聲明通常，而普通元素的文本能夠被輕鬆選中。content生成的文本沒法被屏幕閱讀設備讀取，也沒法被搜索引擎抓取，所以，千萬不要自覺得是地把重要的文本信息使用 content屬性生成， 由於這對可訪問性和SEO都不友好，content屬性只能用來生成一些可有可無的內容，如裝飾性圖形或者序號之類；一樣，也不要擔憂本來重要的文字信息會被 content替換，替換的僅僅是視覺層。

content 動態生成值沒法獲取。content是一個很是強大的CSS屬性，其中一個強大之處就是計數器效果，能夠自動累加數值。如：

.total::after{
    content: counter(icecream);
}

示例：https://jsrun.net/6VyKp

20. content換行符與打點loading效果

正在加載中<dot>...</dot>

dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

在線demo

21. margin:auto的應用

margin:auto的填充規則：

1. 若是一側定值，一側auto，則 auto 爲剩餘空間大小
2. 若是兩側均是 auto，則平分剩餘空間

塊級元素垂直方向居中：
使用 writing-mode 改變文檔流方向

.father{
    height200px;
    writing-mode:vertical-lr;
}
.son{
    height:100px;
    margin:auto;
}

絕對定位下的margin:auto居中

.father{
    width:300px; height150px;
    position: relative;
}
.son{
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    width:200px; height:100px;
    margin:auto;
}

在線效果：https://demo.cssworld.cn/4/3-5.php

22. border-width支持的關鍵字

• thin：薄薄的，等同於1px
• medium：（默認值）薄厚均勻，等同於3px
• thick：厚厚的，等同於4px

23. border-color和color

border-color 默認顏色就是color色值，就是當沒有指定border-color顏色值的時候，會使用當前元素的color計算值做爲邊框色，如：

.box{
    border: 10px solid;
    color: red;
}

此時，.box 元素的 10px 邊框顏色就是紅色。

(持續更新)

歡迎在留言區補充或提出不一樣的看法

---

延伸閱讀

• 你必須知道的HTTP基本概念
• JavaScript ES5+ES6繼承總結
• JavaScript面向對象核心知識概括