前端培训-初级阶段（5 - 8）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

我们要讲什么

1. CSS选择器(基本、层级、属性、伪类、伪状态)
2. CSS常用样式属性
3. CSS3 过渡、变换、动画
4. CSS3 3D场景搭建与应用

CSS选择器(基本、层级、属性、伪类、伪状态)

基本选择器

1. CSS规范级别代表 CSS 1 、 CSS 2.1 、 CSS Selectors Level 3 、 Selectors Level 4 。
2. [type｜=file] 实际为 [type|=file] ，在表格中无法输入所以改成全角。（有会输入的可以告诉我~）

组合选择器

ul{font-size: 1.5em;}

伪类选择器

1. a 标签使用伪类时要注意 爱恨原则（LoVe/HAte）
2. :active 也常用来做 tab 选择
3. :focus 单击、触摸、tab 都可以触发

伪元素选择器

1. 你可能注意到 第一列是双冒号 ， 第二列是单冒号 ，放心不是我写错了，规范定义的是 单冒号是伪类 ， 双冒号是伪元素 。但是浏览器厂商大哥不买账，嗯，目前来说单冒号会兼容性更好。
2. after 和 before 需要 content: '内容' ，不然会不显示。
3. placeholder 属于 shadow DOM

上面是一些我们常用，或者说用途比较大的选择器。一些兼容不好，新规范，鸡肋一些的我没写出来。有兴趣可以去 MDN 中看。

差点忘记的权重计算（优先级）

2. CSS常用样式属性

这个就有点多了啊，

数值单位

1. px 绝对单位， 像素 ，最常用的
2. em 相对单位，相对于 当前对象内文本 的font-size的倍数
3. rem CSS3 相对单位，相对于 根元素(即html元素) 的font-size的倍数
4. vw vh CSS3 相对单位，屏幕视口，均分一百份
5. vmax vmin CSS3 相对单位，屏幕视口，均分一百份，宽高最大、最小值
6. 0% / 0px / 0vw 可以省略单位写为 0
7. 忘了，还有 % ，这个单位留作课后作业吧。

CSS 属性

如上就是一些属性，还有一些放出来，感兴趣的可以去查一下。好了，下面我们简单介绍几个常用的

display 属性

1. none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
2. inline：指定对象为内联元素。
3. block：指定对象为块元素。
4. inline-block：指定对象为内联块元素。（CSS2）
5. table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
6. box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
7. inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
8. flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
9. inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
10. flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
11. inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

position 属性

1. static：常规流。此时4个定位偏移属性不会被应用。
2. relative：常规流，位置不变，定位偏移属性移动的只是显示效果。
3. absolute：脱离常规流，偏移属性参照的是 离自身最近的定位祖先元素 ，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
4. fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。（IE、iOS 有兼容问题）
5. sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
6. center：与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
7. page：与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）

3. CSS3 过渡、变换、动画

上面一节已经列出本节包含的属性了，这节我们讲一讲，具体应用。

transition 过渡

缩写形式 transition：property duration timing-function delay; ，下面我们来分开说明一下

transition: border-color .5s ease-in .1s,
            background-color .5s ease-in .1s,
            color .5s ease-in .1s;

等同于

transition-property: border-color, background-color, color;
    transition-duration: .5s, .5s, 1s; 
    transition-timing-function: ease-in, ease-in, ease-in; 
    transition-delay: .1s, .1s, .1s;

意思是 border-color 的变化执行 0.5秒，使用 ease-in 曲线执行，等待 0.1秒后开始。

意思是 background-color 的变化执行 0.5秒，使用 ease-in 曲线执行，等待 0.1秒后开始。

意思是 color 的变化执行 1秒，使用 ease-in 曲线执行，等待 0.1秒后开始。

transition-timing-function 说明

这个属性的值比较有意思，可以做一些特别一些的动画。 图片来自 MDN:timing-function 。

cubic-bezier() 定义了一条 立方贝塞尔曲线（cubic Béziercurve）。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（easing functions）。

变换

transform 非常的灵魂，底层提供了 matrix()，matrix3d() 来操作，封装了 translate 移动、rotate 旋转 、scale 缩放、skew 斜切扭曲。刚才说的是 2D 的，加上 3D 就是 3D变换，如 translate3d()。有一个意外 perspective() 指定透视距离。

transform-origin 默认值：50% 50%。用来设置变换的基准点。

transform-style 默认值：flat ，默认是 2D 空间。设置为 preserve-3d 改成三维空间，元素将会创建局部堆叠上下文。

动画

过渡可以理解为两个关键帧的补间操作。动画就是一连串的关键帧。

1. animation-name ：动画名称，需要 @keyframes 来定义动画

   @keyframes testanimations { 
       from { opacity: 1; } 
       to { opacity: 0; } 
   }
   .testanimations{
       animation: testanimations 1s;
   }

2. animation-duration ：动画的持续时间
3. animation-timing-function ：动画执行曲线
4. animation-delay ：延迟的时间
5. animation-iteration-count ：循环次数。infinite：无限循环。<number>：指定对象动画的具体循环次数。

6. animation-direction ：在循环中是否反向运动

   normal：正常方向(默认值)
       reverse：反方向运行
       alternate：动画先正常运行再反方向运行，并持续交替运行
       alternate-reverse：动画先反运行再正方向运行，并持续交替运行

7. animation-fill-mode ：结束时候的状态

   none：默认值。不设置对象动画之外的状态
       forwards：动画结束时的状态
       backwards：动画开始时的状态
       both：动画结束或开始的状态

8. animation-play-state ：动画暂停、开始状态。running：运动。paused：暂停。

4. CSS3 3D场景搭建与应用

主要应用 perspective ，下面我们将要做一个 视差滚动的例子 。

往期

1. 前端培训-初级阶段（1 - 4）

参考资料

1. (引用) 培训目录出处-已备份到笔记
2. MDN
3. CSS速查
4. 视差滚动