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

尋根溯源話布局 一切都始于這樣一個(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 中并不存…

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

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

為什么需要校驗(yàn) CSS 規(guī)則？
團(tuán)隊(duì)協(xié)作在 CSS 書寫遇到的哪些問(wèn)題？
CSS 哪些東西需要校驗(yàn)？
怎么校驗(yàn) CSS 規(guī)則？
通過(guò) stylelint 校驗(yàn) CSS 規(guī)則，簡(jiǎn)單配置教程。

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

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

1

作者從近期移動(dòng) web 項(xiàng)目中對(duì)框架和相關(guān)知識(shí)做的總結(jié)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原文鏈接: https://github.com/AlloyTeam/... 寫在前面 上星期在React微信群里，有小伙伴覺(jué)得transformjs直接給DOM添加屬性太激進(jìn)，不可?。ㄓ捎诓辉谀莻€(gè)微信群，不明白…

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

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

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

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

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

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

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