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，可是并无细谈。思考许久，仍是以为有必要再总结一下。