CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动…

这些个知识点是我个人认为的，下面我们就来看看这些个知识点。 position 的常见四个属性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。 static:默认位置。 在…

1. 文字超出部分显示省略号 2. 文字垂直居中 3. 首行缩进 4. 首字下沉 5. 中英文自动换行 6. 文字阴影 text-shadow 为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。 X-offset:指阴影居于字体水平偏移的位置。 Y-offs…

1. BFC里面的box都会以垂直方向排列 2. 同一个BFC里面中相邻的两个盒子的外边距会重叠 3. 每个元素的左margin box的左边与包含块的border box的左边相接触(对于从左往右的格式,否则相反),即使存在浮动也一样 4. BFC的区域不会和float Bo…

最近看一些前端面试题，经常有问到伪类和伪元素的作用以及两者区别，所以特意找了一些资料学习。下面是我对这一方面知识的理解和总结，可能会有遗漏或者一些出入，欢迎大家指正，相互交流～ 伪元素和伪类很像，但是伪元素类似于增添一个新的DOM节点到DOM树中，而不是改变元素的状态。注意了，…

W3school中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 浮动的特点，可以用八个字总结：脱标、贴边、字围和收缩。 当框 1 向左浮动时，它脱…

在平时开发过程中，由于都是自己捣鼓玩的项目，并没有UI设计给我的设计图，更没有什么特效要求，导致对css动画一直都不是很熟悉，但是作为即将进入实习单位的萌新程序员，要时刻准备着设计师要求的各种动画，于是有了这一篇文章。 什么叫过渡？字面意思上来讲，就是元素从这个属性(color…

伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的伪类和伪元素相…