一勞永逸的搞定 flex 佈局
尋根溯源話佈局 一切都始於這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由得感覺眼前一亮，順理成章的聯想到 Word 文件排版中用到的的左對齊、右對齊和居中對齊，然而很快就失望的發現 CSS 中並不存…
響應式圖片
“響應式（Responsive）”這個詞我想大家沒有聽過一千遍，也有一百遍了。響應式是指實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。網上介紹響應式的文章也有很多了，比如：《自適應頁面設計》。在這篇文章中，我們不講頁面佈局的響應式，我們主要來看看“響應式圖片”。 這篇文章主…
[[譯] CSS 繼承深度解析](https://juejin.im/entry/585a2…
CSS 裡經典的層疊和繼承概念到底怎麼該怎麼使用最好，本文深度解析，歡迎大家一起交流！
詳解 CSS 七種三欄佈局技巧
在前端領域中，掌握三欄佈局是一個開發人員必備的技巧，本文將介紹七種三欄佈局的技巧，在實際開發中，你可以選擇適合自己實際需求的方式。
calc 如何工作
CSS3 的 calc() 函式允許我們在屬性值中執行數學操作。
【譯】CSS Flexbox 學習指南、工具與框架
可能是最全的學習 Flexbox 的資源了，希望對大家有所幫助。
平時自己專案中用到的 CSS
css有些屬性容易忘記，半天不寫就要去查api，有時候api還不好使，於是還是記下來以後方便用，後續會慢慢補充進來的。 Github: https://github.com/aototo/blog 部落格長期更新，喜歡的朋友star一下 outline 移除當選中input元素的時…
[[譯] 3 分鐘掌握 CSS Flexbox](https://juejin.im/entry/57ce6…
在本文中，你將學到一些關於 Flexbox 的極其重要的理念。
Flex 佈局應用
CSS3 為我們提供了一種可伸縮的靈活的 web 頁面佈局方式 – flexbox 佈局，它具有很強大的功能，可以很輕鬆實現很多複雜佈局。然而 Flex 屬性較多，不便於記憶，而在專案中，佈局使用頻繁，那麼可以將 flex 抽離為一個佈局工具類，簡化使用方式，快速應用於專案，減少記憶成本。 Fle…
Transition 剖析 by 思維導圖
Transition 剖析你的疑惑
[[譯] Grid 佈局完全指南](https://juejin.im/entry/58a54…
CSS 柵格佈局 (亦稱 “Grid”)，是一個基於柵格的二維佈局系統，旨在徹底改變基於網格使用者介面的設計。
CSS 中的浮動和清除浮動，梳理一下！
前端技術棧更新太快，眼花繚亂，大家一個勁攬過來學習的時候，別忘了回頭看看那些已經掌握的基礎知識。
我肯定不會說這其實是為妹紙寫的重要知識點整理文章…
萬一哪天我就去辦個培訓班呢？
CSS 進階：提高你前端水平的 4 個技巧
隨著 Node.js 、react-native 等技術的不斷出現，和網際網路行業的創業的層出不窮，瞭解些前端知識，成為全棧攻城師，快速的產出原型，展示你的創意，對程式設計師，尤其是在創業的程式設計師來說，越來越重要，下面我們就跟隨著名國外開發者網站上的熱推文章《Leveling up in CSS》，從提升你的 CSS 技巧開始。
你真的覺得你會 CSS3 了嗎？
自 CSS3 流行以來，雖然以前看過一遍所有的新增屬性，但其實在實際專案中用到的少之又少。所以沒有形成系統性的認識，以及看到效果立馬就能想到解決方案的能力。然後最近正好遇到一個需要繪製大量動畫的需求，所以決定趁此機會好好研究一下這個既熟悉又陌生的 css3。
前端 CSS 一些小細節
前端 CSS 一些小細節 ，英文原文：http://www.alistapart.com/art…
Weui 1.0 釋出
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程式量身設計，令使用者的使用感知更加統一。
經過半年的打磨，WeUI 1.0 正式釋出，主要是新增了一些常用元件，並使用 BEM 命名，為接下來的微信小程式開發做好準備。
CSS 基礎知識總結
本文詳細講解了 CSS 中優先順序和 Stacking Context 等高階特性，讓你更深入瞭解 CSS。
Flex 佈局教程：例項篇
習慣了 iOS 開發中的 AutoLayout，在嘗試 React Native 時相對不好理解的就是 flex 的佈局，找來阮一峰老師兩篇教程專門補補課。
CSS3 transform 屬性及應用
transform 屬性的介紹以及常見用法，如實現居中、平行四邊形、菱形、梯形以及折角等效果
把簡單做好也不簡單-css水平垂直居中
44年前我們把人送上月球，但在CSS中我們仍然不能很好實現水平垂直居中。 .md-warp{ width: 400px; height: 300px; max-width: 100%; border: 1px solid #000; } .md-main{ display: b…
CSS 中一個冒號和兩個冒號有什麼區別？
《小分享》~ FED新手必備…
『REM』手機螢幕高清適配方案
學習了『flexible』對 DPR 的處理後，結合前一篇處理 Android 的 FontSize 的問題得到的高清適配方案。
深入解析 css flexbox – oxxo.studio
這篇文章比另一個技術網紅寫得好很多。我看這篇比看骰子那篇就看懂了。
Flexbox 是一個 CSS3 的盒子模型 (box model)，顧名思義它就是一個靈活的盒子 ( Flexible Box )，為什麼最近這個屬性才紅起來呢？最主要也是因為 CSS3 的規範終於普及 ( 或 IE 終於敗亡 )，加上行動裝置的發展促成了響應式佈局興起，自適應長寬彈性相當大的 Flexbox 就趁勢而起了。
CSS 中的垂直居中大法
列出 6 種 css 垂直居中大法 ~
我們來翻翻元素樣式的族譜-getComputedStyle
大家應該非常熟悉jQuery的css()方法,那麼如何在不引用jQuery的情況下同樣實現這個功能呢?本文就介紹使用原生JS來獲取樣式的方法.作者：Icarus原文連結：我們來翻翻元素樣式的族譜-getComputedStyle getComputedStyle是什麼 The …
手機端頁面自適應解決方案—rem 佈局進階版（附原始碼示例）
一年前筆者寫了一篇 《手機端頁面自適應解決方案—rem 佈局》，意外受到很多朋友的關注和喜歡。但隨著時間的推移，該方案已然過時，故為大家介紹一個目前我極力推薦使用的，更加完美的方案——rem 佈局（進階版）轉載自：http://www.jianshu.com/p/985d…
CSS Background 之神奇漸變色
利用 CSS 的 linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() 屬性, 可實現各種意想不到的漸變影像。
獲取元素 CSS 值之 getComputedStyle 方法熟悉
getComputedStyle 詳解
瀑布流式佈局 (Waterfall Layout) 的兩種常用實現方式
花了點時間總結了兩種方式的瀑布流佈局：一種基於 inline-box 和 flex，對瀏覽器相容有一定要求；另一種方式與 Pinterest 採用的方式相同，即 absolute 方式。這兩種方式實現的瀑布流式佈局均支援首屏和網頁視窗大小改變時的列數自適應。
前端面試經典問題：CSS 中居中的幾種方式
面試中經常遇到的面試題之一，居中佈局，特來總結
詳解 CSS 居中佈局技巧
基本上涵蓋了 CSS 垂直居中和水平居中的技巧，並給出不同的適用場景。
[[譯] 理解 CSS 模組化](https://juejin.im/entry/57f63…
把目光投向 CSS，一個重大轉折就是 CSS 前處理器的出現（在工具方面來看），其中， Sass 應該是最為著名的一個。此外，還有 PostCSS，它和 Sass 略有不同，但是殊途同歸——都是用瀏覽器不能解析的語法編寫，並且最終編譯成瀏覽器能夠理解的語法。
現在，又有一位新的成員出現了，它就是 CSS 模組。本文就將介紹 CSS 模組化的諸多優點，以及如何編寫模組化的 CSS。
CSS 查漏補缺
寫了那麼多 CSS 終於明白了 BFC 是啥…
學習 sass 筆記
學習 sass 的思維導圖…
三列布局面試題延伸
很多面試題都有考到三列布局，文章從 css 的發展說起，包括比較新的 CSS Grid, 使用不同時代的知識點去剖析這個問題，希望幫助到大家更好的解決這個問題
CSS3 transform 對普通元素的 N 多渲染影響 « 張鑫旭 – 鑫空間 – 鑫生活
今天遇到個神奇的 bug， 張鑫旭 大神威武
[[譯] 幾張 GIF 動圖讓你看懂彈性盒模型（Flexbox）如何工作](https://juejin.im/entry/589d2…
還在好奇或者疑惑 Flexbox 的工作原理嗎？本文用 GIF 動圖清晰說明整個變化過程，看完保證豁然開朗！
CSS 並不簡單 — 一道微信面試題的實踐
本系列會持續分享本人學習到的 CSS 知識點、技巧和效果展示。如有錯誤，希望您能指出。
CSS Background 屬性詳解
background 屬性的簡寫用法的介紹以及常見背景屬性的理解。
GitBook《擁抱未來的 CSS 佈局方式：flex 與 grid 佈局》全教程
本書（系列文章）為對 CSS 中 flex 佈局與 grid 佈局的詳細介紹，已在 GitHub 同步更新，如您在閱讀過程中發現描述有誤或錯別字的情況，您可以向本專案提出 issus 或 Pull Request。
本系列文章為我在深入研究 CSS 的佈局方式的過程中的一些總結。主要是對於 CSS3 標準裡的 flex 佈局方式 CSS 草案中的 grid 佈局方式進行一些總結。
Flex 佈局教程
2009 年，W3C 提出了一種新的方案 —-Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
你不知道的 CSS 祕密：margin 篇
關於 margin 百分比設定和 Collapsing margins 以及解決方法
響應式圖片實戰
說到響應式網站，我們都知道彈性佈局、彈性圖片、媒體查詢，更多指的是佈局的方式，比如說使用 max-width: 100%，這樣讓圖片的寬度隨著容器的大小而改變，響應式設計讓網站能相容各種螢幕裝置，但是在我們流量這麼昂貴的時代，讓一個小螢幕的手機去載入一張為大螢幕 PC 設計的幾百 K 的圖片，雖然這張圖片會看起來非常的清晰，但是瘋漲的流量消耗肯定會讓使用者非常的苦惱，而且我們也需要載入更長的時間才能把頁面載入出來。
我們開發的目的不是挑戰使用者的耐心和金錢，而是讓使用者在使用的過程中有更好的感受，在這種情況下載入與 使用者裝置相匹配的小圖片，即快速，又不會影響使用者的體驗，幫使用者節省了成本，同樣的，你在 PC 端載入一張小圖片也不會影響使用者的體驗，幫使用者節省了成本，同樣的你在 PC 端載入一張小圖片，雖然速度很快但是放大後模糊的效果會讓使用者覺得網站很 Low 很不專業, 而且 PC 大部分使用的 wifi，我們不需要去接受太多的流量，那麼如何解決剛才說的這些問題呢？響應式圖片的概念也就隨之產生了，響應式圖片，不僅僅是指圖片的排版和佈局，更多的還指可以根據裝置大小而載入不同的圖片，雖然這個過程增加了一點點 UI 設計師的工作量，不過那會大大改善使用者的體驗，那麼想要響應式圖片如何來實現呢？
淺議內滾動佈局
關於 PC 端內滾動佈局的一些乾貨
手機端頁面自適應解決方案—rem 佈局進階版
這是阿里團隊的高清方案佈局程式碼，所謂高清方案就是根據裝置螢幕的 DPR（裝置畫素比，又稱 DPPX，比如 dpr=2 時，表示 1 個 CSS 畫素由 4 個物理畫素點組成） 動態設定 html 的 font-size, 同時根據裝置 DPR 調整頁面的縮放值，進而達到高清效果。
動態載入 css 方法實現和深入解析
詳細解析如何實現動態載入 css 資源，併相容各個版本瀏覽器。該方法經受住線上產品端千萬使用者的檢驗，已確保無誤。
再談自適應垂直居中
作者：滴滴公共前端團隊 – Neurotoxin 新年第一篇，首先祝福大家新年好~ 最近在開發一個 Toast元件時，遇到了一些有趣的問題，首先來看一下需求 需求為寬高不定，上下左右垂直居中，如下圖 程式碼如下： HTML 提交成功</div…
深入瞭解 CSS 字型度量，行高和 vertical-align
作者：大漠 來源：w3cplus line-height 和 vertical-align 在 CSS 中是兩個簡單的屬性。如此簡單，大多數人都相信自己已經完全理解它們是如何工作的以及如何使用它們。但事實上並不如此。他們其實很複雜……
BFC 深入理解
Blocking Formatting Context 深入理解
CSS 五種方式實現 Footer 置底
頁尾置底（Sticky footer）就是讓網頁的 footer 部分始終在瀏覽器視窗的底部。這樣的佈局隨處可見，偶然看到 CSS-TRICKS 上介紹頁尾置底的文章覺得不錯，對開闊佈局的思路挺有幫助，遂譯之。
CSS 命名規範總結 · 簡單心理技術團隊
BEM 命名給 CSS 以及 html 提供清晰結構，名稱空間提供更多資訊，模組化提高程式碼的重用，以達到 CSS 命名語義化、可重用性高、後期維護容易、載入渲染快的要求。
[[譯] Grid 佈局完全指南 | CSS-Tricks](https://juejin.im/entry/589c7…
這是一篇翻譯自 css-tricks 上的文章，當你 Google css grid 的時候，第一個條目便是這篇原文，小夥伴們趕快學起來！Grid 作為一個新的 CSS 的屬性，即將被瀏覽器所支援。它將徹底改變網頁的佈局方式，使響應式設計變得更加簡單。
翻譯計劃 – 淺談 PostCSS
淺談 PostCSS
【譯】CSS 動畫之工具、框架和教程
一篇專注於 CSS 動畫的工具、框架以及學習教程的文章，與你分享。希望能幫你更好的學習 CSS 動畫，節約你搜尋資料的時間。
瞭解真實的『REM』手機螢幕適配
rem 的官方定義『The font size of the root element.』，即以根節點的字型大小作為基準值進行長度計算。一般認為網頁中的根節點是 html 元素，所以採用的方式也是通過設定 html 元素的 font-size 來做螢幕適配，但實際情況真有這麼簡單嗎？
CSS 面試題解答
什麼是 CSS reset？CSS 效能優化？浮動的原理和工作方式，會產生什麼影響呢，要怎麼處理？CSS 權重？
全面整理 CSS3 選擇器的用法
全面整理 CSS3 選擇器的用法
【譯】Flexbox in CSS
偶然看到的一個專案，並瞭解到一些資訊：譯者針對開源的《視覺化 CSS References》 文件：https://github.com/jgthms/css… 正在進行翻譯工作，目前完成了 Flexbox 部分的內容。而剩下的內容還在陸續進行中，供大家學習 CSS 參考。
[[譯] 讓 CSS 更完美：PostCSS – modules](https://juejin.im/entry/5881f…
這篇適合一些使用過預處理 CSS 的開發者，比如 less，sass 或 stylus，如果你都沒用過，那你一定不是個好司機。在 PostCSS 中早就可以使用 CSS Modules 了，該篇作者貢獻了一個新工具，可以讓更多開發者方便的使用最新的 CSS Modules。
網易和淘寶移動 WEB 適配方案再分析
最近把移動 WEB 適配相關的問題梳理了一遍，學習了幾篇文章，其中
從網易與淘寶的 font-size 思考前端設計稿與工作流 – 流雲諸葛 – 部落格園
分析了網易和淘寶對移動 WEB 適配問題的解決方案，乾貨不少，但是一些概念和思路不是很清晰。我在這裡結合一些其他的文章和自己的實驗思考對兩種適配方案再做分析，順便把相關的知識點做個總結。
作者：吳成琦
連結：https://zhuanlan.zhihu.com/p/…
來源：知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
圖片響應式解決方案
眾所周知，retina 屏的裝置畫素比是 2, 而普通螢幕畫素比為 1，對於圖片這種點陣圖畫素已定的資源，如果不加以處理的話，要麼全都用 1 倍圖，在 retina 屏上觀看就會模糊；要麼都是用 2 倍圖，那麼在普通螢幕上瀏覽的時候就會白白浪費流量消耗下載速度，從而針對圖片有了響應式解決方案
CSS 隱藏元素的八種方法
前言 總括： 本文詳細講述了在網頁中用 CSS 隱藏元素的七種方法。 原文部落格地址：從隱藏元素談起 知乎專欄 && 簡書專題：前端進擊者（知乎）&& 前端進擊者（簡書） 博主部落格地址：Damonare 的個人部落格 念念不忘, 必有迴響; 有一口氣, 點一盞燈。 正文 說起隱藏元素我想每一個前端 e…
CSS border 深入理解及應用
幾種常見的邊框用法。透明邊框的實現、多層邊框的幾種實現方法、border-radius 圓角的使用、border-image 邊框背景詳解。
JavaScript 及 jQuery 中的各種寬高屬性圖解
JavaScript 及 jQuery 中的各種寬高屬性圖解, 本文根據慕課網學習視訊整理, 僅供參考!
CSS 技巧：使你的 CSS 更加專業
這是 github 上關於 css 技巧的一篇譯文，另外你也可以在本專案看到原文。列舉了一些很實用的 css 技巧，比如給空內容的 a 標籤新增內容，逗號分隔列表等等。
鑑於很多人吐槽翻譯，在pr為通過前，先改成我自己的翻譯…
【譯】8 張 Gif 圖學會 Flexbox
在本文中，我們將通過圖文並茂的方式為大家介紹 Flexbox ，通過一些 GIF 動畫讓你直觀地瞭解 Flexbox 的工作原理，並使用它來構建靈活的佈局。學習 Flexbox 的小夥伴，不要錯過咯。
CSS3 新佈局方式 – 彈性盒模型
彈性盒模型是 css3 的一種新的佈局方式，是一種當前頁面需要適應不同的螢幕大小及裝置型別時確保擁有恰當的行為的佈局方式。
CSS三欄佈局的四種方法
前言 總括： 不管是三欄佈局還是兩欄佈局都是我們在平時專案裡經常使用的，也許你不知道什麼事三欄佈局什麼是兩欄佈局但實際已經在用，或許你知道三欄佈局的一種或兩種方法，但實際操作中也只會依賴那某一種方法，本文具體的介紹了三欄佈局的四種方法，並介紹了它的使用場景。 原文地址：CSS三…
css 盒模型和定位掃盲
css 的盒模型和定位是 css 中的難點，有很多人對此不理解或者理解的不透徹，那麼，這篇文章將帶你理解什麼是 css 盒模型和定位
CSS：Grid 佈局
SS Grid 佈局，是一個基於網格的二維佈局系統，目的是用來優化使用者介面設計。
注意！注意！重磅訊息，在 2017 年 3 月左右，大部分瀏覽器都會開始預設支援 Grid 佈局，所以，現在完全有必要開始學習 Grid 佈局。
CSS 架構指南
以命令式風格寫 CSS 會很快地導致混亂的 UI 和 CSS。不用說都能體會到開發者心中的怒火熊熊！這還將導致亂七八糟的 UX。
英文原文地址：http://www.zcfy.cc/article/cs…