何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景…

大家好，我是 Steven。 苹果网站向来是前端学习的好途径，最新发布的 iPhone 12 的产品介绍网页上就有一个文字渐入效果，这次我们会介绍这个效果是如何实现的。 打开 CodePen 编辑器，先在 HTML 的部份加入一个标题。 然后就可以专注在 CSS 的部份，加入 …

本文用 Vue 项目做示范。 利用 Vue-CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。 配置完之后，VSCode 会根据你当前 Vue 项目下的 .eslintrc.js 文件的规则来验证和格式化代码。 test/ src/ 是你要校…

以上是 CSS 水平居中的 8 种方法。 注：① 子元素 line-height 值为父元素 height 值。② 单行文本。 适应 IE7。 元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断。 IE6~7, 甚至IE8 beta…

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 p…

rem是根元素字体的单位，比如 html{font-size:16px;} ，1rem相当于16px。 不仅仅可以给字体用，其他px单位的都可以用，比如设padding:2rem ，相当于32px。 1 . 内容区块可伸缩：内容区块的在一定程度上能够自动调整，以确保填满整个页面…

什么是响应式？响应式的页面在不同的屏幕有不同的布局，换句话说，使用相同的html在不同的分辨率有不同的排版。如下图所示： 响应式布局是为了解决适配的问题，传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了。因为它是用的同样html，所以它的JS…

这是笔者整理的个人在CSS3动画上遇到的问题，全部都是笔者个人的经验，以及解决方案，并不相信网上会有重复的文章。大家可以点进每个小栏目的codeplay去地直观feel一下。 常见错误一：动画做完就disappear了！喂喂喂！没让你消失啊。code play~ 这个应该是an…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…