一勞永逸的搞定 flex 佈局
尋根溯源話佈局 一切都始於這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由得感覺眼前一亮，順理成章的聯想到 Word 文件排版中用到的的左對齊、右對齊和居中對齊，然而很快就失望的發現 CSS 中並不存…
css：預設的checkbox、input、radio太醜了？我來教你改變使用純css3改寫的帶動畫的預設樣式
專案的github地址為： https://github.com/sunshine94…，http://cherryblog.site/ ；歡迎大家檢視我的其他部落格最近在做公司後臺的優化專案，拿到設計稿一看，設計師覺得…
詳解前端響應式佈局、響應式圖片，與自制柵格系統
什麼是響應式？同一個頁面在不同螢幕尺寸下有不同的佈局。 傳統的開發方式是PC端開發一套，手機端再開發一套，而使用響應式佈局只要開發一套就好了，缺點是CSS比較重。 柵格系統用於處理頁面多終端適配的問題。柵格的響應式能力，得益於CSS3媒體查詢（Media Queries）的強力…
stylelint 搭配 stylelint-order，更隨心所欲的編碼 CSS
為什麼需要校驗 CSS 規則？
團隊協作在 CSS 書寫遇到的哪些問題？
CSS 哪些東西需要校驗？
怎麼校驗 CSS 規則？
通過 stylelint 校驗 CSS 規則，簡單配置教程。
關於移動端開發1px邊框的一些理解及解決辦法
學習前端方向也有一段時間了，起初做過一些專案，總是發現做完之後自己的邊框會變得比較粗，後面翻閱了部分資料慢慢的才瞭解了這個問題，大致列舉了幾種解決的辦法。
在window物件中有一個devicePixelRatio屬性，他可以反應css中的畫素與裝置的畫素比。然而1px在不同的…
HTML5原生拖拽/拖放 Drag & Drop 詳解
拖放（drap && drop）在我們平時的工作中，經常遇到。它表示：抓取物件以後拖放到另一個位置。目前，它是HTML5標準的一部分。我從幾個方面學習並實踐這個功能。 然後，我們一步步看下這個過程中，會發生的事情。 在HTML5標準中，為了使元素可拖動，把draggable屬性…
谷歌 Material Design 從這些方面打破了我的思維侷限
1
移動 web 前端小結（一）
作者從近期移動 web 專案中對框架和相關知識做的總結。
CSS 查漏補缺
寫了那麼多 CSS 終於明白了 BFC 是啥…
兩個 viewport 的故事（第一部分）
移動 web 關於 viewport 很經典的文，雖然看了好多遍才明白 —
CSS 常見佈局方式
本文思維導圖，歡迎補充 本文首發於我的個人網站：http://cherryblog.site 前言 溫馨提示：本文較長，圖片較多，本來是想寫一篇 CSS 佈局方式的，但是奈何 CSS 佈局方式種類太多並且實現方法太多，所以本文主要是介紹 flex 佈局和 grid 佈局，以及 C…
REM：web app適配的祕密武器
最近看到這樣一個提問：我有一個750 x 1500尺寸的設計稿，設計稿上有一個150 x 50的按鈕，那麼在寫頁面佈局的時候，應該如何確定按鈕的尺寸呢？。大多數同學在回答的時候提到了rem。這讓我對rem這個單位充滿了好奇。好吧，暫時不太熟。 於是問題來了，rem到底是什麼？r…
如何編寫輕量級 CSS 框架
也許 Vue+CSS3 做互動特效更簡單
做專案就難免會開發互動效果或者特效，而我最近開發的專案一直在使用vue，開發技術棧方面，理所當然就使用了vue+css3開發，過程中發現使用vue+css3開發特效，和javascript/jquery+css3的思維方式不一樣，但是比javascript/jquery+css…
Web 字型應用指南最佳實踐修煉之道（上）
詳細！精闢！有料的乾貨。關於 web 字型的方方面面都包含了。
小科普：到底什麼是 BFC、IFC、GFC 和 FFC
FC 的全稱是：Formatting Contexts，是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。
丁香園樣式庫DXY-UI正式開源！
一套適用於桌面端的樣式庫，包含文字、列表、表格、表單、柵格系統等基礎樣式和十餘個元件，相容主流瀏覽器及IE10+。 DXY-UI 專注於樣式，不涉及元件，無“侵入性”，獨立於專案的技術選型。 世界上已經有了太多美麗的輪子，但這不是後人停止造輪子的理由。丁香園的產品線十分龐雜，在…
Flexbox佈局的正確使用姿勢
在專案中，我們還會大量使用到flexbox的新舊屬性，但大多數人一般只會寫新屬性，舊屬性交由autoprefixer處理，但其實完成同樣功能的新舊屬性表現形式卻不盡相同。還有部分人只使用“萬能”的flex:number屬性為伸縮專案分配空間，但有些特殊情景卻無法滿足，此文為此梳理了flexbox的新舊屬性區別和分配空間的原理，為大家用flexbox佈局的專案通通渠。
Android/iOS/Web開發中的動效設計與實現 —— 貝塞爾曲線動畫的插值法
很多動效還是需要設計師製作效果視訊，交給研發寶寶手動去做，本文主要簡單講一下貝塞爾曲線在動效設計與實現中的作用。
逐行閱讀 Bootstrap 原始碼
Bootstrap 作為最受歡迎的前端 CSS 框架，它到底寫了什麼 tricky 程式碼，使得開發者的效率能夠大幅提升呢？基於自己的個人開發經驗，一起來看個究竟！揭祕 Bootstrap 和 CSS 中不被注意的部分。
精簡高效的CSS命名準則/方法
這篇文章釋出於 2010年09月12日，星期日，01:11，歸類於 css相關。 閱讀 159027 次, 今日 70 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.…
兩個 viewport 的故事（第二部分）
移動 web 關於 viewport 很經典的文，此為第二部分 —
border屬性的多方位應用和實現自適應三角形
border屬性是在實際的應用中使用頻率比較高的一個屬性，除了作為邊框使用，利用border屬性的一些特徵以及表現方式，可以在實現一些比較常見的效果（如等高佈局，上下固定內容滾動佈局和繪製CSS圖示等），利用css3新增的屬性值（如使用圖片填充邊框）可以實現一些更復雜的效果。 …
pageResponse – 讓 H5 適配移動裝置全家(移動端適配)
自適應的解決方案
一套完美的 Bootstrap 打造的設計工作室網站 HTML 模版下載
某小美工：最近在蒐集極簡風格素材，咳咳，重新做簡歷。
很不錯的模板，希望能獲取到一些靈感~
transformjs 汙染了 DOM? 是你不瞭解它的強大 | 掘金技術徵文
原文連結: https://github.com/AlloyTeam/… 寫在前面 上星期在React微信群裡，有小夥伴覺得transformjs直接給DOM新增屬性太激進，不可取（由於不在那個微信群，不明白…
編寫模組化的 CSS（第三部分）—CSS 檔案組織結構 – 眾成翻譯
在之前兩篇文章中我們已經討論過如何使用 BEM 和 Namespace 來編寫模組化的 CSS。這篇文章中，我想避開把 CSS 選擇器作為 CSS 檔案結構和組織的依據的方法。
如果你思考過關於什麼是檔案組織的最佳實踐，或者怎樣能夠在專案目錄中更容易的找到你要找的 CSS 檔案，或者一個檔案應該是多大或者多小合理等問題，那麼這篇文章就是為你寫的。
Wing：Web 設計師想要的極簡 CSS 框架
Wing 是一個新的框架，也是極簡主義愛好者的好朋友。它提供了預設格柵佈局、自定義元素以及各種元件，而且它的體積只有 5KB。
編寫模組化的 CSS（第二部分）—名稱空間
上週，我分享瞭如何使用 BEM 建立一個合理的 CSS 架構。 雖然 BEM 很棒，但它只是解決方案的一部分。 還有另一部分我還沒有提到 – 名稱空間。
在今天的這篇文章中，我想與大家分享一下為什麼只用 BEM 還是不夠的，以及如何使用名稱空間來彌補一些不足。
by Zell Liew – 眾成翻譯
CSS原理解析之模型篇
盒模型是我們每天都在接觸的，但盒子模型到底如何計算排列的，總是一知半解。本文嘗試從W3C規範和例項入手，解決上述問題。 每個盒子會變成他後代盒子的包含塊，後代盒子的大小和位置會根據他包含塊的矩形邊框進行計算。但是不會受到包含塊的限制，可能會溢位。 1. 最基本的例子 2. 當e…
詳談層合成（composite）
前不久寫了一篇關於如何使用 Chrome DevTools 優化高德地圖動畫的文章，其中提到了 composite，但是並沒有細談。思考許久，還是覺得有必要再總結一下。