摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標準的一部分。精簡高效的命名準則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。

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

項目的github地址為： https://github.com/sunshine94...，http://cherryblog.site/ ；歡迎大家查看我的其他博客最近在做公司后臺的優(yōu)化項目，拿到設(shè)計稿一看，設(shè)計師覺得…

什么是響應(yīng)式？同一個頁面在不同屏幕尺寸下有不同的布局。 傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機端再開發(fā)一套，而使用響應(yīng)式布局只要開發(fā)一套就好了，缺點是CSS比較重。 柵格系統(tǒng)用于處理頁面多終端適配的問題。柵格的響應(yīng)式能力，得益于CSS3媒體查詢（Media Queries）的強力…

為什么需要校驗 CSS 規(guī)則？
團隊協(xié)作在 CSS 書寫遇到的哪些問題？
CSS 哪些東西需要校驗？
怎么校驗 CSS 規(guī)則？
通過 stylelint 校驗 CSS 規(guī)則，簡單配置教程。

學(xué)習(xí)前端方向也有一段時間了，起初做過一些項目，總是發(fā)現(xiàn)做完之后自己的邊框會變得比較粗，后面翻閱了部分資料慢慢的才了解了這個問題，大致列舉了幾種解決的辦法。
在window對象中有一個devicePixelRatio屬性，他可以反應(yīng)css中的像素與設(shè)備的像素比。然而1px在不同的…

拖放（drap && drop）在我們平時的工作中，經(jīng)常遇到。它表示：抓取對象以后拖放到另一個位置。目前，它是HTML5標準的一部分。我從幾個方面學(xué)習(xí)并實踐這個功能。 然后，我們一步步看下這個過程中，會發(fā)生的事情。 在HTML5標準中，為了使元素可拖動，把draggable屬性…

1

作者從近期移動 web 項目中對框架和相關(guān)知識做的總結(jié)。

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

移動 web 關(guān)于 viewport 很經(jīng)典的文，雖然看了好多遍才明白 --

本文思維導(dǎo)圖，歡迎補充 本文首發(fā)于我的個人網(wǎng)站：http://cherryblog.site 前言 溫馨提示：本文較長，圖片較多，本來是想寫一篇 CSS 布局方式的，但是奈何 CSS 布局方式種類太多并且實現(xiàn)方法太多，所以本文主要是介紹 flex 布局和 grid 布局，以及 C…

最近看到這樣一個提問：我有一個750 x 1500尺寸的設(shè)計稿，設(shè)計稿上有一個150 x 50的按鈕，那么在寫頁面布局的時候，應(yīng)該如何確定按鈕的尺寸呢？。大多數(shù)同學(xué)在回答的時候提到了rem。這讓我對rem這個單位充滿了好奇。好吧，暫時不太熟。 于是問題來了，rem到底是什么？r…

做項目就難免會開發(fā)交互效果或者特效，而我最近開發(fā)的項目一直在使用vue，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了vue+css3開發(fā)，過程中發(fā)現(xiàn)使用vue+css3開發(fā)特效，和javascript/jquery+css3的思維方式不一樣，但是比javascript/jquery+css…

詳細！精辟！有料的干貨。關(guān)于 web 字體的方方面面都包含了。

FC 的全稱是：Formatting Contexts，是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。

一套適用于桌面端的樣式庫，包含文本、列表、表格、表單、柵格系統(tǒng)等基礎(chǔ)樣式和十余個組件，兼容主流瀏覽器及IE10+。 DXY-UI 專注于樣式，不涉及組件，無“侵入性”，獨立于項目的技術(shù)選型。 世界上已經(jīng)有了太多美麗的輪子，但這不是后人停止造輪子的理由。丁香園的產(chǎn)品線十分龐雜，在…

在項目中，我們還會大量使用到flexbox的新舊屬性，但大多數(shù)人一般只會寫新屬性，舊屬性交由autoprefixer處理，但其實完成同樣功能的新舊屬性表現(xiàn)形式卻不盡相同。還有部分人只使用“萬能”的flex:number屬性為伸縮項目分配空間，但有些特殊情景卻無法滿足，此文為此梳理了flexbox的新舊屬性區(qū)別和分配空間的原理，為大家用flexbox布局的項目通通渠。

很多動效還是需要設(shè)計師制作效果視頻，交給研發(fā)寶寶手動去做，本文主要簡單講一下貝塞爾曲線在動效設(shè)計與實現(xiàn)中的作用。

Bootstrap 作為最受歡迎的前端 CSS 框架，它到底寫了什么 tricky 代碼，使得開發(fā)者的效率能夠大幅提升呢？基于自己的個人開發(fā)經(jīng)驗，一起來看個究竟！揭秘 Bootstrap 和 CSS 中不被注意的部分。

這篇文章發(fā)布于 2010年09月12日，星期日，01:11，歸類于 css相關(guān)。 閱讀 159027 次, 今日 70 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.…

移動 web 關(guān)于 viewport 很經(jīng)典的文，此為第二部分 --

border屬性是在實際的應(yīng)用中使用頻率比較高的一個屬性，除了作為邊框使用，利用border屬性的一些特征以及表現(xiàn)方式，可以在實現(xiàn)一些比較常見的效果（如等高布局，上下固定內(nèi)容滾動布局和繪制CSS圖標等），利用css3新增的屬性值（如使用圖片填充邊框）可以實現(xiàn)一些更復(fù)雜的效果。 …

自適應(yīng)的解決方案

某小美工：最近在搜集極簡風(fēng)格素材，咳咳，重新做簡歷。
很不錯的模板，希望能獲取到一些靈感~

原文鏈接: https://github.com/AlloyTeam/... 寫在前面 上星期在React微信群里，有小伙伴覺得transformjs直接給DOM添加屬性太激進，不可取（由于不在那個微信群，不明白…

在之前兩篇文章中我們已經(jīng)討論過如何使用 BEM 和 Namespace 來編寫模塊化的 CSS。這篇文章中，我想避開把 CSS 選擇器作為 CSS 文件結(jié)構(gòu)和組織的依據(jù)的方法。

如果你思考過關(guān)于什么是文件組織的最佳實踐，或者怎樣能夠在項目目錄中更容易的找到你要找的 CSS 文件，或者一個文件應(yīng)該是多大或者多小合理等問題，那么這篇文章就是為你寫的。

Wing 是一個新的框架，也是極簡主義愛好者的好朋友。它提供了默認格柵布局、自定義元素以及各種組件，而且它的體積只有 5KB。

上周，我分享了如何使用 BEM 創(chuàng)建一個合理的 CSS 架構(gòu)。 雖然 BEM 很棒，但它只是解決方案的一部分。 還有另一部分我還沒有提到 - 命名空間。

在今天的這篇文章中，我想與大家分享一下為什么只用 BEM 還是不夠的，以及如何使用命名空間來彌補一些不足。
by Zell Liew - 眾成翻譯

盒模型是我們每天都在接觸的，但盒子模型到底如何計算排列的，總是一知半解。本文嘗試從W3C規(guī)范和實例入手，解決上述問題。 每個盒子會變成他后代盒子的包含塊，后代盒子的大小和位置會根據(jù)他包含塊的矩形邊框進行計算。但是不會受到包含塊的限制，可能會溢出。 1. 最基本的例子 2. 當(dāng)e…

前不久寫了一篇關(guān)于如何使用 Chrome DevTools 優(yōu)化高德地圖動畫的文章，其中提到了 composite，但是并沒有細談。思考許久，還是覺得有必要再總結(jié)一下。