还是先来点前戏，哦不，前言吧，主要想说一下为什么我会想把这些东西拿出来做一个区分，这还要从二十多年前的夏天说起······扯远了扯远了，主要还是前不久经历了一次面试。哪里的面试我就不说了，他们的面试还是很有含量的，其中就问到了这些东西。怎么说呢，这要是平时敲代码这些东西我这种马…

写在前面 好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！关于BFC，很多人可能都听说过BFC这个东西，大概知道这是个啥东西，相信很多人对此并没有一个非常细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都能够比较深入的理解BFC这个概念的规则、作用以及用…

在Web中很多场景中都会使用到Icon，那么就会面临Icon和文本对齐的处理。而这个对齐效果的处理又不是一件轻易的事情，特别是面又众多不同移动终端的情形之下。那么今天这篇文章就来和大家一起探讨一下这方面的话题。 这里所说的Web中的图标是指Web中的Icon图标。从《Web中的…

我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东西所困扰。 这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。 字体真的只是“系统默认，无从解释”这么简单吗？…

工作和生活中我们会经常碰到矩形树图，下面两张图相信大家不会陌生。 最近刚好接到一个需求，绘制门诊疾病的矩形树图（如下图），虽然 echart, d3等框架都有相关的实现，但是对其实现还是蛮好奇的，遂深入研究了一下其实现原理。接下来会从布局算法，颜色填充和canvas 事件系统三…

在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 这里的遮罩图…

CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…

在 H5 项目中，我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况。在 input/textarea 输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 ios 与 android 的 webview 中表现并非一致，同时当我们…

1. 视口 viewport viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏…