摘要： 一、伸缩布局 CSS3 在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 二、定义 Flexbox 语法格式： display: flex | inline-flex; Flexbox 由伸缩容器和伸缩项目组成。通过 阅读全文

摘要： CSS3 新增多列布局适合排版很长的文字内容，让其多列显示。 一、多列布局 语法格式： columns:column-width | column-count; column-width：定义每列的宽度； columen-count：定义列数； columns 属性初始值根据元素个别属性而定，它适用 阅读全文

摘要： 一、BFC（块级格式化上下文） BFC(Block formatting context)，直译为"块级格式化上下文"。 BFC 是指一个独立的块级渲染区域，只有 Block-level BOX 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 二、具有 BFC 条件的元素 可以 阅读全文

摘要： 动画是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 一、设置动画属性 1、定义动画名称 语法格式： animation-name:none | 阅读全文

摘要： CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的，相当于其绕着 X 轴旋转了 180 度，如下图 x 轴即水平位置，左边是负的，右边是正的； y 轴即垂直位置，上面是负的，下面是正的； z 轴即视线到屏幕里面，屏幕里面的负的，外面是正的。 一、定义旋转 1、rotateX() 该函数 阅读全文

摘要： CSS2D transform 表示 2D 变换，目前获得了各主流浏览器的支持，是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，可以取代大量之前只能靠 Flash 才可以实现的效果。 一、定义移动（translate） translate() 函数能够重 阅读全文

摘要： 一、过渡 过渡（transition)是 CSS3 中具有颠覆性的特征之一，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 在 CSS3 里使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变 阅读全文

摘要： 一、什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了 CSS 滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。 二、核心技术 核心技术就是利用 CSS 精灵（主要是背景位置）和 阅读全文

摘要： 一、精灵技术产生的背景 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接 阅读全文

摘要： 一、字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http 请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的 阅读全文