CSS知識點整理

Dunizb發表於2018-02-27
原文網址 : https://juejin.im/post/5a954add6fb9a06348538c0d
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事件來實現粘性佈局使瀏覽器進入慢滾動的模式，這與瀏覽器想要通過硬體加速來提升滾動的體驗是相悖的。

詳見：blog.csdn.net/sinat_37390…

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/CSS-float/

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中的顏色體系有哪些？

CSS知識點整理
參考

(持續更新)

歡迎在留言區補充或提出不同的見解

延伸閱讀

相關文章