animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法：。规定需要绑定到选择器的 keyframe 的名称。默认值是 0，意味着没有动画效果。animation-timing-function 规定动画的速度

「居中」是进行布局时最常见的需求之一了。CSS 有多种居中的方式，在什么时候挑选适合的方案？是一个值得思考的问题。警告：本作品遵循 署名-非商业性使用-禁止演绎 4.0 未本地化版本 协议发布。本文将会按照具体场景来选择相应的居中方式，帮助你系统地理清 C

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。要想阻止

CSS Houdini 号称 CSS 领域最令人振奋的革新。CSS 本身长期欠缺语法特性，可拓展性几乎为零，并且新特性的支持效率太低，兼容性差。而 Houdini 直接将 CSS 的 API 暴露给开发者，以往完全黑盒的浏览器解析流开始对外开放，开发者可以

【哪些标签不支持伪元素？我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。诸如 <img> 、<input>、<iframe>，这几个标签是不支持类似 img::before 这样使用。究其原因，要想要标签支持伪元素

/* the X argument can be replaced with any simple selectors */. </ul>CSS将会选择除了class为“different”外的所有li元素。开发者需要注意伪元素不是简单选择器，

上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮，里头关键的技术就在于活用边框宽度和div本体宽高，因此这篇再加码一个效果，就是纯粹利用CSS，让“单一个”div，从正三角形变换为正八边形，最后再搭配动画的

</div>说明： loading-1/2/3/4 用于区别四个不同点，loading-item 里放通用样式

CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习CSS过程中的关键进展。相反，它分享了一些在大多数CSS教程中不太可能找到的有用技巧。在CS

我们中的大多数人，尤其是那些从左到右阅读的人，可能猜想浏览器也是执行从左到右匹配规则的，因此会推测这条规则的开销并不高。在脑海中，我们想象浏览器会像这样工作：找到唯一的ID为nav的元素，然后把这个样式应用到直系子元素的li元素上。我们知道有一个ID为na

很多问题都是积累得来的。写了，遇到了，才能去真正理解解决方案，才会随着自己的不。断成长而有进步。别人问我为什么知道那么多CSS兼容解决方案，为什么一看就出的时候，我只能。告诉他，我写了20几个Wordpress主题。看BLOG或者一些网上的教程，都很难让你

position属性规定元素的定位类型。所以的主流浏览器都能够很好的支持position属性。任何版本的IE浏览器，包括IE8都 不支持position属性值“inherit”。absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素

是浏览器处理冲突的一个能力如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。important>行内样式>id选择器>类选择器>标签选择器>通配符>继承。算法：==》第一个0是im

* 最大优先实现法，全局能实现不用区域，区域能实现不用模板，html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address,