CSS及佈局

一勞永逸的搞定 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...