好记性不如烂笔头~

日常开发中线性渐变是必不可少的技能之一，今天来简单聊一聊。线性渐变的优势就不赘述了，直接看看用法吧。渐变规则要想了解渐变的规则首先要明白渐变线的规则，渐变线是垂直向上的，在不指定角度时，如：background-image: linear-gradient(red,blue) 颜色是有上至下由红渐变为蓝色。可是这明显与渐变线垂直向上不符啊，其实在不显示指定渐变角度时，默认是180deg。在...

span布局中常常会遇到这种问题：由于父级元素设置了font-size且span(其实不止是span，确切说是子元素)设置了行内块样式，导致span间的空格和换行会有空隙 like this:<div> <span>11</span> <span>22<span></div>/* CSS */div...

我们都知道常见的定位方式有static、relative、absolute、fixed，今天来介绍一种‘粘性定位’sticky。定义粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。也就是说sticky会让元素在页面滚动时如同在正常流中（relative定位效果），但当滚动到特定位置时就会固定在屏幕上如同 fixe...

从事前端工作的小伙伴都知道margin合并也叫做margin折叠。今天总结如下。定义块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距，这种合并行为叫做margin合并。注意浮动元素或者有绝对定位的元素不会发生margin合并的行为。合并原则正正取最大，负负取最负，正负就相加分类1. 相邻元素之间margin合并相邻元素之间的margin合并规则很简单，按照上述的...

前端开发中经常用到水平/垂直居中，现总结如下。//html<div class="box"> <div class="content">this is content</div></div>//css .box { width: 600px; height: 400px; border: 1px solid ...

等高布局的实现方式有很多种这介绍两种非常实用的主流的方法，如下：//html<div class='box'> <div class='left'> <div class='bor'></div> dasdsgerfadcdasdsfdsfdsfdsfdsfdfsdf </div> ...

为什么解析 CSS 选择器时一定要从右往左解析？今天逛论坛时无意中看到这个熟悉的命题。勾起了一段心酸的往事，记得刚毕业面试时被这个问题ko过。今天总结一下算是祭奠下当年那个菜鸟的我。首先来了解下页面是如何渲染的：首先浏览器会把HTML文档解析为DOM tree，然后解析CSS为CSS tree，接着把DOM tree和CSS tree组合构建成为一棵可以渲染的render tree，最终用来绘...

当网络不佳加载图片时会出现加载失败或者延时加载的情况，此时原本的图片位置会显示空白状态，这造成了不好的用户体验，所以我们需要加一个图片占位符。有两种方式可以实现：js其实这种方式也很简单，监听onerror事件就可以了。举个栗子：<img src="http://xxxx" onerror="{this.src='/statictest.png'}" />监听onerror...