按惯例，上GIF： 重现：https://codepen.io/anon/pen/JJBxOm这是我今天参加面试时候，面试官让我做的一道题，面试官坐我旁边看我现场做，然而我比较菜，回来后才做出来……来看看HTML部分：由于li是inline-block元素，所有没有写li的闭合，…

收集了很多实用的 css 片段

十分详细的 CSS 颜色体系介绍，涉及颜色关键字、transparent、currentColor、rgb、hsl 等，包含许多高级用法，适合入门以及 CSS 进阶学习。

css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有…

浮动主要考察为什么清除浮动和如何清除浮动的问题。 浮动场景：通常对于块级元素我们是不设置高度的（天知道以后会不会加内容，另外设置了高度会带来显示问题），块级元素的高度是靠子元素内容撑开的。这时，子元素设置浮动，子元素就会脱离文档流，此时父元素的高度就不能靠子元素内容撑开了，就会…

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

不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子： 现在，你甚至可以在边框中使用渐变。 具体的例子可以看这里，或者看这里使用的是background-clip和backgroun…

什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它，但是我想我们都会有一个共同的经历，面对它的各种版本，各种坑，傻傻的分不清楚，flex.css就是对flex布局的一种封装，通过简洁的属性设置就能使得它完美的运行在移动端的各种浏览器，…

最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我知道，肯定是我对相关属性…