css進階

一勞永逸的搞定 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，可是並無細談。思考許久，仍是以爲有必要再總結一下。