摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。

尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不由得感覺眼前一亮，順理成章的聯(lián)想到 Word 文檔排版中用到的的左對(duì)齊、右對(duì)齊和居中對(duì)齊，然而很快就失望的發(fā)現(xiàn) CSS 中并不存…

“響應(yīng)式（Responsive）”這個(gè)詞我想大家沒有聽過一千遍，也有一百遍了。響應(yīng)式是指實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。網(wǎng)上介紹響應(yīng)式的文章也有很多了，比如：《自適應(yīng)頁面設(shè)計(jì)》。在這篇文章中，我們不講頁面布局的響應(yīng)式，我們主要來看看“響應(yīng)式圖片”。 這篇文章主…

CSS 里經(jīng)典的層疊和繼承概念到底怎么該怎么使用最好，本文深度解析，歡迎大家一起交流！

在前端領(lǐng)域中，掌握三欄布局是一個(gè)開發(fā)人員必備的技巧，本文將介紹七種三欄布局的技巧，在實(shí)際開發(fā)中，你可以選擇適合自己實(shí)際需求的方式。

CSS3 的 calc() 函數(shù)允許我們?cè)趯傩灾抵袌?zhí)行數(shù)學(xué)操作。

可能是最全的學(xué)習(xí) Flexbox 的資源了，希望對(duì)大家有所幫助。

css有些屬性容易忘記，半天不寫就要去查api，有時(shí)候api還不好使，于是還是記下來以后方便用，后續(xù)會(huì)慢慢補(bǔ)充進(jìn)來的。 Github: https://github.com/aototo/blog 博客長(zhǎng)期更新，喜歡的朋友star一下 outline 移除當(dāng)選中input元素的時(shí)…

在本文中，你將學(xué)到一些關(guān)于 Flexbox 的極其重要的理念。

CSS3 為我們提供了一種可伸縮的靈活的 web 頁面布局方式 - flexbox 布局，它具有很強(qiáng)大的功能，可以很輕松實(shí)現(xiàn)很多復(fù)雜布局。然而 Flex 屬性較多，不便于記憶，而在項(xiàng)目中，布局使用頻繁，那么可以將 flex 抽離為一個(gè)布局工具類，簡(jiǎn)化使用方式，快速應(yīng)用于項(xiàng)目，減少記憶成本。 Fle…

Transition 剖析你的疑惑

CSS 柵格布局 (亦稱 "Grid")，是一個(gè)基于柵格的二維布局系統(tǒng)，旨在徹底改變基于網(wǎng)格用戶界面的設(shè)計(jì)。

前端技術(shù)棧更新太快，眼花繚亂，大家一個(gè)勁攬過來學(xué)習(xí)的時(shí)候，別忘了回頭看看那些已經(jīng)掌握的基礎(chǔ)知識(shí)。
我肯定不會(huì)說這其實(shí)是為妹紙寫的重要知識(shí)點(diǎn)整理文章...
萬一哪天我就去辦個(gè)培訓(xùn)班呢？

隨著 Node.js 、react-native 等技術(shù)的不斷出現(xiàn)，和互聯(lián)網(wǎng)行業(yè)的創(chuàng)業(yè)的層出不窮，了解些前端知識(shí)，成為全棧攻城師，快速的產(chǎn)出原型，展示你的創(chuàng)意，對(duì)程序員，尤其是在創(chuàng)業(yè)的程序員來說，越來越重要，下面我們就跟隨著名國(guó)外開發(fā)者網(wǎng)站上的熱推文章《Leveling up in CSS》，從提升你的 CSS 技巧開始。

自 CSS3 流行以來，雖然以前看過一遍所有的新增屬性，但其實(shí)在實(shí)際項(xiàng)目中用到的少之又少。所以沒有形成系統(tǒng)性的認(rèn)識(shí)，以及看到效果立馬就能想到解決方案的能力。然后最近正好遇到一個(gè)需要繪制大量動(dòng)畫的需求，所以決定趁此機(jī)會(huì)好好研究一下這個(gè)既熟悉又陌生的 css3。

前端 CSS 一些小細(xì)節(jié) ，英文原文：http://www.alistapart.com/art...

WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。
經(jīng)過半年的打磨，WeUI 1.0 正式發(fā)布，主要是新增了一些常用組件，并使用 BEM 命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。

本文詳細(xì)講解了 CSS 中優(yōu)先級(jí)和 Stacking Context 等高級(jí)特性，讓你更深入了解 CSS。

習(xí)慣了 iOS 開發(fā)中的 AutoLayout，在嘗試 React Native 時(shí)相對(duì)不好理解的就是 flex 的布局，找來阮一峰老師兩篇教程專門補(bǔ)補(bǔ)課。

transform 屬性的介紹以及常見用法，如實(shí)現(xiàn)居中、平行四邊形、菱形、梯形以及折角等效果

44年前我們把人送上月球，但在CSS中我們?nèi)匀徊荒芎芎脤?shí)現(xiàn)水平垂直居中。 .md-warp{ width: 400px; height: 300px; max-width: 100%; border: 1px solid #000; } .md-main{ display: b…

《小分享》~ FED新手必備…

學(xué)習(xí)了『flexible』對(duì) DPR 的處理后，結(jié)合前一篇處理 Android 的 FontSize 的問題得到的高清適配方案。

這篇文章比另一個(gè)技術(shù)網(wǎng)紅寫得好很多。我看這篇比看骰子那篇就看懂了。

Flexbox 是一個(gè) CSS3 的盒子模型 (box model)，顧名思義它就是一個(gè)靈活的盒子 ( Flexible Box )，為什麼最近這個(gè)屬性才紅起來呢？最主要也是因?yàn)?CSS3 的規(guī)範(fàn)終於普及 ( 或 IE 終於敗亡 )，加上行動(dòng)裝置的發(fā)展促成了響應(yīng)式布局興起，自適應(yīng)長(zhǎng)寬彈性相當(dāng)大的 Flexbox 就趁勢(shì)而起了。

列出 6 種 css 垂直居中大法 ~

大家應(yīng)該非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情況下同樣實(shí)現(xiàn)這個(gè)功能呢?本文就介紹使用原生JS來獲取樣式的方法.作者：Icarus原文鏈接：我們來翻翻元素樣式的族譜-getComputedStyle getComputedStyle是什么 The …

一年前筆者寫了一篇 《手機(jī)端頁面自適應(yīng)解決方案—rem 布局》，意外受到很多朋友的關(guān)注和喜歡。但隨著時(shí)間的推移，該方案已然過時(shí)，故為大家介紹一個(gè)目前我極力推薦使用的，更加完美的方案——rem 布局（進(jìn)階版）轉(zhuǎn)載自：http://www.jianshu.com/p/985d...

利用 CSS 的 linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() 屬性, 可實(shí)現(xiàn)各種意想不到的漸變圖像。

getComputedStyle 詳解

花了點(diǎn)時(shí)間總結(jié)了兩種方式的瀑布流布局：一種基于 inline-box 和 flex，對(duì)瀏覽器兼容有一定要求；另一種方式與 Pinterest 采用的方式相同，即 absolute 方式。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時(shí)的列數(shù)自適應(yīng)。

面試中經(jīng)常遇到的面試題之一，居中布局，特來總結(jié)

基本上涵蓋了 CSS 垂直居中和水平居中的技巧，并給出不同的適用場(chǎng)景。

把目光投向 CSS，一個(gè)重大轉(zhuǎn)折就是 CSS 預(yù)處理器的出現(xiàn)（在工具方面來看），其中， Sass 應(yīng)該是最為著名的一個(gè)。此外，還有 PostCSS，它和 Sass 略有不同，但是殊途同歸——都是用瀏覽器不能解析的語法編寫，并且最終編譯成瀏覽器能夠理解的語法。

現(xiàn)在，又有一位新的成員出現(xiàn)了，它就是 CSS 模塊。本文就將介紹 CSS 模塊化的諸多優(yōu)點(diǎn)，以及如何編寫模塊化的 CSS。

寫了那么多 CSS 終于明白了 BFC 是啥…

學(xué)習(xí) sass 的思維導(dǎo)圖...

很多面試題都有考到三列布局，文章從 css 的發(fā)展說起，包括比較新的 CSS Grid, 使用不同時(shí)代的知識(shí)點(diǎn)去剖析這個(gè)問題，希望幫助到大家更好的解決這個(gè)問題

今天遇到個(gè)神奇的 bug， 張?chǎng)涡?大神威武

還在好奇或者疑惑 Flexbox 的工作原理嗎？本文用 GIF 動(dòng)圖清晰說明整個(gè)變化過程，看完保證豁然開朗！

本系列會(huì)持續(xù)分享本人學(xué)習(xí)到的 CSS 知識(shí)點(diǎn)、技巧和效果展示。如有錯(cuò)誤，希望您能指出。

background 屬性的簡(jiǎn)寫用法的介紹以及常見背景屬性的理解。

本書（系列文章）為對(duì) CSS 中 flex 布局與 grid 布局的詳細(xì)介紹，已在 GitHub 同步更新，如您在閱讀過程中發(fā)現(xiàn)描述有誤或錯(cuò)別字的情況，您可以向本項(xiàng)目提出 issus 或 Pull Request。

本系列文章為我在深入研究 CSS 的布局方式的過程中的一些總結(jié)。主要是對(duì)于 CSS3 標(biāo)準(zhǔn)里的 flex 布局方式 CSS 草案中的 grid 布局方式進(jìn)行一些總結(jié)。

2009 年，W3C 提出了一種新的方案 ----Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。

關(guān)于 margin 百分比設(shè)置和 Collapsing margins 以及解決方法

說到響應(yīng)式網(wǎng)站，我們都知道彈性布局、彈性圖片、媒體查詢，更多指的是布局的方式，比如說使用 max-width: 100%，這樣讓圖片的寬度隨著容器的大小而改變，響應(yīng)式設(shè)計(jì)讓網(wǎng)站能兼容各種屏幕設(shè)備，但是在我們流量這么昂貴的時(shí)代，讓一個(gè)小屏幕的手機(jī)去加載一張為大屏幕 PC 設(shè)計(jì)的幾百 K 的圖片，雖然這張圖片會(huì)看起來非常的清晰，但是瘋漲的流量消耗肯定會(huì)讓用戶非常的苦惱，而且我們也需要加載更長(zhǎng)的時(shí)間才能把頁面加載出來。

我們開發(fā)的目的不是挑戰(zhàn)用戶的耐心和金錢，而是讓用戶在使用的過程中有更好的感受，在這種情況下加載與 用戶設(shè)備相匹配的小圖片，即快速，又不會(huì)影響用戶的體驗(yàn)，幫用戶節(jié)省了成本，同樣的，你在 PC 端加載一張小圖片也不會(huì)影響用戶的體驗(yàn)，幫用戶節(jié)省了成本，同樣的你在 PC 端加載一張小圖片，雖然速度很快但是放大后模糊的效果會(huì)讓用戶覺得網(wǎng)站很 Low 很不專業(yè), 而且 PC 大部分使用的 wifi，我們不需要去接受太多的流量，那么如何解決剛才說的這些問題呢？響應(yīng)式圖片的概念也就隨之產(chǎn)生了，響應(yīng)式圖片，不僅僅是指圖片的排版和布局，更多的還指可以根據(jù)設(shè)備大小而加載不同的圖片，雖然這個(gè)過程增加了一點(diǎn)點(diǎn) UI 設(shè)計(jì)師的工作量，不過那會(huì)大大改善用戶的體驗(yàn)，那么想要響應(yīng)式圖片如何來實(shí)現(xiàn)呢？

關(guān)于 PC 端內(nèi)滾動(dòng)布局的一些干貨

這是阿里團(tuán)隊(duì)的高清方案布局代碼，所謂高清方案就是根據(jù)設(shè)備屏幕的 DPR（設(shè)備像素比，又稱 DPPX，比如 dpr=2 時(shí)，表示 1 個(gè) CSS 像素由 4 個(gè)物理像素點(diǎn)組成） 動(dòng)態(tài)設(shè)置 html 的 font-size, 同時(shí)根據(jù)設(shè)備 DPR 調(diào)整頁面的縮放值，進(jìn)而達(dá)到高清效果。

詳細(xì)解析如何實(shí)現(xiàn)動(dòng)態(tài)加載 css 資源，并兼容各個(gè)版本瀏覽器。該方法經(jīng)受住線上產(chǎn)品端千萬用戶的檢驗(yàn)，已確保無誤。

作者：滴滴公共前端團(tuán)隊(duì) - Neurotoxin 新年第一篇，首先祝福大家新年好~ 最近在開發(fā)一個(gè) Toast組件時(shí)，遇到了一些有趣的問題，首先來看一下需求 需求為寬高不定，上下左右垂直居中，如下圖 代碼如下： HTML 提交成功

作者：大漠 來源：w3cplus line-height 和 vertical-align 在 CSS 中是兩個(gè)簡(jiǎn)單的屬性。如此簡(jiǎn)單，大多數(shù)人都相信自己已經(jīng)完全理解它們是如何工作的以及如何使用它們。但事實(shí)上并不如此。他們其實(shí)很復(fù)雜……

Blocking Formatting Context 深入理解

頁腳置底（Sticky footer）就是讓網(wǎng)頁的 footer 部分始終在瀏覽器窗口的底部。這樣的布局隨處可見，偶然看到 CSS-TRICKS 上介紹頁腳置底的文章覺得不錯(cuò)，對(duì)開闊布局的思路挺有幫助，遂譯之。

BEM 命名給 CSS 以及 html 提供清晰結(jié)構(gòu)，命名空間提供更多信息，模塊化提高代碼的重用，以達(dá)到 CSS 命名語義化、可重用性高、后期維護(hù)容易、加載渲染快的要求。

這是一篇翻譯自 css-tricks 上的文章，當(dāng)你 Google css grid 的時(shí)候，第一個(gè)條目便是這篇原文，小伙伴們趕快學(xué)起來！Grid 作為一個(gè)新的 CSS 的屬性，即將被瀏覽器所支持。它將徹底改變網(wǎng)頁的布局方式，使響應(yīng)式設(shè)計(jì)變得更加簡(jiǎn)單。

淺談 PostCSS

一篇專注于 CSS 動(dòng)畫的工具、框架以及學(xué)習(xí)教程的文章，與你分享。希望能幫你更好的學(xué)習(xí) CSS 動(dòng)畫，節(jié)約你搜索資料的時(shí)間。

rem 的官方定義『The font size of the root element.』，即以根節(jié)點(diǎn)的字體大小作為基準(zhǔn)值進(jìn)行長(zhǎng)度計(jì)算。一般認(rèn)為網(wǎng)頁中的根節(jié)點(diǎn)是 html 元素，所以采用的方式也是通過設(shè)置 html 元素的 font-size 來做屏幕適配，但實(shí)際情況真有這么簡(jiǎn)單嗎？

什么是 CSS reset？CSS 性能優(yōu)化？浮動(dòng)的原理和工作方式，會(huì)產(chǎn)生什么影響呢，要怎么處理？CSS 權(quán)重？

全面整理 CSS3 選擇器的用法

偶然看到的一個(gè)項(xiàng)目，并了解到一些信息：譯者針對(duì)開源的《可視化 CSS References》 文檔：https://github.com/jgthms/css... 正在進(jìn)行翻譯工作，目前完成了 Flexbox 部分的內(nèi)容。而剩下的內(nèi)容還在陸續(xù)進(jìn)行中，供大家學(xué)習(xí) CSS 參考。

這篇適合一些使用過預(yù)處理 CSS 的開發(fā)者，比如 less，sass 或 stylus，如果你都沒用過，那你一定不是個(gè)好司機(jī)。在 PostCSS 中早就可以使用 CSS Modules 了，該篇作者貢獻(xiàn)了一個(gè)新工具，可以讓更多開發(fā)者方便的使用最新的 CSS Modules。

最近把移動(dòng) WEB 適配相關(guān)的問題梳理了一遍，學(xué)習(xí)了幾篇文章，其中

從網(wǎng)易與淘寶的 font-size 思考前端設(shè)計(jì)稿與工作流 - 流云諸葛 - 博客園

分析了網(wǎng)易和淘寶對(duì)移動(dòng) WEB 適配問題的解決方案，干貨不少，但是一些概念和思路不是很清晰。我在這里結(jié)合一些其他的文章和自己的實(shí)驗(yàn)思考對(duì)兩種適配方案再做分析，順便把相關(guān)的知識(shí)點(diǎn)做個(gè)總結(jié)。

作者：吳成琦
鏈接：https://zhuanlan.zhihu.com/p/...
來源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

眾所周知，retina 屏的設(shè)備像素比是 2, 而普通屏幕像素比為 1，對(duì)于圖片這種位圖像素已定的資源，如果不加以處理的話，要么全都用 1 倍圖，在 retina 屏上觀看就會(huì)模糊；要么都是用 2 倍圖，那么在普通屏幕上瀏覽的時(shí)候就會(huì)白白浪費(fèi)流量消耗下載速度，從而針對(duì)圖片有了響應(yīng)式解決方案

前言 總括： 本文詳細(xì)講述了在網(wǎng)頁中用 CSS 隱藏元素的七種方法。 原文博客地址：從隱藏元素談起 知乎專欄 && 簡(jiǎn)書專題：前端進(jìn)擊者（知乎）&& 前端進(jìn)擊者（簡(jiǎn)書） 博主博客地址：Damonare 的個(gè)人博客 念念不忘, 必有回響; 有一口氣, 點(diǎn)一盞燈。 正文 說起隱藏元素我想每一個(gè)前端 e…

幾種常見的邊框用法。透明邊框的實(shí)現(xiàn)、多層邊框的幾種實(shí)現(xiàn)方法、border-radius 圓角的使用、border-image 邊框背景詳解。

JavaScript 及 jQuery 中的各種寬高屬性圖解, 本文根據(jù)慕課網(wǎng)學(xué)習(xí)視頻整理, 僅供參考!

這是 github 上關(guān)于 css 技巧的一篇譯文，另外你也可以在本項(xiàng)目看到原文。列舉了一些很實(shí)用的 css 技巧，比如給空內(nèi)容的 a 標(biāo)簽添加內(nèi)容，逗號(hào)分隔列表等等。
鑒于很多人吐槽翻譯，在pr為通過前，先改成我自己的翻譯...

在本文中，我們將通過圖文并茂的方式為大家介紹 Flexbox ，通過一些 GIF 動(dòng)畫讓你直觀地了解 Flexbox 的工作原理，并使用它來構(gòu)建靈活的布局。學(xué)習(xí) Flexbox 的小伙伴，不要錯(cuò)過咯。

彈性盒模型是 css3 的一種新的布局方式，是一種當(dāng)前頁面需要適應(yīng)不同的屏幕大小及設(shè)備類型時(shí)確保擁有恰當(dāng)?shù)男袨榈牟季址绞健?br>

前言 總括： 不管是三欄布局還是兩欄布局都是我們?cè)谄綍r(shí)項(xiàng)目里經(jīng)常使用的，也許你不知道什么事三欄布局什么是兩欄布局但實(shí)際已經(jīng)在用，或許你知道三欄布局的一種或兩種方法，但實(shí)際操作中也只會(huì)依賴那某一種方法，本文具體的介紹了三欄布局的四種方法，并介紹了它的使用場(chǎng)景。 原文地址：CSS三…

css 的盒模型和定位是 css 中的難點(diǎn)，有很多人對(duì)此不理解或者理解的不透徹，那么，這篇文章將帶你理解什么是 css 盒模型和定位

SS Grid 布局，是一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計(jì)。

注意！注意！重磅消息，在 2017 年 3 月左右，大部分瀏覽器都會(huì)開始默認(rèn)支持 Grid 布局，所以，現(xiàn)在完全有必要開始學(xué)習(xí) Grid 布局。

以命令式風(fēng)格寫 CSS 會(huì)很快地導(dǎo)致混亂的 UI 和 CSS。不用說都能體會(huì)到開發(fā)者心中的怒火熊熊！這還將導(dǎo)致亂七八糟的 UX。
英文原文地址：http://www.zcfy.cc/article/cs...