魔鬼属性 float float 的本质与特性 浮动的本质就是为了实现文字环绕效果。 包裹性； 块状化并格式化上下文； 破坏文档流； 没有任何 margin 合并； 所谓“包裹性”，由“包裹”和“自适应性”两部分组成。 包裹。假设浮动元素父元素宽度 200px，浮动元素子元素是一个 128px 宽度的图片，则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度 128px，代码如下： 自适应性。如果浮动元素的子元素不只是一张 128px… »

图片上传前端压缩的现实意义 对于大尺寸图片的上传，在前端进行压缩除了省流量外，最大的意义是极大的提高了用户体验。 这种体验包括两方面： 由于上传图片尺寸比较小，因此上传速度会比较快，交互会更加流畅，同时大大降低了网络异常导致上传失败风险。 最最重要的体验改进点：省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制 5M 或者 2M 以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，一张原始图片超过 2M… »

图片合成最常见的需求有验证码图片，亦或者图片加水印等，这种实现一般都是后端实现的。 随着 HTML5 发展和现代浏览器的占比越来越高，我们其实也可以在前端直接进行图片的合成。优点在于，响应更快，体验更好；如果是和文字进行合成，我们可以利用客户端字体，视觉展现效果更丰富；同时展示和合成全部都是前端完成，因此更利于维护。 这里通过举个例子，演示如何在前端实现多个图片合成的效果，主要是借助 HTML5 canvas 相关技术。 使用 canvas… »

了解 CSS :focus-within 伪类 CSS :focus-within 伪类选择器和 IE8 就开始支持的:focus 可以说是近亲，区别在于:focus 表示当前元素处于 focus 状态时候干嘛干嘛，而:focus-within 表示当前元素或者当前元素的子元素处于 focus 状态时候干嘛干嘛。 举个例子： 表示仅仅当 处于 focus 状态时候， 元素 outline 出现。换句话说，子元素 focus… »

填充的两种规则 只要是路径填充，都有两种规则 nonzero 和 evenodd，无论是 SVG 中的路径填充，还是 Canvas 中的路径填充，如果还有其他和路径相关的技术（甚至设计软件），也离不开这两种填充规则。 如果我们用 3 个点，连成一个三角形，则这两种填充规则没什么区别，如下对比 如果是两个三角形，并且发生重叠，差异就出现了，如下： 交叉点 填充规则的关键，就是确定复杂路径构成的图形，哪些是内部，哪些是外部。内部则填充，外部则透明。 “nonzero… »