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

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

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

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

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

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

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

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

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

CSS3 為我們提供了一種可伸縮的靈活的 web 頁(yè)面布局方式 - 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è)勁攬過(guò)來(lái)學(xué)習(xí)的時(shí)候，別忘了回頭看看那些已經(jīng)掌握的基礎(chǔ)知識(shí)。
我肯定不會(huì)說(shuō)這其實(shí)是為妹紙寫的重要知識(shí)點(diǎn)整理文章...
萬(wà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è)的程序員來(lái)說(shuō)，越來(lái)越重要，下面我們就跟隨著名國(guó)外開(kāi)發(fā)者網(wǎng)站上的熱推文章《Leveling up in CSS》，從提升你的 CSS 技巧開(kāi)始。

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

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

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

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

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

transform 屬性的介紹以及常見(jiàn)用法，如實(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 的問(wèn)題得到的高清適配方案。

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

Flexbox 是一個(gè) CSS3 的盒子模型 (box model)，顧名思義它就是一個(gè)靈活的盒子 ( Flexible Box )，為什麼最近這個(gè)屬性才紅起來(lái)呢？最主要也是因?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來(lái)獲取樣式的方法.作者：Icarus原文鏈接：我們來(lái)翻翻元素樣式的族譜-getComputedStyle getComputedStyle是什么 The …

一年前筆者寫了一篇 《手機(jī)端頁(yè)面自適應(yīng)解決方案—rem 布局》，意外受到很多朋友的關(guān)注和喜歡。但隨著時(shí)間的推移，該方案已然過(guò)時(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)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Blocking Formatting Context 深入理解

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

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

這是一篇翻譯自 css-tricks 上的文章，當(dāng)你 Google css grid 的時(shí)候，第一個(gè)條目便是這篇原文，小伙伴們趕快學(xué)起來(lái)！Grid 作為一個(gè)新的 CSS 的屬性，即將被瀏覽器所支持。它將徹底改變網(wǎng)頁(yè)的布局方式，使響應(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)頁(yè)中的根節(jié)點(diǎn)是 html 元素，所以采用的方式也是通過(guò)設(shè)置 html 元素的 font-size 來(lái)做屏幕適配，但實(shí)際情況真有這么簡(jiǎn)單嗎？

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

全面整理 CSS3 選擇器的用法

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

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

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

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

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

作者：吳成琦
鏈接：https://zhuanlan.zhihu.com/p/...
來(lái)源：知乎
著作權(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)頁(yè)中用 CSS 隱藏元素的七種方法。 原文博客地址：從隱藏元素談起 知乎專欄 && 簡(jiǎn)書專題：前端進(jìn)擊者（知乎）&& 前端進(jìn)擊者（簡(jiǎn)書） 博主博客地址：Damonare 的個(gè)人博客 念念不忘, 必有回響; 有一口氣, 點(diǎn)一盞燈。 正文 說(shuō)起隱藏元素我想每一個(gè)前端 e…

幾種常見(jiàn)的邊框用法。透明邊框的實(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為通過(guò)前，先改成我自己的翻譯...

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

彈性盒模型是 css3 的一種新的布局方式，是一種當(dāng)前頁(yè)面需要適應(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)，目的是用來(lái)優(yōu)化用戶界面設(shè)計(jì)。

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

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