前言 为了深入了解 flex 布局，我用 它 写了 9个麻将，当然，你也可以试试骰子，大同小异。 一、初始布局与公共样式 一开始是想用 div 来写，后来改成 ul li 更合适。 1、基础布局 2、

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

其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了这么多，只是想告诉你，布局这个东西真的很重要。本篇内容概括了布局的基础+基本的PC端布局+移动端适…

首先我们来说一下前端 icon 的发展史。 在我刚开始实习时，大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 backgrou…

在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫的动画效果，并且对比这三个特效和JS特效的对比，希望…

相信大家在写css属性的时候，会遇到一些问题，比如说：垂直对齐，垂直居中，背景渐变动画，表格宽度自适应，模糊文本，样式重置，清除浮动，通用媒体查询，自定义选择文本，强制出现滚动条，固定头部和页脚，自己在网上看到的一篇关于css的文章，感觉这里边一些常用的css代码片段对大家很有…

1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin …

之前写过《CSS3 动画简单入门》，文章内容只是简单介绍 CSS3 动画属性的使用，并没有一个综合的案例演示，因此本章作为前者的内容补充。 下面简单介绍本章需要实现的 3D 效果： 当加载页面后，图片展示“摊牌”的效果，当鼠标点击页面左滑动或者右滑动时，图片会跟随左旋转或右旋转…

在介绍postion之前，有必要先了解下文档流。 简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline），不独占一行。 一般使用margin是用来隔开元素与元素的间距；padd…