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

时间 2019-11-05

标签前端培训初级阶段繁體版

原文原文链接

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

咱们要讲什么

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

CSS经常使用样式属性

CSS3 过渡、变换、动画

CSS3 3D场景搭建与应用

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

基本选择器

选择器	例子	例子描述	CSS规范级别
ID 选择器	`#login`	选择 id="login" 的元素	1
类别选择器	`.btn`	选择 class="btn" 的全部元素	1
元素选择器	`div`	选择全部 div 标签	1
通配选择器	`*`	选择全部标签	2
属性选择器	`[type]`	选择有 type 属性的全部元素	2
属性选择器	`[type=file]`	选择 type="file" 且全匹配的全部元素	2
属性选择器	`[class~=file]`	选择有 class="file" 且多值匹配属性的全部元素	2
属性选择器	`[type｜=file]`	选择有 type 属性且值为 file 或 file- 为前缀的全部元素	2
属性选择器	`[type^=file]`	选择有 type 属性且 file 开头的全部元素	3
属性选择器	`[type$=file]`	选择有 type 属性且 file 结尾的全部元素	3
属性选择器	`[type*=file]`	选择有 type 属性且包含 file 的全部元素	3

CSS规范级别表明 CSS 1、CSS 2.1、CSS Selectors Level 3、Selectors Level 4。
[type｜=file] 实际为 [type|=file] ，在表格中没法输入因此改为全角。（有会输入的能够告诉我~）

组合选择器

选择器	例子	例子描述	CSS规范级别
分组	`html,body`	选择 `<html>` 和 `<body >`	1
后代 `空格`	`ul li`	选择祖先元素为 <ul> 元素的全部 <li> 元素。	1
下级	`ul>li`	选择父元素为 <ul> 元素的全部 <li> 元素。	2
相邻兄弟	`div+div`	选择紧接在 <div> 元素以后的 <div> 元素。	2
兄弟	`h2~div`	选择在 <h2> 元素以后的全部 <div> 元素	3

后代选择器要注意嵌套问题如 ul{font-size: 1.5em;}
下级选择器通常用在只但愿子元素有，不但愿更深层级有。

伪类选择器

选择器	例子	例子描述	CSS规范级别
`:link`	`a:link`	未被访问的连接	1
`:visited`	`a:visited`	已被访问的连接	1
`:hover`	`a:hover`	（鼠标悬浮在上面）鼠标正在上面的连接	1
`:active`	`a:active`	鼠标正在按下的连接	1
`:focus`	`input:focus`	有焦点的input	2
`:first-child`	`div :first-child`	表明父元素的第一个子元素	2
`:last-child`	`div :last-child`	表明父元素的最后一个子元素	3
`:nth-child(n)`	`div :nth-child(2n)`	表明父元素的中偶数位子元素	3
`:empty`	`div:empty`	空的 div	3
`:target`	`:target`	匹配锚点元素	3
`:disabled`	`input:disabled`	不可用的input	3
`:checked`	`:checked`	选中的 checkbox、radio、select	3
`:not(selector)`	`div:not(:empty)`	全部不为空的 div	3
`:focus-within`	`form:focus-within`	高亮得到焦点的表单	4

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

伪元素选择器

选择器	例子	例子描述	CSS规范级别
`::after`	`.icon:after`	在标签里面的最后增长一个行内元素	2
`::before`	`.icon:before`	在标签里面的最前面增长一个行内元素	2
`::placeholder`	`input::placeholder`	修改文本框的 placeholder 样式	4

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

上面是一些咱们经常使用，或者说用途比较大的选择器。一些兼容很差，新规范，鸡肋一些的我没写出来。有兴趣能够去 MDN 中看。html

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

下面列表中，选择器类型的优先级是递增的：前端

类型选择器（type selectors）（例如, h1）和伪元素（pseudo-elements）（例如, ::before）

类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如,[type="radio"]），伪类（pseudo-classes）（例如, :hover）

ID选择器（例如, #example）

通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ' ') 和否认伪类（negation pseudo-class）(:not()) 对优先级没有影响。（可是，在 :not()内部声明的选择器是会影响优先级）。segmentfault

给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式，所以可看做是具备最高的优先级。.浏览器

当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其余声明。虽然技术上!important与优先级无关，但它与它直接相关。函数

2. CSS经常使用样式属性

这个就有点多了啊，布局

数值单位

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

CSS 属性

类型	属性
定位	position / z-index / top / right / bottom / left / clip
布局	display / float / clear / visibility / overflow / overflow-x / overflow-y
盒子-大小	width / min-width / max-width / height / min-height / max-height
盒子-外	margin / margin-top / margin-right / margin-bottom / margin-left
盒子-内	padding / padding-top / padding-right / padding-bottom / padding-left
边框	border / border-width / border-style / border-color / border-top / border-top-width / border-top-style / border-top-color / border-right / border-right-width / border-right-style / border-right-color / border-bottom / border-bottom-width / border-bottom-style / border-bottom-color / border-left / border-left-width / border-left-style / border-left-color / border-radius / border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius / box-shadow / border-image / border-image-source / border-image-slice / border-image-width / border-image-outset / border-image-repeat
背景	background / background-color / background-image / background-repeat / background-attachment / background-position / background-origin / background-clip / background-size
颜色	color / opacity / <color> / Color Name / HEX / RGB / RGBA / HSL / HSLA / transparent / currentColor
变换	transform-origin / transform-style / perspective / perspective-origin / backface-visibility
过渡	transition / transition-property / transition-duration / transition-timing-function / transition-delay
动画	animation / animation-name / animation-duration / animation-timing-function / animation-delay / animation-iteration-count / animation-direction / animation-play-state / animation-fill-mode

如上就是一些属性，还有一些放出来，感兴趣的能够去查一下。好了，下面咱们简单介绍几个经常使用的测试

display 属性

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

position 属性

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

3. CSS3 过渡、变换、动画

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

transition 过渡

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

属性名	描述	默认值
transition-property	执行过渡动做的属性	all
transition-duration	动做执行时间	0
transition-timing-function	动做执行曲线 ease	ease
transition-delay	延迟执行动画的时间	0

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）。
一条立方贝塞尔曲线须要四个点来定义，P0 、P1 、P2 和 P3。P0 和 P3是起点和终点，这两个点被做为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P0 是 (0, 0)，表示初始时间和初始状态。P3 是(1, 1) ，表示终止时间和终止状态。

变换

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

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

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

动画

过渡能够理解为两个关键帧的补间操做。动画就是一连串的关键帧。

animation-name：动画名称，须要 @keyframes 来定义动画

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

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

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

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

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

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

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

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

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

往期

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

后记

2019年3月15日更新。

昨天下午，主讲人把这一课讲了。这里记录一下主讲人文章，主讲人cnblogs。顺便记录一下问题吧，后面再补测试demo。

css选择器权重以及覆盖规则
translate 和 rotate 搭配使用（坐标轴变换问题）
justify-content: space-evenly; 兼容的解决方案
position float transfrom 以后的的层级。
...................................................早上醒来就忘了还有啥，后面若是有的话再补吧。

最近手里有点活，移动端的拖动排序，网页播放 amr 。后续整理整理代码也发出来。