CSS

摘要： CSS 本文內容部分引用自front-end-interview-handbook CSS 選擇器的優先順序是如何計算的？ 重置（resetting）CSS 和 標準化（normalizing）CSS 的區別...

CSS

本文內容部分引用自front-end-interview-handbook

• CSS 選擇器的優先順序是如何計算的？
• 重置（resetting）CSS 和 標準化（normalizing）CSS 的區別是什麼？你會選擇哪種方式，為什麼？
• 請闡述Float 定位的工作原理。
• 請闡述z-index 屬性，並說明如何形成層疊上下文（stacking context）。
• 請闡述塊格式化上下文（Block Formatting Context）及其工作原理。
• 有哪些清除浮動的技術，都適用哪些情況？
• 請解釋什麼是雪碧圖（css sprites），以及如何實現？
• 如何解決不同瀏覽器的樣式相容性問題？
• 如何為功能受限的瀏覽器提供頁面？ 使用什麼樣的技術和流程？
• 有什麼不同的方式可以隱藏內容（使其僅適用於螢幕閱讀器）？
• 除了screen ，你還能說出一個 @media 屬性的例子嗎？
• 編寫高效的 CSS 應該注意什麼？
• 使用 CSS 預處理的優缺點分別是什麼？
• 對於你使用過的 CSS 預處理，說說喜歡和不喜歡的地方？
• 如何實現一個使用非標準字型的網頁設計？
• 解釋瀏覽器如何確定哪些元素與 CSS 選擇器匹配。
• 說說你對盒模型的理解，以及如何告知瀏覽器使用不同的盒模型渲染布局。
• * { box-sizing: border-box; } 會產生怎樣的效果？
• display 的屬性值都有哪些？
• inline 和inline-block 有什麼區別？
• relative 、fixed 、absolute 和static 四種定位有什麼區別？
• 你使用過哪些現有的 CSS 框架？你是如何改進它們的？
• 你瞭解 CSS Flexbox 和 Grid 嗎？
• 請解釋在編寫網站時，響應式與移動優先的區別。
• 響應式設計與自適應設計有何不同？
• 你有沒有使用過視網膜解析度的圖形？當中使用什麼技術？
• 什麼情況下，用translate() 而不用絕對定位？什麼時候，情況相反。
• 行內元素、塊級元素區別
• 一邊固定寬度一邊寬度自適應
• display:none、visibile:hidden、opacity:0的區別
• CSS中link和@import的區別
• 如何用css實現瀑布流佈局

CSS 選擇器的優先順序是如何計算的？

瀏覽器通過優先順序規則，判斷元素展示哪些樣式。優先順序通過 4 個維度指標確定，我們假定以a、b、c、d 命名，分別代表以下含義：

1. a 表示是否使用內聯樣式（inline style）。如果使用，a 為 1，否則為 0。
2. b 表示 ID 選擇器的數量。
3. c 表示類選擇器、屬性選擇器和偽類選擇器數量之和。
4. d 表示標籤（型別）選擇器和偽元素選擇器之和。

優先順序的結果並非通過以上四個值生成一個得分，而是每個值分開比較。a、b、c、d 權重從左到右，依次減小。判斷優先順序時，從左到右，一一比較，直到比較出最大值，即可停止。所以，如果b 的值不同，那麼c 和d 不管多大，都不會對結果產生影響。比如0，1，0，0 的優先順序高於0，0，10，10 。

當出現優先順序相等的情況時，最晚出現的樣式規則會被採納。如果你在樣式表裡寫了相同的規則（無論是在該檔案內部還是其它樣式檔案中），那麼最後出現的（在檔案底部的）樣式優先順序更高，因此會被採納。

在寫樣式時，我會使用較低的優先順序，這樣這些樣式可以輕易地覆蓋掉。尤其對寫 UI 元件的時候更為重要，這樣使用者就不需要通過非常複雜的優先順序規則或使用!important 的方式，去覆蓋元件的樣式了。

參考

• https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
• https://www.sitepoint.com/web-foundations/specificity/

重置（resetting）CSS 和 標準化（normalizing）CSS 的區別是什麼？你會選擇哪種方式，為什麼？

• 重置（Resetting） ： 重置意味著除去所有的瀏覽器預設樣式。對於頁面所有的元素，像margin 、padding 、font-size 這些樣式全部置成一樣。你將必須重新定義各種元素的樣式。
• 標準化（Normalizing） ： 標準化沒有去掉所有的預設樣式，而是保留了有用的一部分，同時還糾正了一些常見錯誤。

當需要實現非常個性化的網頁設計時，我會選擇重置的方式，因為我要寫很多自定義的樣式以滿足設計需求，這時候就不再需要標準化的預設樣式了。

參考

• https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

請闡述Float 定位的工作原理。

浮動（float）是 CSS 定位屬性。浮動元素從網頁的正常流動中移出，但是保持了部分的流動性，會影響其他元素的定位（比如文字會圍繞著浮動元素）。這一點與絕對定位不同，絕對定位的元素完全從文件流中脫離。

CSS 的clear 屬性通過使用left 、right 、both ，讓該元素向下移動（清除浮動）到浮動元素下面。

如果父元素只包含浮動元素，那麼該父元素的高度將塌縮為 0。我們可以通過清除（clear）從浮動元素後到父元素關閉前之間的浮動來修復這個問題。

有一種 hack 的方法，是自定義一個.clearfix 類，利用偽元素選擇器::after 清除浮動。另外還有一些方法 ，比如新增空的<div></div> 和設定浮動元素父元素的overflow 屬性。與這些方法不同的是，clearfix 方法，只需要給父元素新增一個類，定義如下：

.clearfix::after {
content: '';
display: block;
clear: both;
}

值得一提的是，把父元素屬性設定為overflow: auto 或overflow: hidden ，會使其內部的子元素形成塊格式化上下文（Block Formatting Context），並且父元素會擴張自己，使其能夠包圍它的子元素。

參考

• https://css-tricks.com/all-about-floats/

請闡述z-index 屬性，並說明如何形成層疊上下文（stacking context）。

CSS 中的z-index 屬性控制重疊元素的垂直疊加順序。z-index 只能影響position 值不是static 的元素。

沒有定義z-index 的值時，元素按照它們出現在 DOM 中的順序堆疊（層級越低，出現位置越靠上）。非靜態定位的元素（及其子元素）將始終覆蓋靜態定位（static）的元素，而不管 HTML 層次結構如何。

層疊上下文是包含一組圖層的元素。 在一組層疊上下文中，其子元素的z-index 值是相對於該父元素而不是 document root 設定的。每個層疊上下文完全獨立於它的兄弟元素。如果元素 B 位於元素 A 之上，則即使元素 A 的子元素 C 具有比元素 B 更高的z-index 值，元素 C 也永遠不會在元素 B 之上.

每個層疊上下文是自包含的：當元素的內容發生層疊後，整個該元素將會在父層疊上下文中按順序進行層疊。少數 CSS 屬性會觸發一個新的層疊上下文，例如opacity 小於 1，filter 不是none ，transform 不是none 。

參考

• https://css-tricks.com/almanac/properties/z/z-index/
• https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

請闡述塊格式化上下文（Block Formatting Context）及其工作原理。

塊格式上下文（BFC）是 Web 頁面的視覺化 CSS 渲染的部分，是塊級盒佈局發生的區域，也是浮動元素與其他元素互動的區域。

一個 HTML 盒（Box）滿足以下任意一條，會建立塊格式化上下文：

• float 的值不是none .
• position 的值不是static 或relative .
• display 的值是table-cell 、table-caption 、inline-block 、flex 、或inline-flex 。
• overflow 的值不是visible 。

在 BFC 中，每個盒的左外邊緣都與其包含的塊的左邊緣相接。

兩個相鄰的塊級盒在垂直方向上的邊距會發生合併（collapse）。更多內容請參考邊距合併（margin collapsing） 。

參考

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
• https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

有哪些清除浮動的技術，都適用哪些情況？

• 空div 方法：<div style="clear:both;"></div> 。
• Clearfix 方法：上文使用.clearfix 類已經提到。
• overflow: auto 或overflow: hidden 方法：上文已經提到。

在大型專案中，我會使用 Clearfix 方法，在需要的地方使用.clearfix 。設定overflow: hidden 的方法可能使其子元素顯示不完整，當子元素的高度大於父元素時。

請解釋什麼是雪碧圖（css sprites），以及如何實現？

雪碧圖是把多張圖片整合到一張上的圖片。它被運用在眾多使用了很多小圖示的網站上（Gmail 在使用）。實現方法：

1. 使用生成器將多張圖片打包成一張雪碧圖，併為其生成合適的 CSS。
2. 每張圖片都有相應的 CSS 類，該類定義了background-image 、background-position 和background-size 屬性。
3. 使用圖片時，將相應的類新增到你的元素中。

好處：

:hover

參考

• https://css-tricks.com/css-sprites/

如何解決不同瀏覽器的樣式相容性問題？

autoprefixer

如何為功能受限的瀏覽器提供頁面？ 使用什麼樣的技術和流程？

• 優雅的降級：為現代瀏覽器構建應用，同時確保它在舊版瀏覽器中正常執行。
• Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
• 漸進式增強：構建基於使用者體驗的應用，但在瀏覽器支援時新增新增功能。
• 利用caniuse.com 檢查特性支援。
• 使用autoprefixer 自動生成 CSS 屬性字首。
• 使用Modernizr 進行特性檢測。

有什麼不同的方式可以隱藏內容（使其僅適用於螢幕閱讀器）？

這些方法與可訪問性（a11y）有關。

• visibility: hidden ：元素仍然在頁面流中，並佔用空間。
• width: 0; height: 0 ：使元素不佔用螢幕上的任何空間，導致不顯示它。
• position: absolute; left: -99999px ： 將它置於螢幕之外。
• text-indent: -9999px ：這隻適用於block 元素中的文字。
• Metadata： 例如通過使用 Schema.org，RDF 和 JSON-LD。
• WAI-ARIA：如何增加網頁可訪問性的 W3C 技術規範。

即使 WAI-ARIA 是理想的解決方案，我也會採用絕對定位方法，因為它具有最少的注意事項，適用於大多數元素，而且使用起來非常簡單。

參考

• https://www.w3.org/TR/wai-aria-1.1/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
• http://a11yproject.com/

除了screen ，你還能說出一個 @media 屬性的例子嗎？

• all
  適用於所有裝置。
• print
  為了載入合適的文件到當前使用的可視視窗. 需要提前諮詢 paged media（媒體螢幕尺寸）, 以滿足個別裝置網頁尺寸不匹配等問題。
• screen
  主要適用於彩色的電腦螢幕
• speech
  解析speech這個合成器. 注意: CSS2已經有一個相似的媒體型別叫aural.
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

編寫高效的 CSS 應該注意什麼？

首先，瀏覽器從最右邊的選擇器，即關鍵選擇器（key selector），向左依次匹配。根據關鍵選擇器，瀏覽器從 DOM 中篩選出元素，然後向上遍歷被選元素的父元素，判斷是否匹配。選擇器匹配語句鏈越短，瀏覽器的匹配速度越快。避免使用標籤和通用選擇器作為關鍵選擇器，因為它們會匹配大量的元素，瀏覽器必須要進行大量的工作，去判斷這些元素的父元素們是否匹配。

BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.

BEM (Block Element Modifier) 原則上建議為獨立的 CSS 類命名，並且在需要層級關係時，將關係也體現在命名中，這自然會使選擇器高效且易於覆蓋。

搞清楚哪些 CSS 屬性會觸發重新佈局（reflow）、重繪（repaint）和合成（compositing）。在寫樣式時，避免觸發重新佈局的可能。

參考

• https://developers.google.com/web/fundamentals/performance/rendering/
• https://csstriggers.com/

使用 CSS 預處理的優缺點分別是什麼？

優點：

• 提高 CSS 可維護性。
• 易於編寫巢狀選擇器。
• 引入變數，增添主題功能。可以在不同的專案中共享主題檔案。
• 通過混合（Mixins）生成重複的 CSS。
• Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
• 將程式碼分割成多個檔案。不進行預處理的 CSS，雖然也可以分割成多個檔案，但需要建立多個 HTTP 請求載入這些檔案。

缺點：

• 需要預處理工具。
• 重新編譯的時間可能會很慢。

對於你使用過的 CSS 預處理，說說喜歡和不喜歡的地方？

喜歡：

• 絕大部分優點上題以及提過。
• Less 用 JavaScript 實現，與 NodeJS 高度結合。

Dislikes:

• 我通過node-sass 使用 Sass，它用 C ++ 編寫的 LibSass 繫結。在 Node 版本切換時，我必須經常重新編譯。
• Less 中，變數名稱以@ 作為字首，容易與 CSS 關鍵字混淆，如@media 、@import 和@font-face 。

如何實現一個使用非標準字型的網頁設計？

使用@font-face 併為不同的font-weight 定義font-family 。

解釋瀏覽器如何確定哪些元素與 CSS 選擇器匹配。

這部分與上面關於編寫高效的 CSS 有關。瀏覽器從最右邊的選擇器（關鍵選擇器）根據關鍵選擇器，瀏覽器從 DOM 中篩選出元素，然後向上遍歷被選元素的父元素，判斷是否匹配。選擇器匹配語句鏈越短，瀏覽器的匹配速度越快。

例如，對於形如p span 的選擇器，瀏覽器首先找到所有<span> 元素，並遍歷它的父元素直到根元素以找到<p> 元素。對於特定的<span> ，只要找到一個<p> ，就知道'<span>`已經匹配並停止繼續匹配。

參考

• https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left

描述偽元素及其用途。

CSS 偽元素是新增到選擇器的關鍵字，去選擇元素的特定部分。它們可以用於裝飾（:first-line ，:first-letter ）或將元素新增到標記中（與 content:...組合），而不必修改標記（:before ，:after ）。

• :first-line 和:first-letter 可以用來修飾文字。
• 上面提到的.clearfix 方法中，使用clear: both 來新增不佔空間的元素。
• 使用:before 和after 展示提示中的三角箭頭。鼓勵關注點分離，因為三角被視為樣式的一部分，而不是真正的 DOM。如果不使用額外的 HTML 元素，只用 CSS 樣式繪製三角形是不太可能的。

參考

• https://css-tricks.com/almanac/selectors/a/after-and-before/

說說你對盒模型的理解，以及如何告知瀏覽器使用不同的盒模型渲染布局。

CSS 盒模型描述了以文件樹中的元素而生成的矩形框，並根據排版模式進行佈局。每個盒子都有一個內容區域（例如文字，影象等）以及周圍可選的padding 、border 和margin 區域。

CSS 盒模型負責計算：

• 塊級元素佔用多少空間。
• 邊框是否重疊，邊距是否合併。
• 盒子的尺寸。

盒模型有以下規則：

• 塊級元素的大小由width 、height 、padding 、border 和margin 決定。
• 如果沒有指定height ，則塊級元素的高度等於其包含子元素的內容高度加上padding （除非有浮動元素，請參閱下文）。
• 如果沒有指定width ，則非浮動塊級元素的寬度等於其父元素的寬度減去父元素的padding 。
• 元素的height 是由內容的height 來計算的。
• 元素的width 是由內容的width 來計算的。
• 預設情況下，padding 和border 不是元素width 和height 的組成部分。

參考

• https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model

* { box-sizing: border-box; } 會產生怎樣的效果？

• 元素預設應用了box-sizing: content-box ，元素的寬高只會決定內容（content）的大小。
• box-sizing: border-box 改變計算元素width 和height 的方式，border 和padding 的大小也將計算在內。
• 元素的height = 內容（content）的高度 + 垂直方向的padding + 垂直方向border 的寬度
• 元素的width = 內容（content）的寬度 + 水平方向的padding + 水平方向border 的寬度

display 的屬性值都有哪些？

• none ,block ,inline ,inline-block ,table ,table-row ,table-cell ,list-item .

TODO

inline 和inline-block 有什麼區別？

我把block 也加入其中，為了獲得更好的比較。

	block	inline-block	inline
大小	填充其父容器的寬度。	取決於內容。	取決於內容。
定位	從新的一行開始，並且不允許旁邊有 HTML 元素（除非是float ）	與其他內容一起流動，並允許旁邊有其他元素。	與其他內容一起流動，並允許旁邊有其他元素。
能否設定width 和height	能	能	不能。 設定會被忽略。
可以使用vertical-align 對齊	不可以	可以	可以
邊距（margin）和填充（padding）	各個方向都存在	各個方向都存在	只有水平方向存在。垂直方向會被忽略。 儘管border 和padding 在content 周圍，但垂直方向上的空間取決於'line-height'
浮動（float）	-	-	就像一個block 元素，可以設定垂直邊距和填充。

relative 、fixed 、absolute 和static 四種定位有什麼區別？

經過定位的元素，其position 屬性值必然是relative 、absolute 、fixed 或sticky 。

• static ：預設定位屬性值。該關鍵字指定元素使用正常的佈局行為，即元素在文件常規流中當前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
• relative ：該關鍵字下，元素先放置在未新增定位時的位置，再在不改變頁面佈局的前提下調整元素位置（因此會在此元素未新增定位時所在位置留下空白）。
• absolute ：不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設定外邊距（margins），且不會與其他邊距合併。
• fixed ：不為元素預留空間，而是通過指定元素相對於螢幕視口（viewport）的位置來指定元素位置。元素的位置在螢幕滾動時不會改變。列印時，元素會出現在的每頁的固定位置。fixed 屬性會建立新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
• sticky ：盒位置根據正常流計算(這稱為正常流動中的位置)，然後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為table 時），該元素定位均不對後續元素造成影響。當元素 B 被粘性定位時，後續元素的位置仍按照 B 未定位時的位置來確定。position: sticky 對table 元素的效果與position: relative 相同。

參考

• https://developer.mozilla.org/en/docs/Web/CSS/position

你使用過哪些現有的 CSS 框架？你是如何改進它們的？

• Bootstrap ： 更新週期緩慢。Bootstrap 4 已經處於 alpha 版本將近兩年了。添加了在頁面中廣泛使用的微調按鈕元件。
• Semantic UI ：原始碼結構使得自定義主題很難理解。非常規主題系統的使用體驗很差。外部庫的路徑需要硬編碼（hard code）配置。變數重新賦值沒有 Bootstrap 設計得好。
• Bulma ： 需要很多非語義的類和標記，顯得很多餘。不向後相容，以至於升級版本後，會破壞應用的正常執行。

你瞭解 CSS Flexbox 和 Grid 嗎？

瞭解。Flexbox 主要用於一維佈局，而 Grid 則用於二維佈局。

Flexbox 解決了 CSS 中的許多常見問題，例如容器中元素的垂直居中，粘性定位（sticky）的頁尾等。Bootstrap 和 Bulma 基於 Flexbox，這是建立佈局的推薦方式。我之前曾使用過 Flexbox，但在使用flex-grow 時遇到了一些瀏覽器不相容問題（Safari），我必須使用inline-blocks 和手動計算百分比寬度，來重寫我的程式碼，這種體驗不是很好。

Grid 建立基於柵格的佈局，是迄今為止最直觀的方法（最好是！），但目前瀏覽器支援並不廣泛。

參考

• https://philipwalton.github.io/solved-by-flexbox/

請解釋在編寫網站時，響應式與移動優先的區別。

TODO

響應式設計與自適應設計有何不同？

響應式設計和自適應設計都以提高不同裝置間的使用者體驗為目標，根據視窗大小、解析度、使用環境和控制方式等引數進行優化調整。

響應式設計的適應性原則：網站應該憑藉一份程式碼，在各種裝置上都有良好的顯示和使用效果。響應式網站通過使用媒體查詢，自適應柵格和響應式圖片，基於多種因素進行變化，創造出優良的使用者體驗。就像一個球通過膨脹和收縮，來適應不同大小的籃圈。

自適應設計更像是漸進式增強的現代解釋。與響應式設計單一地去適配不同，自適應設計通過檢測裝置和其他特徵，從早已定義好的一系列視窗大小和其他特性中，選出最恰當的功能和佈局。與使用一個球去穿過各種的籃筐不同，自適應設計允許使用多個球，然後根據不同的籃筐大小，去選擇最合適的一個。

參考

• https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
• http://mediumwell.com/responsive-adaptive-mobile/
• https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

你有沒有使用過視網膜解析度的圖形？當中使用什麼技術？

我傾向於使用更高解析度的圖形（顯示尺寸的兩倍）來處理視網膜顯示。更好的方法是使用媒體查詢，像@media only screen and (min-device-pixel-ratio: 2) { ... } ，然後改變background-image 。

對於圖示類的圖形，我會盡可能使用 svg 和圖示字型，因為它們在任何解析度下，都能被渲染得十分清晰。

還有一種方法是，在檢查了window.devicePixelRatio 的值後，利用 JavaScript 將<img> 的src 屬性修改，用更高解析度的版本進行替換。

參考

• https://www.sitepoint.com/css-techniques-for-retina-displays/

什麼情況下，用translate() 而不用絕對定位？什麼時候，情況相反。

translate() 是transform 的一個值。改變transform 或opacity 不會觸發瀏覽器重新佈局（reflow）或重繪（repaint），只會觸發複合（compositions）。而改變絕對定位會觸發重新佈局，進而觸發重繪和複合。transform 使瀏覽器為元素建立一個 GPU 圖層，但改變絕對定位會使用到 CPU。 因此translate() 更高效，可以縮短平滑動畫的繪製時間。

當使用translate() 時，元素仍然佔據其原始空間（有點像position：relative ），這與改變絕對定位不同。

參考

• https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

其他答案

• https://neal.codes/blog/front-end-interview-css-questions
• https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
• http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/

行內元素、塊級元素區別

行內元素：和其他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文字或者其他行內元素；其中img是行元素

塊級元素：總是在新行上開始，高度、行高及外邊距和內邊距都可控制，可以容納內斂元素和其他元素；行元素轉換為塊級元素方式：display：block；

一邊固定寬度一邊寬度自適應

可以使用flex佈局 複製下面的HTML和CSS程式碼 用瀏覽器開啟可以看到效果

<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
</div>

.wrap {
display: flex;
justify-content: space-between;
}
.div1 {
min-width: 200px;
}
.div2 {
width: 100%;
background: #e6e6e6;
}
html,
body,
div {
height: 100%;
margin: 0;
}

水平垂直居中的方式

flex

// 父容器
display: flex;
justify-content: center;
align-items: center;

position

// 父容器
position: relative;

// 子容器
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

position+transform

// 父容器
position: relative;

// 子容器
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

table-cell

<div class="box">
<div class="content">
<div class="inner"></div>
</div>
</div>

html, body {
height: 100%;
width: 100%;
margin: 0;
}
.box {
display: table;
height: 100%;
width: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
background-color: #000;
display: inline-block;
width: 200px;
height: 200px;
}

display:none、visibile:hidden、opacity:0的區別

	是否隱藏	是否在文件中佔用空間	是否會觸發事件
display: none	是	否	否
visibile: hidden	是	是	否
opacity: 0	是	是	是

CSS中link和@import的區別

• link屬於HTML標籤，而@import是CSS提供的
• 頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入
• import只在IE5以上才能識別，而link是HTML標籤，無相容問題
• link方式的樣式的權重 高於@import的權重

如何用css實現瀑布流佈局

利用column-count和break-inside這兩個CSS3屬性即可，複製如下程式碼即可察看效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
.waterfall-container {
/*分幾列*/
column-count: 2;
width: 100%;
/* 列間距 */
column-gap: 10px;
}

.waterfall-item {
break-inside: avoid;
width: 100%;
height: 100px;
margin-bottom: 10px;
background: #ddd;
column-gap: 0;
text-align: center;
color: #fff;
font-size: 40px;
}
</style>
</head>
<body>
<div class="waterfall-container">
<div class="waterfall-item" style="height: 100px">1</div>
<div class="waterfall-item" style="height: 300px">2</div>
<div class="waterfall-item" style="height: 400px">3</div>
<div class="waterfall-item" style="height: 100px">4</div>
<div class="waterfall-item" style="height: 300px">5</div>
<div class="waterfall-item" style="height: 600px">6</div>
<div class="waterfall-item" style="height: 400px">7</div>
<div class="waterfall-item" style="height: 300px">8</div>
<div class="waterfall-item" style="height: 700px">9</div>
<div class="waterfall-item" style="height: 100px">10</div>
</div>
</body>
</html>