摘要：
问题描述 先来一段html代码 此刻效果是正常的一倍效果 接着加入container缩放 则会出现极细致的一条白色边，原因大概就是.parent元素的border和.son的height经过缩放后不会是整数，两个数值的小数点被省去不渲染，导致两者叠加起来和真正要的效果差1px，而让.parent的背 阅读全文
摘要：
案例重现 布局时经常能发现inline元素和inline block元素水平呈现的元素间，会存在着一些意想不到的间距，举例： 由于换行和空格分割符的存在，行内元素间将被渲染为一个小间距了。 解决办法1 元素间移除空格和换行 这样看着仍旧不太舒服，尤其是项目里缩进层级深的时候 解决办法2 父元素设置 阅读全文
摘要：
一、浮动布局+百分比 该样式兼容性较好，但是无法实现当里面的列增多时比例也随着变化，必须手动修改，当然你也可以使用一个JS来调整了。 二、行内元素（inline block）+百分比 三、display:table + display:table cell 我们知道表格可以根据内容进行划分，CSS也 阅读全文
摘要：
简介 background attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值有三个： scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background 阅读全文
摘要：
原理 ch等宽字体 + text indent 动画负缩进 显示效果如 loading... 代码 阅读全文
摘要：
块级格式上下文（Block formatting context） 什么是BFC? 块格式化上下文（block formatting context） 是页面 CSS视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。 – MDN 块格式上下文 BFC是一个容器，在这个容器中的元素不 阅读全文
摘要：
简介 HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础 阅读全文
摘要：
简介 常常有产品提起这种效果 html 写上一个input元素 css 重点在于transition动画，让字体大小切换的时候显得平滑 js 监听input输入框的输入，计算输入框内容的长度（一个中文当作两个字符长度），程序中写死计算规则。 阅读全文
摘要：
直接抄 "postcss css reset" 代码吧。 pc mobile 阅读全文
摘要：
单行截断 此方法兼容到ie6过。不过只能单行。 多行截断 此方法webkit私有，并且使用flex布局，只得在移动端和高版本 webkit 系列浏览器使用。 多行截断2 利用浮动元素特性模拟最后的省略号。 兼容性好，对各大主流浏览器有好的支持。 响应式截断，根据不同宽度做出调整。 文本超出范围才显示 阅读全文
摘要：
简介 简易 css 命名方式，减小命名冲突，使得 css 更有组织感和识别感。但如今写 react 项目大多可以忽略对 css 的命名约束了。 官网介绍：http://getbem.com/introduction/ 释义 Block：具有独立意义的实体，就如 header, container, 阅读全文
摘要：
测试代码 盒模型图 和一般的盒模型不同，这里画上了滚动条，在 padding 的外侧。 滚动条测验 我们都知道 box sizing 为 content box 为标准模型，那么如果你写上了 ，那么显示效果如下： chrome 和 safari 一样，就是调试的控制台里显示的效果有些错位。 如果是 阅读全文
摘要：
关系图 图片出处我找不到了。 结论 权重从高到低排序 并且注意第6点，类、伪类、属性选择器权重一致。 阅读全文
摘要：
原理 CSS property: columns。CSS属性 columns 用来设置元素的列宽和列数。 兼容性 chrome 50+ IE 10+ android browser 2.1+ with webkit "MDN 文档" 效果 代码 心得 在过去本人还用 100+ 行代码写过 JS 版的 阅读全文
摘要：
近期梯子不是很稳定，在家办公时网络也很差，bing 的搜索效果也差强人意，勉强用用百度吧，但是广告又特别恶心人。 工具介绍 本人使用的是 chrome 插件的 FeHelper 提供的网页油猴子工具 保存并启用！ 百度真的是鸡贼，给广告元素的标识藏的还真的深，努力的想让自己的广告标签弄的和正常的内容 阅读全文
摘要：
简介 想查看chrome插件的源码，就需要找到chrome插件安装的位置，接着再文件夹下查找此插件的id。 mac 插件里的 id，就是上文的文件夹名 windows7 C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Defa 阅读全文
摘要：
重绘 当页面元素样式改变不影响元素在文档流中的位置时（如background color，border color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。 回流 当改变的操作响应文档内容或者结构，或者元素位置时，就会触发回流。有以下几种情况： 页面首次渲染 DOM操作 阅读全文
摘要：
站点数据 发现一个有意思的站点 http://gs.statcounter.com/browser market share/desktop/china 可以查询得知 chrome 占比在 64% 上下，绝对优势宛如 IE 刚打败网景公司呀 IE 只有 5% 了，Edge Legacy 也 5%，哎 阅读全文