张鑫旭 -- IT技术博客大学习 -- 共学习共进步！

• 了解JS中的全局对象window.self和全局作用域self

在HTML5一些新特性出来之前，全局的self就是个没什么实用价值的半吊子。但是，随着HTML5一些新特性的到来，self开始慢慢登上正式的舞台...

• SVG精简压缩工具svgo简介和初体验

SVG文件，尤其从各种变假期导出的SVG，通常包含大量的无用信息，例如编辑器源信息，注释，因此元素，默认或者非最优值，以及其他一些不会影响渲染结果的可以移除或转换的内容。有没有什么工具可以简化这些信息呢，有，不妨试试本文介绍的svgo.

• 小tip:中文或英文左右padding一致两端对齐实现

不是什么稀奇的技术，很多很多年前自己就玩耍过。之所以今天拿出来说一下，是因为今天几个小伙伴遇到类似问题，突然发现，一些自己觉得不怎么样的东西，说不定对别人而言会有很大帮助，于是我就打算放出去，希望可以帮助到有需要的小伙伴。

• IE7浏览器下CSS属性选择器二三事

虽然属性选择器是CSS3选择器的范畴，但是IE7浏览器很给力地支持，但是，嘴上说支持，实际上还有很多有意思的特性表现，这里，就以实例的形式给大家分享下，希望能对大家实际的工作有所帮助或启迪。

• CSS1-CSS3 <color>颜色知识知多少？

本文讲的是CSS1-CSS3 <color>颜色的一些知识，有些你可能知道，有些可能并不知道，算是对过往一些知识点的总结吧。无Demo，有截图，有源代码示意，总之，希望本文的内容能够对您的学习有所帮助。

• 使用CSS3 will-change提高页面滚动、动画等渲染性能

CSS3 will-change属于web标准属性，虽然目前还是草案阶段，但出现已经有些时日了，兼容性这块Chrome/FireFox/Opera都是支持的。这个属性作用很单纯，就是“增强页面渲染性能”。那它是如何增强的呢？本文都过一个实例抛出will-change这个概念，继而解释其作用，分析其语法，提示使用注意事项等。希望本文的内容能够对大家的学习有所帮助。

• 了解CSS中的@ AT规则

大家可能在CSS中见到过字符@ 然后加一些关键字的用法，这种用法就称之为AT规则。而本文的内容就是列举目前CSS中支持的或即将支持的一些CSS规则，让大家提前有个大致的了解和认识，希望对日后的工作与学习能够提供一些帮助！

• 小tip: 子元素scroll父元素容器不跟随滚动JS实现

在网页中，滚动条的滚动行为也是类似的调调，如果页面出现多个内嵌滚动条，则行为表现是：子元素滚，子元素滚，子元素滚完父元素滚；父元素滚，父元素滚，父元素滚完容器滚…… 这是浏览器的默认行为，如果我们遇到了一个需求：子元素滚，子元素滚完，就完了，父元素不需要滚了。那该如何实现呢？

• 小tips: zoom和transform:scale的区别

本文内容如题，从表层和深层好好对比了 zoom和transform:scale的区别，有截图，有demo，希望本文的内容能够对您的学习有所帮助。

• word-break:break-all和word-wrap:break-word的区别

虽说标题是word-break:break-all和word-wrap:break-word的区别，实际上，两者的比对只是小半内容，还有很多内容是对word-break和word-wrap属性的一些了解。本文内容虽然不多，但是，demo啊截图啊什么的都还挺全，希望本文的内容能够对您的学习有所帮助。

• 小tips: CSS或JS实现gif动态图片的停止与播放

如题，本文介绍如何使用CSS或者JS等前端方法实现代码控制gif图片的暂停或者播放。一如既往，有demo有截图还有必要的源代码展示，更关键的是，本文gif比较多……

• HTML input type=file文件选择表单元素二三事

本文一些简单tips整理，没有深入具体的技术细节。考虑到一些童鞋的HTML基础不是很扎实，因此，本文的一些内容说不定可以博闻强识下。

• 小tip: 如何让contenteditable元素只能输入纯文本

利用全浏览器都支持的contenteditable模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果，但是呢，有个很大的问题就是HTML内容可以直接被粘贴进去，如果我们希望只能输入纯文本，该怎么做呢？本文提供了CSS侧，HTML侧以及JS侧三种不同的解决方法，希望可以对您的学习或者工作有所帮助！

• 理解CSS3 isolation: isolate的表现和作用

如题，理解CSS3 isolation: isolate的表现和作用，isolation: isolate是一个与CSS3混合模式关系密切的一个CSS声明。

• 深入理解CSS中的层叠上下文和层叠顺序

对于CSS世界中的元素而言，所谓的“冲突”指什么呢，其中，很重要的一个层面就是“层叠显示冲突”。默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生，有点类似于真实世界中论资排辈的感觉。而要理解网页中元素是如何“论资排辈”的，就需要深入理解CSS中的层叠上下文和层叠顺序。我们大家可能都熟悉CSS中的z-index属性，需要跟大家讲的是，z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。

• HTML textarea cols,rows属性和宽度高度关系研究

<textarea>元素，俗称“文本域”，或者“多行文本框”，其自带原生的HTML属性rows表示行的意思，可以改变<textarea>的可视区域高度，cols表示列，可以改变<textarea>的可视区域宽度。下面问题来了，我想很多小伙伴知道cols和rows可以影响文本域的尺寸，那cols和rows不同的数值和最终展示的像素尺寸之间有没有什么关系呢？可不可以通过公式计算呢？最终表现是否还受到其他CSS属性的影响呢？本文就将解答上面的这些疑惑，一起进去看看吧~

• CSS font关键字属性值的简单研究

ont属性值除了支持常用的缩写，还支持系统关键字，这种用法在某些场景下非常的有用。本文就带你前去一探究竟。有demo有源代码有截图，希望本文的内容能够对您的学习有所帮助！

• 基于原生HTML的UI组件开发

本文主讲设计思想，至于具体的技术细节，以后有机会会慢慢分享。越是简单的成品越是需要足够的积累。然而，现在的我再重新评估UI组件的实现，还是有一些遗憾的，主要遗憾在于，HTML层→数据层→展现层这三层概念实现的时候并没有理得很清楚。目前，HTML层和展现层没有任何问题，但是，数据层，并没有完整贯穿整个UI组件体系，导致，本UI组件体系不能很好地吸引对JSON数据有着偏执爱好的开发，以及应付潜在的极端需求。

• 理解SVG transform坐标变换

本文是SVG学习基本且重要的知识点。本文相当详尽的讲解了SVG transform变换的语法、特点以及一些实际的处理等等。有相当多的截图，源代码展示，还有必要的demo，对了，还有很多gif示意。如果你要学习SVG, 本文内容一定会对你的学有所帮助的。

• 秋月何时了，CSS3 border-radius知多少？

深入理解CSS3 border-radius的一些特性表现。平时使用的那点东西只是浮于表面的，实际上，border-radius支持的属性值呢，还是有点料的，也有很多需要注意的tips. 本文就算是border-radius进阶学习，还是一如既往的，有丰富的截图，表情图，琐碎图，插科打诨图；有丰富的源代码展示，对了，还有纯手动打算的便于学习的demo。希望本文的内容能够对您的学习有所帮助。