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，但是并没有细谈。思考许久，还是觉得有必要再总结一下。