HTML5

[TOC]

概述

什么是 HTML5

HTML5是超文本标记语言（HTML）的第五个主要版本，旨在提供更丰富的网页内容和更强大的功能。

~~特性：~~

新元素和语义化：HTML5 引入了许多新的元素，以改善文档的结构和语义。常用的新元素包括：
- <header>：表示文档的头部区域。
- <footer>：表示文档的底部区域。
- <article>：表示独立的内容块。
- <section>：表示文档中的一个区域或章节。
- <nav>：表示导航链接的部分。
- <aside>：表示与主内容相关但独立的内容。
多媒体支持：HTML5 提供了对音频和视频的原生支持，使用新的标签：
- <audio>：用于嵌入音频内容。
- <video>：用于嵌入视频内容。
表单控件：HTML5 增强了表单的功能，增加了新的输入类型和属性：
- 新输入类型：如 email、date、number 等，提供更好的用户输入验证。
- 新属性：如 placeholder、required、autocomplete 等，提高用户体验。
Canvas 和 SVG：
- <canvas>：用于绘制图形，支持动态生成和操控图像。
- SVG：支持可缩放矢量图形，可以创建复杂的图形和动画。
本地存储：HTML5 引入了 Web Storage API，包括：
- localStorage：用于在浏览器中持久存储数据。
- sessionStorage：用于在会话期间存储数据。
离线支持：
- Service Workers：通过 Service Workers，HTML5 支持离线 Web 应用，使用户在没有网络连接时仍能访问网站内容。
地理定位：HTML5 允许 Web 应用获取用户的位置数据，使用navigator.geolocation API。
API 扩展：HTML5 还引入了多种 API，例如：
- Web Workers：支持多线程，提升性能。
- Web Sockets：实现实时双向通信。
- Drag and Drop：支持拖放操作。
兼容性与渐进增强：HTML5 设计时考虑了向后兼容，老旧浏览器仍然能渲染 HTML5 文档，同时新特性可以渐进式地应用。

~~优点：~~

提高可用性和改进用户的友好体验；
有几个新的标签，这将有助于开发人员定义重要的内容；
可以给站点带来更多的多媒体元素(视频和音频)；
可以很好的替代 FLASH 和 Silverlight；
当涉及到网站的抓取和索引的时候，对于SEO很友好；
将被大量应用于移动应用程序和游戏；
可移植性好。

~~缺点：~~ 该标准并未能很好的被 PC 端浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。

~~未来趋势：~~

移动优先
游戏开发者领衔“主演”

新元素和语义化

新增标签

为了更好地处理今天的互联网应用，HTML5 添加了很多新元素及功能，比如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个 api 拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

~~canvas~~

标签	描述
`<canvas>`	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

~~多媒体~~

标签	描述
`<audio>`	定义音频内容
`<video>`	定义视频（video 或者 movie）
`<source>`	定义多媒体资源 `<video>` 和 `<audio>` 字体

`<embed>`	定义嵌入的内容，比如插件。
`<track>`	为诸如 `<video>` 和 `<audio>` 元素之类的媒介规定外部文本轨道。

表单

标签	描述
`<datalist>`	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
`<keygen>`	规定用于表单的密钥对生成器字段。
`<output>`	定义不同类型的输出，比如脚本的输出。

~~语义和结构~~ HTML5 提供了新的元素来创建更好的页面结构

标签	描述
`<article>`	定义页面的侧边栏内容
`<aside>`	定义页面内容之外的内容。
`<footer>`	定义 section 或 document 的页脚。，可以出现在多个地方
`<header>`	定义了文档的头部区域，，可以出现在多个地方
`<nav>`	定义导航链接。
`<progress>`	定义任何类型的任务的进度。
`<section>`	定义文档中的节（section、区段）。
`<time>`	定义日期或时间。
`<mark>`	定义带有记号的文本。可以用来显示搜索引擎搜索后关键词。

`<bdi>`	允许您设置一段文本，使其脱离其父元素的文本方向设置。
`<command>`	定义命令按钮，比如单选按钮、复选框或按钮
`<details>`	用于描述文档或文档某个部分的细节
`<dialog>`	定义对话框，比如提示框
`<summary>`	标签包含 details 元素的标题
`<figure>`	规定独立的流内容（图像、图表、照片、代码等等）。
`<figcaption>`	定义 `<figure>` 元素的标题
`<meter>`	定义度量衡。仅用于已知最大和最小值的度量。
`<ruby>`	定义 ruby 注释（中文注音或字符）。
`<rt>`	定义字符（中文注音或字符）的解释或发音。
`<rp>`	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
`<wbr>`	规定在文本中的何处适合添加换行符。

移除标签

以下的 HTML 4.01 元素在 HTML5 中已经被删除

<acronym> 字体兼容
<applet> java 组件
<basefont> 字体
<big>
<center>
<dir> 目录
<font>
<frame>
<frameset>
<noframes>
<strike>

语义标签

语义标签 是 HTML5 中用于增强文档结构和可读性的元素，它们提供了关于内容的含义。

标签	描述
`<article>`	定义页面的侧边栏内容
`<aside>`	定义页面内容之外的内容。
`<footer>`	定义 section 或 document 的页脚。，可以出现在多个地方
`<header>`	定义了文档的头部区域，，可以出现在多个地方
`<nav>`	定义导航链接。
`<progress>`	定义任何类型的任务的进度。
`<section>`	定义文档中的节（section、区段）。

示例：

html

<body>
  <header>定义了文档的头部区域</header>
  <div>
    <article>定义页面的侧边栏内容</article>
    <aside>定义页面内容之外的内容</aside>
  </div>
  <footer>定义 section 或 document 的页脚</footer>
</body>

兼容处理

html5shiv.min.js

思路：

在不支持 HTML5 新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。
但是在 IE9 版本以下，并不能正常解析这些新标签，但是却可以识别通过 document.createElement('tagName')创建的自定义标签。
于是我们的解决方案就是将 HTML5 的新标签全部通过 document.createElement('tagName')来创建一遍，这样 IE 低版本也能正常解析 HTML5 新标签了。

//1. 手动创建无法识别的元素
document.createElement('header');
document.createElement('nav');
document.createElement('main');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');

//2. 之后再将所有创建出来的元素转换为块级元素：display: block
header,nav,main,article,aside,footer { display: block; }

处理方式： 在实际开发中我们更多采用的是通过检测 IE 浏览器的版本来加载第三方的一个 JS 库 html5shiv 来解决兼容问题（测试在 IE 下面的兼容性：ieTester 软件的使用）

html

<script src="../js/html5shiv.min.js"></script>

表单控件

新增表单标签

<datalist>:与 input 配合使用，类似于拥有输入功能的下拉列表。
- 兼容： FireFox 不支持 value 属性，显示效果不好
- option 可以是单标签，也可以是双标签
- 如果 input 的 type 类型是 url 的话，在 datalist 中必须添加http://
- html
```
<input type="text" list="subject" />
<datalist id="subject">
  <option value="Java" label="使用最广泛"></option>
  <option value="C" label="最基础的语言"></option>
  <option value="PHP" label="我正在学的语言"></option>
</datalist>
```
  1
  2
  3
  4
  5
  6
<keygen>:提供一种验证用户数据的可靠方法。在提交表单数据的时候，会生成两个键，一个私钥，一个公钥。私钥存储在本地，公钥发送到服务器。在需要做验证的时候，我们可以从服务器下载一个客户端证书，通过私钥和证书来实现相关的验证操作。（有兼容问题)

<progress>:进度条

html

<progress max="100" value="30"></progress>

<meter>:度量器，可用于标示级别

属性	值	描述
high	number	定义度量的值位于哪个点，被界定为高的值。
low	number	定义度量的值位于哪个点，被界定为低的值。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value	number	定义度量的值。

<output>:用于展示内容，只能展示，不能进行编辑（实用性不强）

新增表单属性

placeholder：占位符
autofocus：获取焦点
autocomplete：on | off，自动完成，用于表单元素，也可用于表单自身
- 1 必须成功提交过表单
- 2 当前添加 autocomplete 的元素必须有 name 属性
multiple：文件上传多选或多个邮箱地址（多个邮箱之间用,号分割）
form：指定表单项属于哪个 form，处理复杂表单时会需要
novalidate：关闭验证，可用于<form>标签
required：验证条件，必填项
pattern：正则表达式验证表单

示例：

html

autocomplete:属性规定表单是否应该启用自动完成功能。 autocomplete属性适用于form以及下面的 input 类型：text, search, url,
telephone, email, password, datepickers, range, color

<form action="" autocomplete="on" id="myForm">
  autofocus定位文本框焦点：<input type="text" autofocus /> <br />
  placeholder设置文本框默认提示：<input type="text" placeholder="请输入***" /><br />
  email邮件类型自带验证和提示：<input type="email" multiple /> <br />
  required属性设置非空特性：<input type="tel" required /><br />
  pattern设置验证规则：<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$" /><br />
  multiple多文件选择：<input type="file" multiple /><br />
  <input type="submit" value="提交" /><br />
</form>

地址：<input type="text" name="address" form="myForm" />

新增 type 类型

email：输入 email 格式。提供了默认的邮箱完整验证，必须包含@符号，同时必须包含服务器名称
tel：手机号码。没有提供验证，而是在移动端打开数字键盘
url：只能输入 url 格式。提供了网址格式验证，必须包含 http://
number：只能输入数字。提供了数字验证，只能输入数字和小数点（.），不能输入其他字符。max 最大值,min 最小值,value 默认值
search：搜索框
range：范围，可以进行拖动，通过 value 进行取值。max 最大值,min 最小值,value 默认值
color：拾色器，通过 value 进行取值
time：时间
date：日期不是绝对的
datetime：日期时间。效果不好，大多数浏览器不支持，只有 safari 支持（废弃）
datetime-local：日期时间。浏览器支持，推荐使用
month：月份
week：星期

注意： 部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

新增表单事件

oninput ：输入内容时触发，可用于移动端输入字数统计
oninvalid ：验证不通过时触发

html

<script>
  // oninput：监听用户的每一次输入
  document.getElementById('name').oninput = function () {
    console.log(this.value)
  }

  // onkeyup：监听键盘弹起，每一个键盘弹出触发一次
  document.getElementById('name').onkeyup = function () {
    console.log('---' + this.value)
  }

  // oninvalid：当指定表单元素验证不通过时触发
  document.getElementById('phone').oninvalid = function () {
    console.log('验证不通过')
    this.setCustomValidity('手机号格式不正确!')
  }
</script>

案例

~~效果图：~~

~~代码：~~

1、样式

html

<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    max-width: 600px;
    margin: 0 auto;
  }
  form {
    width: 100%;
  }
  form fieldset {
    padding: 20px 20px 10px;
  }
  form fieldset label {
    font-weight: bold;
    line-height: 20px;
  }
  form input,
  form meter {
    width: 100%;
    margin: 10px 0;
    display: block;
    height: 30px;
    border: 1px solid #ccc;
    padding-left: 5px;
  }
  form meter {
    width: 100%;
    border: none;
    padding-left: 0;
  }
  .btn {
    width: 100%;
    height: 40px;
    margin-top: 20px;
  }
</style>

2、结构

html

<body>
  <form action="">
    <fieldset>
      <legend>学生档案</legend>

      <label for="userName">姓名:</label>
      <input type="text" name="userName" id="userName" placeholder="请输入姓名" required />

      <label for="phone">手机号码：</label>
      <input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$" />

      <label for="email">邮箱地址：</label>
      <input type="email" name="email" id="email" />

      所属学院：
      <input type="text" list="school" name="college" id="college" placeholder="请选择" />
      <datalist id="school">
        <option>移动与前端开发学院</option>
        <option>IOS</option>
        <option>andriod</option>
        <option>c++</option>
      </datalist>

      <label for="score">入学成绩:</label>
      <input type="number" max="100" min="0" step="1" name="score" id="score" value="0" />

      <label for="level">基础水平</label>
      <!--通过low/high的值来设置meter的颜色-->
      <meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter>

      <label for="inTime">入学日期</label>
      <input type="date" name="inTime" id="inTime" />

      <label for="leaveTime">毕业日期</label>
      <input type="date" name="leaveTime" id="leaveTime" />

      <input type="submit" name="submit" id="submit" class="btn" />
    </fieldset>
  </form>
  <script>
    /*通过score成绩的输入，动态修改meter的颜色*/
    document.getElementById('score').oninput = function () {
      document.getElementById('level').value = this.value
    }
  </script>
</body>

说明：

<fieldset>标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到<fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<legend> 元素为 fieldset 元素定义标题（caption）。

▸多媒体

~~放弃的方式：~~

embed：直接插入视频文件，它的本质是调用本机上已经安装的软件，有兼容性问题。
flash 插件：需要安装 flash，需要另外学习 flash，增加了使用成本；苹果设备不支持 flash。

audio

属性：

属性	值	描述
src	url	要播放的音频的 URL。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

示例：

html

<audio src="../mp3/See.mp3" controls autoplay></audio>

video

属性：

属性	说明	描述
src	url	要播放的视频的 URL。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

width	pixels	设置视频播放器的宽度。
height	pixels	设置视频播放器的高度。（宽、高只设置一个，另一个自动调节）
poster	url	视频封面，当视频还没有完全下载，或用户还没有点击播放前的默认显示画面，默认显示当前视频文件的第一帧

示例：

html

<video src="../mp4/561902ae6ac6e6649.mp4" controls></video>

source

<source> 标签用于在 HTML5 中为 <audio> 和 <video> 标签提供多个媒体资源。它允许浏览器选择最合适的格式播放。每个 <source> 标签可以指定不同的文件和类型。

示例：

html

<!-- 考虑到不同浏览器支持的视频格式不同 -->
<video controls>
  <source src="../mp4/561902ae6ac6e6649.mp4" type="video/mp4" />
  <source src="../mp4/561902ae6ac6e6649.ogg" type="video/ogg" />
  您的浏览器不支持当前的视频格式
</video>

说明： 由于版权等原因，不同的浏览器可支持播放的格式是不一样的

HTMLMediaElement

HTMLMediaElement 是一个用于处理媒体（音频和视频）元素的接口，它是 HTML5 的一部分，提供了一系列操作和控制媒体播放的功能。这个接口是 HTMLAudioElement 和 HTMLVideoElement 的父类。

常用属性：
src：string，获取或设置媒体的 URL。
currentTime：double，获取或设置当前播放时间，以秒为单位。
duration：double，返回媒体的总时长（以秒为单位）。
paused：boolean，返回一个布尔值，指示媒体是否处于暂停状态。
ended：boolean，返回一个布尔值，指示媒体是否已播放完毕。
volume：double，获取或设置音量（范围从 0.0 到 1.0）。
muted：boolean，获取或设置媒体是否被静音。
playbackRate：double，获取或设置播放速度（默认为 1.0）。
readyState：number，返回媒体的准备状态（0-4），表示加载的进度。
常用方法：
play()：()，开始播放媒体。
pause()：()，暂停媒体播放。
load()：()，重新加载媒体。
canPlayType(type)：()，检查浏览器是否支持特定类型的媒体格式。
常用事件：
play：``，媒体开始播放。
canplay：``，用户可以开始播放视频或音频时触发。
pause：``，媒体暂停。
ended：``，媒体播放结束。
timeupdate：``，当前播放位置发生变化。
volumechange：``，音量或静音状态发生变化。
error：``，播放过程中发生错误。

案例：自定义播放器

1、页面结构

html

<h3 class="playerTitle">视频播放器</h3>
<div class="player">
  <video src="../mp3/test.mp4"></video>
    
  <!-- 播放控制条 -->
  <div class="controls">
    <a href="javascript:;" class="switch fa fa-pause"></a>
    <a href="javascript:;" class="expand fa fa-expand"></a>
    <div class="progress">
      <div class="bar"></div>
      <div class="loaded"></div>
      <div class="elapse"></div>
    </div>
    <div class="time">
      <span class="currentTime">00:00:00</span>
      \
      <span class="totalTime">00:00:00</span>
    </div>
  </div>
</div>

2、JS代码

暂停、播放切换
全屏
canplay中格式化显示视频总时长、显示视频标签
timeupdate中格式化显示当前播放时间、当前播放进度条
click中点击进度条跳转到指定播放进度【TODO】
ended中播放完毕后，重置播放状态【TODO】

html

<script src="../js/jquery.min.js"></script>
<script>
  /* 获取到播放器 */
  var video = $('video')[0]
  
  /* 暂停-播放切换 */
  $('.switch').click(function () {
    //1.切换样式，从暂停切换到播放，或者从播放切换到暂停
    $(this).toggleClass('fa-pause fa-play')
    //2.修改播放器的状态
    if (video.paused) {
      video.play()
    } else {
      video.pause()
    }
  })

  /* 全屏 */
  $('.expand').click(function () {
    video.webkitRequestFullScreen()
  })

  /* 当可以进行播放的时候触发oncanplay */
  video.oncanplay = function () {
    setTimeout(function () {
      video.style.display = 'block'
      //1.获取视频的总时长,结果以秒作为单位
      var duration = video.duration
      /*console.log(duration);*/ //256.278
      //2.计算 时  分  秒
      var hour = Math.floor(duration / 3600)
      var menite = Math.floor((duration % 3600) / 60)
      var second = Math.floor(duration % 60)
      //3.将时分秒信息填充到总时长span中
      //3.1 设置时分秒的格式
      hour = hour < 10 ? '0' + hour : hour
      menite = menite < 10 ? '0' + menite : menite
      second = second < 10 ? '0' + second : second
      //3.2填充
      $('.totalTime').html(hour + ':' + menite + ':' + second)
    }, 2000)
  }
    
  /* 当视频在播放的时候，会触发下下面的方法ontimeupdate */
  video.ontimeupdate = function () {
    //1.获取当前已经播放过了时间
    var elapseTime = video.currentTime
    //2.获取已过时间的时分秒
    var hour = Math.floor(elapseTime / 3600)
    var menite = Math.floor((elapseTime % 3600) / 60)
    var second = Math.floor(elapseTime % 60)
    //3.将时分秒信息填充到当前时长span中
    //3.1 设置时分秒的格式
    hour = hour < 10 ? '0' + hour : hour
    menite = menite < 10 ? '0' + menite : menite
    second = second < 10 ? '0' + second : second
    //3.2填充
    $('.currentTime').html(hour + ':' + menite + ':' + second)
    //4.设置当前<div class="elapse"></div>的宽度
    var valuePercent = 0
    if (elapseTime > 0) {
      valuePercent = (elapseTime / video.duration) * 100
      $('.elapse').css('width', valuePercent + '%')
    }
  }
</script>

3、效果

▸DOM 扩展

获取DOM元素

document.getElementsByClassName('class')：通过类名获取元素，以类数组形式存在。
document.querySelector('selector')：用于在 DOM 中选择元素的方法。它接受一个 CSS 选择器字符串，并返回匹配的第一个元素。
- js
```
const element = document.querySelector('selector');
```
  1
document.querySelectorAll('selector')：用于在 DOM 中选择元素的方法，功能与 querySelector() 类似，但它返回所有匹配的元素节点的 NodeList，而不是仅返回第一个匹配的元素。
- js
```
const elements = document.querySelectorAll('selector');
```
  1
- 注意： NodeList 不是一个真正的数组，但可以像数组一样使用索引访问元素后使用forEach()遍历。可以使用 Array.from() 或扩展运算符将其转换为数组，以便使用数组方法。
- js
```
// 1. 使用forEach遍历NodeList
elements.forEach((element) => {
    console.log(element);
});

// 2. 使用Array.from()转换为数组
const elementArray = Array.from(elements);
```
  1
  2
  3
  4
  5
  6
  7

类名操作

注意： 以下方法一次都只能操作一个样式。

Node.classList.add('class')：添加 class。
Node.classList.remove('class')：移除 class。只是移除样式，不是移除class属性。
Node.classList.toggle('class')：切换 class，有则移除，无则添加。
Node.classList.contains('class')：检测是否存在 class。
Node.classList.item(index)：获取class项。

自定义属性data-*

自定义属性：在 HTML5 中我们可以通过data-xxx=""自定义属性。例如：data-info="我是自定义属性"。
获取自定义属性值：通过Node.dataset['xxx']我们便可以获取到自定义的属性值。
注意： 当我们如下格式设置时，则需要以驼峰格式才能正确获取：data-my-name="itcast"，获取Node.dataset['myName']

案例： tab标签页

1、练习重点：

获取元素的方式
自定义属性的使用
类名操作：如添加类样式，移除类样式

2、效果图

3、结构

html

<div class="tabs">
  <div>
    <a href="javascript:;" data-target="local">国内新闻</a>
    <a href="javascript:;" data-target="global">国际新闻</a>
    <a href="javascript:;" data-target="sports">体育新闻</a>
    <a href="javascript:;" data-target="funny">娱乐新闻</a>
  </div>
</div>

html

<div>
  <section class="cont active" id="local">
    <ol>
      <li>习近p向2名晋升为上将军官颁发命令状</li>
      <li>郭声琨了解指导公安消防部队抗洪工作</li>
      <li>媒体：曾任职中办的这位官员仕途有变</li>
      <li>广西警方端掉地下兵工厂缴获大批炮弹</li>
      <li>她完美诠释奇葩考题夺金牌</li>
      <li>中国奥运选手在里约多次遭抢劫</li>
    </ol>
  </section>
  <section class="cont active" id="global">
    <ol>
      <li>河南再次发生矿难，死伤人数超过100</li>
      <li>禽流感次发生蔓延，温家宝指示</li>
      <li>南方大旱，农作物减产绝收面积上亩</li>
      <li>猪流感在广减产绝收发</li>
      <li>禽流感在全国多作物减产绝收面积上亩</li>
      <li>猪流感在广东群体性暴发</li>
    </ol>
  </section>
  <section class="cont" id="sports">
    <ol>
      <li>河南再次发生矿难，死伤人数超过10</li>
      <li>禽流感在全国多处农作物农延，温家宝指示</li>
      <li>南方大旱，农作物减产绝收面积上亩</li>
      <li>猪流感在广东群体性暴发</li>
      <li>禽流感在全农作物继续蔓延，温家宝指示</li>
      <li>南方大农作物减产绝收面积上亩</li>
      <li>猪流感在广东群体性暴发</li>
    </ol>
  </section>
  <section class="cont" id="funny">
    <ol>
      <li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>
      <li>四川原副省长李成云被查 5年前曾违纪又复出</li>
      <li>胡歌反对粉丝探班：以前请吃饭现在会黑脸</li>
      <li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>
      <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
      <li>国子监大街门匾现错字 已悬挂近10年(图)</li>
      <li>猪流感在广东群体性暴发</li>
    </ol>
  </section>
</div>

4、JS 代码

;(function (key) {
  //1.获取所有a标签
  var allA = document.querySelector('.tabs > div > a')
  //初始化操作
  for (var i = 0; i < allA.length; i++) {
    if (i == key) {
      allA[i].classList.add('active')
      var active = allA[i].dataset['target']
      document.querySelector('#' + active).style.display = 'block'
    }
    //2.循环遍历所有的a标签，为其添加点击事件
    allA[i].onclick = function () {
      //3.判断当前是否是当前已激活的页，如果是，则不进行处理
      if (this.classList.contains('active')) {
        return
      }
      //4.否则，则需要找到当前a标签对应的data-target属性，利用这个属性找到对应id的section进行样式的设置，让其显示
      //4.1先移除之前a标签的active类样式
      var aActive = document.querySelector('.active')
      aActive.classList.remove('active')
      //4.2让之前显示的section隐藏
      var currentTarget = aActive.dataset['target']
      document.querySelector('#' + currentTarget).style.display = 'none'
      //4.3为其添加active样式
      this.classList.add('active')
      //4.4获取当前被点击的a标签的data-target属性
      var value = this.dataset['target']
      //4.5让对应id的section显示--添加active类样式即可
      document.querySelector('#' + value).style.display = 'block'
    }
  }
})(0)

▸ 网络状态

我们可以通过 window.online 来检测，用户当前的网络状况，事件参数可以返回一个布尔值。

window.online：用户网络连接时被调用。
window.offline：用户网络断开时被调用。

示例：

/*网络连接时调用*/
window.addEventListener('online', function (e) {
  console.log('ok')
  console.log(e.type) // online
})

/*网络断开时调用*/
window.addEventListener('offline', function (e) {
  console.log('no')
  console.log(e.type) // offline
})

▸ 全屏

注意：以下方法和属性有兼容问题。

方法和属性：

Node.requestFullScreen()：用于发出异步请求使元素进入全屏模式。
document.cancelFullScreen()：退出全屏显示，只能使用 document 来退出全屏。
document.fullScreenElement：是否是全屏显示，只能使用 document 来判断全屏。

// 处理兼容问题
btn.onclick = function () {
  /* 能力测试：使requestFullScreen()兼容所有浏览器 */
  if (docuEle.requestFullScreen) {
    document.getElementById('img').requestFullScreen()
  } else if (docuEle.webkitRequestFullScreen) {
    document.getElementById('img').webkitRequestFullScreen()
  } else if (docuEle.mozRequestFullScreen) {
    document.getElementById('img').mozRequestFullScreen()
  } else if (docuEle.msRequestFullScreen) {
    document.getElementById('img').msRequestFullScreen()
  } else if (docuEle.oRequestFullScreen) {
    document.getElementById('img').oRequestFullScreen()
  }

  // 判断是否全屏
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement ||
    document.oFullscreenElement
  ) {
    alert('全屏')
  } else {
    alert('不是全屏')
  }
}

▸FileReader

FileReader 是一个 Web API，允许网页应用异步读取用户的文件。它主要用于处理用户通过 <input type="file"> 上传的文件。

注意：通过实例方法读取到的结果可以在load事件函数中通过reader.result 或者e.target.result获取到。

实例方法
new FileReader()：()，构造函数创建一个新的 FileReader 对象。
- 返回：
- reader：FileReader，FileReader实例对象。
- js
```
const reader = new FileReader();
```
  1

reader.readAsText()：(blob, encoding?)，用于将文件读取为文本。

blob：File | Blob，要读取的 File 对象或 Blob 对象。
encoding?：string，默认：UTF-8，指定文件的编码。

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
        console.log(e.target.result); // 输出文件内容
    };

    reader.readAsText(file); // 读取文件
});

reader.readAsDataURL()：(blob)，用于将文件读取为一个 Data URL。这种格式通常用于在网页上嵌入图像或其他类型的文件。

blob：File | Blob，要读取的 File 对象或 Blob 对象。

html

<!-- 示例：图片即使预览 -->

<input type="file" id="fileInput" accept="image/*">
<img id="preview" src="" alt="Image preview" style="display: none;">

<script>
    const input = document.getElementById('fileInput');
    const preview = document.getElementById('preview');

    input.addEventListener('change', (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = (e) => {
            preview.src = e.target.result; // 设置图片源为读取的 Data URL
            preview.style.display = 'block'; // 显示图片
        };

        reader.readAsDataURL(file); // 读取文件
    });
</script>

readAsArrayBuffer()：(blob)，用于将文件读取为 ArrayBuffer 对象。这种方法适用于处理二进制数据。

blob：File | Blob，要读取的 File 对象或 Blob 对象。

html

<input type="file" id="fileInput">
<pre id="output"></pre>

<script>
    const input = document.getElementById('fileInput');
    const output = document.getElementById('output');

    input.addEventListener('change', (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = (e) => {
            const arrayBuffer = e.target.result; // 获取 ArrayBuffer
            const bytes = new Uint8Array(arrayBuffer); // 将 ArrayBuffer 转换为 Uint8Array
            const hexString = Array.from(bytes).map(byte => byte.toString(16).padStart(2, '0')).join(' '); // 转换为十六进制字符串
            output.textContent = hexString; // 显示十六进制字符串
        };

        reader.onerror = (e) => {
            output.textContent = 'Error reading file.';
        };

        reader.readAsArrayBuffer(file); // 读取文件
    });
</script>

reader.abort()：()，用于中止文件读取操作。调用此方法可以停止当前的读取进程，并触发 onabort 事件。

<input type="file" id="fileInput">
<button id="abortButton">Abort</button>
<pre id="output"></pre>

<script>
    const input = document.getElementById('fileInput');
    const abortButton = document.getElementById('abortButton');
    const output = document.getElementById('output');
    let reader;

    input.addEventListener('change', (event) => {
        const file = event.target.files[0];
        reader = new FileReader();

        reader.onload = (e) => {
            output.textContent = e.target.result; // 显示文件内容
        };

        reader.onabort = () => {
            output.textContent = 'File reading aborted.'; // 读取被中止
        };

        reader.readAsText(file); // 读取文件
    });

    abortButton.addEventListener('click', () => {
        if (reader) {
            reader.abort(); // 中止文件读取
        }
    });
</script>

事件
load：event，读取成功完成时触发。
error：event，当读取由于错误而失败时触发。
abort：event，当读取被中止时触发，例如因为程序调用了 FileReader.abort() 方法。
progress：event，读取数据时持续触发。
loadend：event，读取完成时触发，无论成功与否。
loadstart：event，读取开始时触发。

▸ 拖拽

拖拽（Drag and Drop）功能允许用户通过鼠标操作在网页上移动元素。这一特性增强了用户交互体验，可以用于文件上传、列表排序等场景。

API

1、设置可拖拽元素：在待拖拽元素上添加 draggable 属性，设为 true。链接和图片默认是可拖动的，不需要 draggable 属性

2、监听事件：

被拖拽元素上触发的事件：
dragstart：(e) => void，用户开始拖动元素时触发。
dragend：(e) => void，用户完成元素拖动后触发。
drag：(e) => void，元素正在拖动时触发（持续触发）。每隔 350 毫秒触发一次。
dragleave：(e) => void，当鼠标离开拖拽元素时调用。
目标元素上触发的事件：
dragenter：(e) => void，当被鼠标拖动的对象进入其容器范围内时触发此事件。
dragleave：(e) => void，当被鼠标拖动的对象离开其容器范围内时触发此事件。
dragover：(e) => void，当某被拖动的对象在另一对象容器范围内拖动时触发此事件（持续触发）。
drop：(e) => void，在一个拖动过程中，释放鼠标键时触发此事件。
- 注意：浏览器默认会阻止drop事件触发，必须在dragover中阻止浏览器的默认行为

3、事件对象e：

扩展： 区分-currentTarget、target

e：DragEvent ，继承 MouseEvent 和 Event，用于处理拖拽操作的事件对象，包含了与拖拽相关的信息和属性。
- currentTarget：``，表示当前正在处理事件的元素，即事件监听器所附加的元素。
- target：``，表示触发事件的最具体的元素，即用户实际操作的元素。
- dataTransfer：DataTransfer，用于存储和管理拖拽过程中传输的数据。可以设置或获取要传输的数据。
  - setData()：(format, value)，设置要传输的数据。
    - format：text/plain | text/uri-list，拖动数据的类型。
    - value：string，要添加的数据。
  - getData()：(format)，获取要传输的数据。只能在drop事件中取值。
    - format：text/plain | text/uri-list，拖动数据的类型。
  - effectAllowed：copy | move | link，表示当前拖动操作允许的效果。通过设置此属性，可以控制用户在拖拽时的行为。
  - dropEffect：none | copy | move | link，表示放置操作的效果。这个属性可以在拖拽结束时被设置，以指示放置的实际效果。
- html
```
<div id="draggable" draggable="true">拖动我</div>
<div id="dropzone">放到这里</div>

<script>
    const draggable = document.getElementById('draggable');
    const dropzone = document.getElementById('dropzone');

    draggable.addEventListener('dragstart', (event) => {
        event.dataTransfer.setData('text/plain', '拖动的数据');
        event.dataTransfer.effectAllowed = 'move'; // 设置允许的效果
    });

    dropzone.addEventListener('dragover', (event) => {
        event.preventDefault(); // 允许放置
        event.dataTransfer.dropEffect = 'copy'; // 设置放置效果
    });

    dropzone.addEventListener('drop', (event) => {
        event.preventDefault();
        const data = event.dataTransfer.getData('text/plain');
        dropzone.textContent = `放置的内容: ${data}`;
    });
</script>
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23

基本实现

html

    <div class="container">
      <div class="div1">
        <p class="p1" draggable="true">拖拽我</p>
      </div>
      <div class="div2"></div>
    </div>

    <script>
      // 实现元素拖拽
      window.onload = function () {
        let p1 = document.querySelector('.p1')
        let div1 = document.querySelector('.div1')
        let div2 = document.querySelector('.div2')

        // 被拖拽元素
        p1.addEventListener('dragstart', function (e) {
          console.log('dragstart')
        })
        p1.addEventListener('drag', function (e) {
          // console.log('drag...')
        })
        p1.addEventListener('dragend', function (e) {
          console.log('dragend')
        })
        p1.addEventListener('dragleave', function (e) {
          console.log('被拖拽元素：dragleave')
        })

        // 目标元素
        div2.addEventListener('dragenter', function (e) {
          console.log('dragenter')
        })
        div2.addEventListener('dragover', function (e) {
          // 阻止默认行为
          e.preventDefault()
          // console.log('dragover...')
        })
        div2.addEventListener('dragleave', function (e) {
          console.log('目标元素：dragleave')
        })
        div2.addEventListener('drop', function (e) {
          console.log('drop')
          // 添加p1到div2中
          div2.appendChild(p1)
        })
      }
    </script>

通用-多元素拖拽

思路：

使用document代替了p1、div1、div2，这里利用了事件的捕获特性。
通过e.target获取当前事件发生的元素对象。
通过e.dataTransfer.setData()和e.dataTransfer.getData()方法实现不同拖拽事件之间的数据传递。

html

  <div class="container">
      <div class="div1">
        <p class="item p1" draggable="true">拖拽我</p>
        <p class="item p2" draggable="true">拖拽我2</p>
      </div>
      <div class="div2"></div>
      <div class="div3"></div>
    </div>

    <script>
      // 实现元素拖拽
      window.onload = function () {
        let div1 = document.querySelector('.div1')
        let div2 = document.querySelector('.div2')

        // 被拖拽元素
        document.addEventListener('dragstart', function (e) {
          console.log('dragstart')
          e.dataTransfer.setData('text/plain', e.target.classList[1])
        })
        document.addEventListener('drag', function (e) {
          // console.log('drag...')
        })
        document.addEventListener('dragend', function (e) {
          console.log('dragend')
        })
        document.addEventListener('dragleave', function (e) {
          console.log('被拖拽元素：dragleave')
        })

        // 目标元素
        document.addEventListener('dragenter', function (e) {
          console.log('dragenter')
        })
        document.addEventListener('dragover', function (e) {
          // 阻止默认行为
          e.preventDefault()
          // console.log('dragover...')
        })
        document.addEventListener('dragleave', function (e) {
          console.log('目标元素：dragleave')
        })
        document.addEventListener('drop', function (e) {
          console.log('drop')
          // 添加被拖拽元素到目标元素中
          let pClass = e.dataTransfer.getData('text/plain')
          e.target.appendChild(document.querySelector('.' + pClass))
        })
      }
    </script>

▸ 地理定位

地理定位 API（Geolocation API）是一个用于获取用户地理位置信息的浏览器接口。它允许网页应用访问设备的位置信息，适用于需要定位服务的应用场景，例如地图服务、位置共享和基于位置的推荐等。

~~获取地理信息方式：~~

浏览器会自动以最优方式去获取用户地理信息。

~~安全性：~~

HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。

注意： 在国内即使允许了获取用户位置信息，也是无法获取到定位信息的(GFW)，只有在手机上可以获取到定位信息。

API

navigator.geolocation.getCurrentPosition()：(successCB, errorCB?, options?)，获取用户当前位置。

successCB：(position)=>void，当成功获取位置信息时调用。
- position：{coords}，位置信息对象。
  - coords：{latitude,longitude,accuracy,altitude?,...}，经纬度信息对象。
    - latitude：``，纬度。
    - longitude：``，经度。
    - accuracy：``，精度。
    - altitude?：``，海拔高度。
    - ...：``，
errorCB?：(err)=>void，当获取位置失败时调用。
- err：{code, message}，错误对象。
options?：{enableHighAccuracy,timeout,maximumAge}，配置对象，包含以下属性：
- enableHighAccuracy：boolean，默认：false，是否尝试获取高精度的位置。
- timeout：number，请求超时时间（以毫秒为单位）。超时则调用错误回调。
- maximumAge：numbers，指定缓存的最大年龄（以毫秒为单位），如果设置为 0，则不使用缓存的位置信息。

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            const { latitude, longitude, accuracy } = position.coords;
            console.log(`Latitude: ${latitude}, Longitude: ${longitude}, Accuracy: ${accuracy} meters`);
        },
        (error) => {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    console.error("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    console.error("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    console.error("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    console.error("An unknown error occurred.");
                    break;
            }
        },
        {
        	enableHighAccuracy: true,
        	timeout: 5000, // 5秒超时
        	maximumAge: 0 // 不使用缓存
    	}
    );
} else {
    console.log("Geolocation is not supported by this browser.");
}

navigator.geolocation.watchPosition()：(successCB, errorCB?, options?)，用于持续监测用户当前位置的方法。当用户位置发生变化时，它会不断调用指定的回调函数。
- successCB：(position)=>void，当成功获取位置信息时调用。
  - position：{coords}，位置信息对象。
    - coords：{latitude,longitude,accuracy,altitude?,...}，经纬度信息对象。
      - latitude：``，纬度。
      - longitude：``，经度。
      - accuracy：``，精度。
      - altitude?：``，海拔高度。
      - ...：``，
- errorCB?：(err)=>void，当获取位置失败时调用。
  - err：{code, message}，错误对象。
- options?：{enableHighAccuracy,timeout,maximumAge}，配置对象，包含以下属性：
  - enableHighAccuracy：boolean，默认：false，是否尝试获取高精度的位置。
  - timeout：number，请求超时时间（以毫秒为单位）。超时则调用错误回调。
  - maximumAge：numbers，指定缓存的最大年龄（以毫秒为单位），如果设置为 0，则不使用缓存的位置信息。
- 返回：
- id：，返回一个 ID，如要取消监听可以通过 Geolocation.clearWatch() 传入该 ID 实现取消的目的。
- js
```
if (navigator.geolocation) {
    const watchId = navigator.geolocation.watchPosition(
        (position) => {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
        },
        (error) => {
            console.error(`Error: ${error.message}`);
        }
    );

    // 如果需要停止监听，可以调用 clearWatch
    // navigator.geolocation.clearWatch(watchId);
} else {
    console.log("Geolocation is not supported by this browser.");
}
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
navigator.geolocation.clearWatch()：(id)，用于注销之前使用 Geolocation.watchPosition() 注册的位置监听器或错误监听器。
- id：，希望移除的监听器所对应的 Geolocation.watchPosition() 返回的 ID 值。
- 示例：见上面。

百度地图

百度地图坐标拾取器

百度地图文档

web 存储

需求：
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以 document.cookie 来进行存储的，但是由于其存储大小只有 4k 左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5 规范则提出解决方案
HTML5 提供的解决方案：
a) window.sessionStorage b) window.localStorage
特点：
a) 设置、读取方便 b) 容量较大，sessionStorage 约 5M、localStorage 约 20M c) 只能存储字符串，可以将对象 JSON.stringify() 编码后存储

Window.sessionStorage

特点
- 生命周期为关闭浏览器窗口 : 相当于存储在当前页面的内内存中
- 在同一个窗口下数据可以共享(在当前标签页面下可以获取到，换另外一个标签页面下不能获取到)
方法介绍：(两种存储方式的方法一致)
- setItem(key,value) : 设置数据，以键值对的方式
- getItem(key) : 通过指定的键获取对应的值内容，如果没有该值，则获取到 null
- removeItem(key) : 删除指定的 key 及对应的值内容，如果没有该 key 的话，不会报错，也不会删除数据
- clear() : 清空所有存储内容
使用说明

html

<script>
  var userData = document.getElementById('userName')
  //存储数据
  document.getElementById('setData').onclick = function () {
    window.sessionStorage.setItem('userName', userData.value)
  }

  //获取数据
  document.getElementById('getData').onclick = function () {
    var value = window.sessionStorage.getItem('userName')
    alert(value)
  }
</script>

Window.localStorage

特点
- 永久生效，除非手动删除：存储在硬盘上
- 可以多窗口共享。但是不能跨浏览器
使用说明

html

<script>
  var userData = document.getElementById('userName')
  //存储数据
  document.getElementById('setData').onclick = function () {
    window.localStorage.setItem('userName', userData.value)
  }

  //获取数据
  document.getElementById('getData').onclick = function () {
    var value = window.localStorage.getItem('userName')
    alert(value)
  }

  //删除数据
  document.getElementById('removeData').onclick = function () {
    window.localStorage.removeItem('userName')
  }
</script>

▸ 应用缓存(弃用)

应用缓存（Application Cache）是 HTML5 提供的一种机制，允许 web 应用程序在离线时仍然可用。

注意： 应用缓存被标记为已弃用，强烈建议使用 Service Workers 作为替代方案。

~~工作原理：~~ 通过创建一个清单文件（manifest），列出需要缓存的资源。当用户首次访问网页时，浏览器会下载这些资源并存储在本地。后续访问会直接使用缓存的资源，而不是从服务器重新加载。

~~优点：~~

可配置需要缓存的资源。
网络无连接应用仍可用。
本地读取缓存资源，提升访问速度，增强用户体验。
减少请求，缓解服务器负担。

~~基本使用：~~

1、创建清单文件xxx.appcache，文件中包括要缓存的资源列表、过期策略等。

CACHE MANIFEST
# 上面的一句代码是固定的，且必须在第一行

# 后面写注释

# 需要缓存的文件清单列表
CACHE:
../images/l1.jpg
../images/l2.jpg
* # 缓存所有文件

# 配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/l3.jpg

# 配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
/ ../images/banner_1.jpg # /代表替代所有找不到的文件

CACHE MANIFEST

manifest文件格式：

CACHE MANIFEST：开始。
CACHE：需要缓存的文件清单列表。
NETWORK：配置每一次都需要重新从服务器获取的文件清单列表。
FALLBACK：配置如果文件无法获取则使用指定的文件进行替代。

2、在 HTML 中引用清单文件

html

<!DOCTYPE html>
<html manifest="example.appcache">
<head>
    <title>My App</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <h1>Welcome to My App</h1>
</body>
</html>

注意：

IIS需要配置： manifest文件需要配置正确的 MIME-type，即 text/cache-manifest。必须在 web 服务器上进行配置。
CACHE可以省略，这种情况下将需要缓存的资源写在 CACHE MANIFEST。
可以指定多个 CACHE:、 NETWORK:、FALLBACK:，无顺序限制。
只有当 demo.appcache 文件内容发生改变时或者手动清除缓存后，才会重新缓存。
chrome 可以通过 chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

~~更新缓存条件：~~

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，也需要更新 manifest 文件，也就意味着一旦应用被缓存，它就会保持缓存直到发生下列情况

用户清空浏览器缓存。
manifest文件被修改（更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法）。
由程序来更新应用缓存。

CSS3

CSS3 简介

如同人类的的进化一样，CSS3 是 CSS2 的“进化”版本，在 CSS2 基础上，增强或新增了许多特性，弥补了 CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷动画圆角阴影边框图片 …

Css 当 js 用

Js 当后台语言用

如何对待？

坚持渐进增强原则
考虑用户群体
遵照产品的方案
听 BOSS 的

如何使用手册

[] 表示“可选项”
|| 表示“或者”
| 表示“多选一”
? 表示 0 个或 1 个
* 表示 0 个或多个
{} 表示范围

CSS3 现状

1、浏览器支持程度差，需要添加私有前缀(移动端)

a) requestFullScreen b) webkitRequestFullScreen c) mozRequestFullScreen d) msRequestFullScreen e) oRequestFullScreen

2、移动端支持优于 PC 端

3、不断改进中

4、应用相对广泛

选择器

CSS3 新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3 选择器与 jQuery 中所提供的绝大部分选择器兼容

1、属性选择器：

E[attr] 表示查找拥有指定的 attr 属性

html

div[class]

E[attr=val] 表示查找拥有指定的 attr 属性，并且属性值为 val 的 E 标签

html

div[class=mydemo]

E[attr*=val] 表示查找拥有指定的 attr 属性，并且属性值里包含 val 字符并且在“任意”位置

html

div[class*=mydemo]

E[attr^=val] 表示查找拥有指定的 attr 属性，并且属性值里包含 val 字符并且在“开始”位置

html

div[class^=mydemo]

E[attr$=val] 表示查找拥有指定的 attr 属性，并且属性值里包含 val 字符并且在“结束”位置

html

div[class$=demos]

2、伪类选择器-伪元素选择器

之前学习的：a:hover a:link a:active a:visited
以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类
- E:first-child: 查找 E 这个元素的父元素的第一个子元素 E（约束类型：E:first-of-type）
- E:last-child: 最后一个子元素（约束类型：E:last-of-type）
- E:nth-child(n): 第 n 个子元素，计算方法是 E 元素的全部兄弟元素（约束类型：E:nth-of-type(n)）
- E:nth-last-child(n): 同 E:nth-child(n) 相似，只是倒着计算（约束类型：E:nth-last-of-type(n)）
- E:nth-child(even): 所有的偶数
- E:nth-child(odd): 所有的奇数
- E:nth-of-type(n): 指定类型
- E:empty 选中没有任何子节点的 E 元素，注意，空格也算子元素
- E:target 结合锚点进行使用，处于当前锚点的元素会被选中
- 重点说明：n 遵循线性变化，其取值 0、1、2、3、4、... 但是当 n<=0 时，选取无效
- 案例代码：

css

/*第一个li元素*/
li:first-child {
  color: red;
}
/*最后一个元素*/
li:last-child {
  color: green;
}
/*获取第10个元素*/
li:nth-child(10) {
  color: orange;
}
/*获取倒数第3个li元素*/
li:nth-last-child(3) {
  color: purple;
}
/*获取索引顺序为6的倍数的li元素*/
li:nth-child(6n) {
  text-decoration: underline;
  border: 1px solid red;
}
/*获取所有索引为偶数的li元素*/
li:nth-child(even) {
  border: 1px solid black;
}
/*获取前5个li元素*/
li:nth-child(-n + 5) {
  background-color: #ddd;
}

n 可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等

3、伪元素选择器：

a) 重点：E::before、E::after

是一个行内元素，需要转换成块:display: block float: position:
必须添加 content,哪怕不设置内容，也需要 content:””
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下 E:after、E:before 会被自动识别为 E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理
E::before: 定义在一个元素的内容之前插入content属性定义的内容与样式
E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式
后期无法通过 JS 来操作它们
注意：
- IE6、IE7 与 IE8（怪异模式 Quirksmode）不支持此伪元素
- CSS2 中 E:before 或者 E:after，是属于伪类的，并且没有伪元素的概念，CSS3 中提出伪元素的概念 E::before 和 E::after，并且归属到了伪元素当中，伪类里就不再存在 E:before 或者 E:after 伪类

b) E::first-letter 文本的第一个字母（不是单词）或字(不是词组)

c) E::first-line 文本第一行，如果设置了::first-letter，那么就无法设置它的样式

d) E::selection 可改变当前选中文本的样式，不能改变 font-size

颜色设置

11111111 00000000 0-255

HTML5 中添加了一些新的颜色的表示方式

1、 RGBA：说得简单一点就是在 RGB 的基础上加进了一个通道 Alpha。RGBA 在 RGB 的基础上多了控制 alpha 透明度的参数。以上 R、G、B 三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% -100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A 参数，取值在 0~1 之间，不可为负值。RGBA 比元素设置 CSS 的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度

语法
- R：红色值。正整数 | 百分数
- G：绿色值。正整数 | 百分数
- B：蓝色值。正整数| 百分数
- A：透明度。取值 0~1 之间
使用示例

css

div {
  width: 200px;
  height: 200px;
  background-color: rgba(10, 20, 245, 0.5);
  color: white;
}

2、 HSLA(H,S,L,A)：

此色彩模式与HSL相同，只是在HSL模式上新增了 Alpha 透明度
语法
- H：Hue(色调,色相)。0(或 360)表示红色，120 表示绿色，240 表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360,过渡为：(红橙黄绿青蓝紫红)
- S：Saturation(饱和度)。取值为：0.0% - 100.0%
- L：Lightness(亮度)。取值为：0.0% - 100.0%，50%是平衡值
- A：Alpha 透明度。取值 0~1 之间。
示例

css

span {
  width: 200px;
  height: 200px;
  display: block;
  background-color: hsla(360, 100%, 50%, 0.6);
  color: white;
}

3、关于透明度的补充说明

a) opacity 只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度 b) transparent 不可调节透明度，始终完全透明 c) 使用 rgba 来控制颜色，相对 opacity ，子元素不具有继承性

文本(shadow 阴影)

text-shadow还没有出现时，大家在网页设计中阴影一般都是用 photoshop 做成图片，现在有了 css3 可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感

1、语法

css

text-shadow: none |<length> none | [<shadow>, ] \* <shadow> 或none | <color> [, <color>];

也就是

css

text-shadow: [颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)], [颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(
      Blur
    )]...;

或者

css

text-shadow: [x轴(XOffset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)], [x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(
      Color
    )]...;

2、取值

a) <length>：长度值，可以是负值。用来指定阴影的延伸距离。其中 X Offset 是水平偏移值，Y Offset 是垂直偏移值 b) <shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离 c) <color>：指定阴影颜色，也可以是 rgba 透明色。 d) 图示

3、说明

可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color 中 X-Offset 表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset 是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur 是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将 Blur 值设置为 0；Color 是指阴影的颜色，其可以使用 rgba 色

4、一些效果案例代码

css

.demo {
  width: 600px;
  padding: 30px;
  background-color: #666;
  margin: 20px auto;
  text-align: center;
  font: bold 80px/100% '微软雅黑';
  color: #fff;
}
/*侧阴影效果*/
.demo1 {
  text-shadow: 2px 2px 2px #ff0000;
}
/*辉光效果*/
.demo2 {
  text-shadow: 0 0 30px red;
}
/*多层辉光效果*/
.demo3 {
  text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 40px #fff, 0 0 70px red;
}
/*苹果经典效果*/
.demo4 {
  color: black;
  text-shadow: 0 1px 1px #fff;
}
/*浮雕效果*/
.demo5 {
  color: #ccc;
  text-shadow: -1px -1px 0px #fff, -2px -2px 0px #eee, 1px 1px 0px #444, 2px 2px 0px #333;
}
/*模糊字效果*/
.demo6 {
  color: transparent; /*将本身设置为透明*/
  text-shadow: 0 0 6px #ff9966;
}

盒模型

css

box-sizing: content-box     // 实际宽高 = width + border + padding
box-sizing: border-box      // 实际宽高 = width

1、在默认情况下，CSS 设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性。例如：

padding + border+ width = 盒子的宽度
padding + border+ height = 盒子的高度

很明显，这不直观，很容易出错，造成网页中其它元素的错位。

2、 CSS3 中可以通过 box-sizing 来指定盒模型，即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变

content-box:对象的实际宽度等于设置的 width 值和 border、padding 之和
border-box：对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度

3、浏览器的兼容性

IE8 及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的 IOS 和 Android 浏览器也需要加上-webkit-

边框圆角

border-radius 可以通过值来定义样式相同的角，也对每个角分别定义

1、值的说明：

css

border-radius：*px: 将创建四个大小一样的圆角
border-radius: *px *px: 第一个值表示左上角、右下角；第二个值表示右上角、左下角
border-radius: *px *px *px: 第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角
border-radius: *px *px *px *px: 四个值分别表示左上角、右上角、右下角、左下角

2、单个圆角的设置：除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3 提供四个单独的属性：

css

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

这四个属性都可以同时设置 1 到 2 个值。如果设置 1 个值，表示水平半径与垂直半径相等。如果设置 2 个值，第一个值表示水平半径，第二个值表示垂直半径

3、补充：创建两个值的非对称圆角还有一种书写方式：如 border-radius:20px/10px;表示在水平方向上 20px,在垂直方向上 10px;具体说明如下：可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的 1~4 个用来设置横轴半径（分别对应横轴 1、2、3、4 位置），“/”后面 1~4 个参数用来设置纵轴半径（分别对应纵轴 1、2、3、4 位置）

4、示例代码

css

div {
  width: 200px;
  /*height: 200px;*/
  height: 100px;
  /*为椭圆设置的高度*/
  background-color: red;
  margin: 100px auto;
  /*四个方向的圆角值相同*/
  /*border-radius: 100px;*/
  /*左上，右下为20px 右上，左下为40px*/
  /*border-radius: 20px 40px;*/
  /*左上为20px 右上，左下为40px  右下为80px*/
  /*border-radius: 20px 40px 80px;*/
  /*左上：20px 右上：40px 右下：80px  左下：100px*/
  /*border-radius: 20px 40px 80px 100px;*/
  /*设置某一个方向上的圆角*/
  /*border-bottom-left-radius: 100px;*/
  /*非对称圆角--制作椭圆*/
  border-top-left-radius: 100px 50px;
  border-top-right-radius: 100px 50px;
  border-bottom-right-radius: 100px 50px;
  border-bottom-left-radius: 100px 50px;
  /*非对称圆角的简写方式*/
  /*四个方向上都是一致的非对称圆角*/
  /*border-radius: 100px/50px;*/
  /*也可以这样*/
  /*border-radius: 100px 80px 60px 20px/20px 60px 80px 100px;*/
  /*等价于：*/
  /*
    border-top-left-radius: 100px 20px;
    border-top-right-radius: 80px 60px;
    border-bottom-right-radius: 60px 80px;
    border-bottom-left-radius: 20px 100px;
    */
}

案例：android 机器人

1、效果

2、 Div 结构

html

<div class="content">
  <!--身体头部-->
  <div class="header"></div>
  <!--身体主体-->
  <div class="body"></div>
  <!--脚-->
  <div class="footer"></div>
</div>

3、样式：主要使用伪元素选择器

html

<style>
  * {
    padding: 0;
    margin: 0;
  }
  body {
    background-color: #ccc;
  }
  .content {
    width: 500px;
    height: 450px;
    margin: 50px auto;
    background-color: #fff;
    padding-top: 30px;
  }
  .header {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    background-color: green;
    border-radius: 100px 100px 0 0;
    position: relative;
  }
  .header::before,
  .header::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 10px;
    top: 40px;
  }
  .header::before {
    left: 50px;
  }
  .header::after {
    right: 50px;
  }
  .body {
    width: 200px;
    height: 200px;
    background-color: green;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 0 0 20px 20px;
    position: relative;
  }
  .body::before,
  .body::after {
    content: '';
    position: absolute;
    top: 10px;
    width: 30px;
    height: 150px;
    background-color: green;
    border-radius: 10px;
  }
  .body::before {
    left: -50px;
  }
  .body::after {
    right: -50px;
  }
  .footer {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
  }
  .footer::before,
  .footer::after {
    content: '';
    position: absolute;
    top: 0px;
    width: 35px;
    height: 80px;
    background-color: green;
    border-radius: 0 0 40px 40px;
  }
  .footer::before {
    left: 40px;
  }
  .footer::after {
    right: 40px;
  }
</style>

边框阴影

1、 box-shadow 属性向边框添加一个或多个阴影。

2、语法：box-shadow: h-shadow v-shadow blur spread color inset;

css

box-shadow: h v [blur] [spread] [color] [inset|outset];

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

3、属性值说明：

值	描述
h-shadow	必需。水平阴影的位置。允许负值。horizontal
v-shadow	必需。垂直阴影的位置。允许负值。vertical
blur	可选。模糊距离。
spread	可选。阴影的尺寸。值越大，阴影的扩散面积越大
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

4、在添加阴影的时候，最好考虑到不同浏览器的兼容

5、案例示例：

css

/*为item添加边框阴影*/
div[class='item']:nth-child(-n + 4) {
  box-shadow: 1px 1px 3px 0px #bbb;
}

/*可以同时添加多个边框阴影*/
div[class='item']:last-child {
  box-shadow: 1px 1px 2px #ff0000 inset, -1px -1px 2px #ff0000 inset;
}

边框图片

1、功能：将图片规定为包围 div 元素的边框

a) 定义和用法： border-image 属性是一个简写属性，用于设置以下属性

css

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

b) 属性说明：

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。（裁剪的尺寸，一定不加单位，顺序：上右下左）
border-image-width	图片边框的宽度。（需要加单位）（不是边框的宽度）（该属性默认的是 border 的宽度）
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)，默认拉伸。

c) 边框图片切图原理

把四个角切出去（九宫格的由来），中间部分可以铺排，拉伸或者环绕

2、案例：任意拉伸的按钮：通过一个按钮的背景图片制作出任意大小的按钮，实现背景填充效果

3、效果

4、代码

css

.downLoad {
  width: 80px;
  height: 30px;
  display: block;
  text-align: center;
  line-height: 30px;
  border: 1px solid #ccc;
  /*设置图片边框背景*/
  border-image: url('../images/btn_bg.png');
  /*设置裁切区域，同时设置填充模式*/
  border-image-slice: 10 fill;
  /*设置边框的大小，这个一般与裁切区域大小一致，否则就发生缩放*/
  border-image-width: 10px;
  /*设置边框的重复模式*/
  border-image-repeat: round;
}

渐变

渐变是 CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

1、 linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果

a) 语法

css

linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

background: linear-gradient( [point|angle,] color stop, color stop [, color stop] )

b) 参数说明

第一个参数表示线性渐变的方向，
- to left：设置渐变为从右到左。相当于: 270deg;
- to right：设置渐变从左到右。相当于: 90deg;
- to top：设置渐变从下到上。相当于: 0deg;
- to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如 45deg
第二个参数是起点颜色,可以指定颜色的位置
第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变

c) 示例

css

div {
  width: 400px;
  height: 400px;
  margin: 100px auto;
  background: linear-gradient(0deg, red, orange, yellow, green, #00ffff, blue, purple);
}

2、 radial-gradient 径向渐变指从一个中心点开始沿着四周产生渐变效果

a) 语法

css

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

background: radial-gradient( [shape [size] AT positionX [positionY],] color, color [,color]* )

b) 取值

position: 确定圆心的位置。如果提供 2 个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为 50%，即 center
shape: 渐变的形状，ellipse 表示椭圆形，circle 表示圆形。默认为 ellipse，如果元素形状为正方形的元素，则 ellipse 和 circle 显示一样
size: 渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角 farthest-corner
color: 指定颜色。Rgba hsla

c) 一些案例示例代码

css

.div1 {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  /*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色*/
  background: radial-gradient(circle at center, red, blue);
}
.div2 {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  margin: 10px auto;
  /*设置径向渐变效果:从指定坐开始，从一种颜色到另外一种颜色*/
  background: radial-gradient(circle at 50px 50px, #eeffff, #334455);
}
.div3 {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  margin: 10px auto;
  /*设置径向渐变效果:从指定坐标开始，从一种颜色到另外一种颜色，同时指定颜色的位置*/
  background: radial-gradient(circle at 50px 50px, #eeffff 0%, #666 70%, rgba(33, 33, 33, 0.8) 80%);
}
/*指定渐变的形状*/
.div4 {
  width: 200px;
  height: 100px;
  margin: 10px auto;
  /*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色*/
  background: radial-gradient(ellipse at center, red, green, blue);
}
/*指定渐变的size*/
.div5 {
  width: 200px;
  height: 100px;
  margin: 10px auto;
  /*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色,同时指定了大小为渐变到最近的边*/
  background: radial-gradient(circle closest-side at center, red, green, blue);
}
/*使用系统提供的位置设置*/
.div6 {
  width: 200px;
  height: 100px;
  margin: 10px auto;
  /*设置径向渐变效果:从右上角点开始，从一种颜色到另外一种颜色*/
  background: radial-gradient(circle at top right, red, green, blue);
}

3、重复渐变

css

background: repeating-radial-gradient( [shape [size] AT positionX [positionY],] color, color [,color]* )

background: repeating-linear-gradient( [point|angle,] color stop, color stop [, color stop] )

背景

background-size: 属性
background-origin:
background-clip:

1、 background-size 属性：

CSS 里的 background-size 属性能够让程序员决定如何在指定的元素里展示,它通过改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。往往建议不要将图放大，如果有需要，尽量让图缩小

a) 语法：

css

background-size: auto(原始图片大小) || <number>(数值) || <percentage>(百分比) || cover(放大铺满) || contain(缩小铺满);

b) 参数说明：

auto：此值为默认值，保持背景图片的原始高度和宽度;
<number>：此值设置具体的值，可以改变背景图片的大小;
<percentage>：此值为百分值，可以是 0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
cover：（保证容器被填满，没有空白区域）此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用 background-repeat 来实现时，我们就可以采用 cover;将背景图片放大到适合容器的大小
contain：（保证图片全部显示）此值刚好与 cover 相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用 contain 将图片缩小到适合容器大小为止。
当 background-size 取值为 number 和 percentage 时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于 auto，但这里的 auto 并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。 c) 使用案例

css

* {
  padding: 0;
  margin: 0;
}
.div1 {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  /*默认的背景设置，会让背景图片从左上角原点位置进行设置，不会自动的让背景图片适应容器的大小从而进行缩放*/
  background: url('../images/1.jpg');
}
.div2 {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  background: url('../images/1.jpg');
  /*设置背景图片的大小,指定大小，有可能会让背景图片变形*/
  background-size: 200px 200px;
}
.div3 {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  background: url('../images/1.jpg');
  /*设置背景图片的大小,cover:会让宽或者高适应当前容器的宽或者高，进行等比例缩放，但是超出的部分不会显示，所以有些图片的区域可能会无法显示*/
  background-size: cover;
}
.div4 {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  background: url('../images/1.jpg') no-repeat;
  /*设置背景图片的大小,cover:会让宽或者高适应当前容器的宽或者高，进行等比例缩放，图片完全在容器以内，但是在不重复背景图片的情况下，会造成容器的部分区域空白*/
  background-size: contain;
}

2、 background-origin:

a) 作用：background-origin 属性规定 background-position 属性相对于什么位置来定位。默认值是 left top 左上角

b) 语法：background-origin:padding-box|border-box|content-box;

c) 属性值说明：

值	描述
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

3、 background-clip:

a) background-clip 属性规定背景的绘制区：虽然是设置裁切，但是控制的是显示。说白了，就是设置最终显示那些区域

b) 语法：background-clip:border-box|padding-box|content-box;

c) 属性值说明：

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

4、几个属性的综合案例：精灵图的使用。

a) 需求：为块设置精灵图背景，需要更大的展示区域，能够以更大的范围响应用户的需要，但是只需要显示指定的背景图片

b) 效果：

c) 代码

css

.jd_topEeum {
  height: 44px;
  width: 40px;
  position: absolute;
  background: url('../images/sprites.png') no-repeat;
  background-clip: content-box;
  background-origin: content-box;
  background-size: 200px 200px;
  padding: 12px;
  top: 0;
}

过渡

通过过渡 transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容： 1.规定希望把效果添加到哪个 CSS 属性上， 2.规定效果的时长

1、语法：

css

transition: property duration timing-function delay;

2、参数说明：

transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function|transition-delay

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

3、补充说明 tansition-timing-function:属性规定过渡效果的速度曲线

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4、案例说明

css

div {
  width: 200px;
  height: 200px;
  background-color: red;
  /*添加单个过渡效果*/
  /*transition:background-color 2s;*/
  /*也可以同时设置多个过渡效果*/
  /*transition:background-color 2s,left 1s;*/
  /*可以设置某个过渡效果的延迟*/
  /*transition:background-color 2s,left 1s 1s;*/
  /*可以设置过渡效果的速率曲线*/
  /*transition:background-color 2s,left 1s ease-out 1s;*/
  /*还可以一次性的为所有属性添加过渡效果*/
  transition: all 1s;
  position: absolute;
  left: 0;
  top: 0;
}

5、使用建议

因为 transition 最早是有由 webkit 内核浏览器提出来的，mozilla 和 opera 都是最近版本才支持这个属性，而我们的大众型浏览器 IE 全家都是不支持，另外由于各大现代浏览器 Firefox,Safari,Chrome,Opera 都还不支持 W3C 的标准写法，所以在应用 transition 时我们有必要加上各自的前缀，最好在放上我们 W3C 的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的 transition 属性，那么这种效果就会自动加上去，如

css

-moz-transition: all 5s ease 1s;
-webkit-transition: all 1s ease 1s;
-o-transition: all 1s ease 1s;
transition: all 1s ease 1s;

过渡案例：手风琴菜单

主题：过渡效果的使用

2D 转换

通过 CSS3 transform 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸.

1、 2D 移动：translate()。使用 translate()函数，你可以把元素从原来的位置移动。移动参照元素左上角原点

a) 语法

css

translate(tx)  | translate(tx,ty)

b) tx 是一个代表 X 轴（横坐标）移动的向量长度，当其值为正值时，元素向 X 轴右方向移动，反之其值为负值时，元素向 X 轴左方向移动。

c) ty 是一个代表 Y 轴（纵向标）移动的向量长度，当其值为正值时，元素向 Y 轴下方向移动，反之其值为负值时，元素向 Y 轴上方向移动。如果 ty 没有显式设置时，相当于 ty=0。

d) 也可以使用 translateX(tx) 或者 translateY(ty)

e) 案例示例：

css

div:hover {
  /*设置两个值，第一个参数表示X方向  第二个参数表示Y方向*/
  /*transform:
translate(100px,100px);*/
  /*也可以只传入一个参数，表示X方向*/
  /*transform: translate(100px);*/
  /*也可以指定具体的方向,如下代码，表示Y方向正值方向上移动100px*/
  transform: translateY(100px);
}

2、 2D 缩放：scale()：缩放 scale()函数让元素根据中心原点对对象进行缩放。默认的值 1。因此 0.01 到 0.99 之间的任何值，使一个元素缩小；而任何大于或等于 1.01 的值，让元素显得更大.缩放是参照元素中心点。

a) 语法

css

scale(sx|ty)  | scale(sx,sy)

b) sx：用来指定横向坐标（X 轴）方向的缩放向量，如果值为 0.01~0.99 之间，会让对象在 X 轴方向缩小，如果值大于或等于 1.01，对象在 Y 轴方向放大。

c) sy：用来指定纵向坐标（Y 轴）方向的缩放量，如果值为 0.01~0.99 之间，会让对象在 Y 轴方向缩小，如果值大于或等于 1.01，对象在 Y 轴方向放大

d) 也可以使用 scaleX(sx) 或者 scaleY(sy)

e) 案例示例

css

div:hover {
  /*传入两个值，第一个参数表示X方向的缩放 第二个参数表示Y方向上的缩放*/
  /*transform: scale(2,0.5);*/
  /*也可以只传入一个值，表示X方向和Y方向上相同的缩放*/
  /*transform: scale(2);*/
  /*也可以指定具体方向上的缩放*/
  transform: scaleX(2);
}

3、 2D 旋转：rotate()：旋转 rotate()函数通过指定的角度参数对元素根据对象原点指定一个 2D 旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转

a) 语法：

css

rotate(a);

b) a: 代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转

c) 案例示例

css

div:hover {
  /*传入旋转的角度，如果正值，则进行顺时针旋转*/
  /*transform: rotate(90deg);*/
  /*如果传入负值，则逆时针旋转*/
  transform: rotate(-270deg);
}

4、 2D 翻转：skew()：能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜。这与 rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状

a) 语法

css

skew(ax)  |  skew(ax,ay)

b) ax：用来指定元素水平方向（X 轴方向）倾斜的角度。

c) ay：用来指定元素垂直方向（Y 轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。

d) 也可以使用 skewX(sx) 或者 skewY(sy)

e) 案例示例

css

div:hover {
  /*在X方向上倾斜30度*/
  transform: skewX(30deg);
}

5、 transform-origin: 允许你改变被转换元素的位置

a) 示例

css

div {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  background-color: red;
  /*添加过渡*/
  transition: all 0.5s;
  /*设置缩放的中心，默认是元素中心位置,现修改为元素左上角*/
  transform-origin: 0px 0px;
}
div:hover {
  transform: scale(2);
}

3D 转换

三维变换使用基于二维变换的相同属性，可以让我们基于三个坐标方向对元素进行变换。和二维变形一样，三维变形可以使用 transform 属性来设置

1、 3D 移动

a) 方法：translate3d(x,y,z)使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)

b) 示例

css

div:hover {
  /*Y轴移动+100px*/
  /*transform:translateY(100px);*/
  /*X轴移动100px*/
  /*transform:translateX(100px);*/
  /*x轴和Y轴方向同时移动*/
  transform: translate3d(100px, 100px, 0px);
}

2、 3D 缩放

a) scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleZ()

b) 示例

css

div:hover {
  /*Y轴方向放大1倍*/
  /*transform: scaleX(2);*/
  /*X轴方向缩小0.5*/
  /*transform: scaleX(0.5);*/
  /*x轴和Y轴方向同时进行缩放*/
  transform: scale3d(2, 0.5, 1);
}

3、 3D 旋转

a) rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴

b) rotateX(angle) 是元素依照 x 轴旋转；

c) rotateY(angle) 是元素依照 y 轴旋转；

d) rotateZ(angle) 是元素依照 z 轴旋转

注意：

x,y,z 是向量值，由他们计算出旋转的轴线
angle 为正数，顺时针旋转
angle 为负数，逆时针旋转

e) 示例

css

div:hover {
  /*Y轴方向旋转45度*/
  /*transform: rotateY(45deg);*/
  /*X轴方向旋转90度*/
  /*transform: rotateX(90deg);*/
  /*x轴和Y轴方向同时进行旋转放*/
  transform: rotate3d(1, 1, 0, 45deg);
}

4、透视/景深效果

左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向

a) perspective(length)：为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。

当 perspective:none/0;时，相当于没有设 perspective(length)。

比如你要建立一个小立方体，长宽高都是 200px。如果你的 perspective < 200px ，那就相当于站在盒子里面看的结果，

如果 perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了），意味着 perspective 属性指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果

b) perspective-origin：属性规定了镜头在平面上的位置。默认是放在元素的中心

c) transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中)

值	描述
flat	子元素将不保留其 3D 位置-平面方式。
preserve-3d	子元素将保留其 3D 位置—立体方式。

5、案例：立方体

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        opacity: 0.5;
        /*设置一下默认的变换，否则由于观察角度在正面，无法看到立方体*/
        transform: rotateX(-30deg) rotateY(30deg);
        /*保持3D效果*/
        transform-style: preserve-3d;
      }
      /*公共样式*/
      .front,
      .back,
      .left,
      .right,
      .top,
      .bottom {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .left {
        background: red;
        transform: translateX(-100px) rotateY(-90deg);
      }
      .right {
        background: green;
        transform: translateX(100px) rotateY(90deg);
      }
      .front {
        background: blue;
        transform: translateZ(100px);
      }
      .back {
        background: pink;
        transform: translateZ(-100px);
      }
      .top {
        background: orange;
        transform: translateY(-100px) rotateX(90deg);
      }
      .bottom {
        background: purple;
        transform: translateY(100px) rotateX(-90deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="front">front</div>
      <div class="back">back</div>
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="top">top</div>
      <div class="bottom">bottom</div>
    </div>
  </body>
</html>

动画

动画是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.

1、必要元素

a) 通过@keyframes 指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧

b) 通过百分比将动画序列分割成多个节点；

c) 在各节点中分别定义各属性

d) 通过 animation 将动画应用于相应元素；

2、 animation 样式常用属性

a) 动画序列的名称:animation-name: move;

b) 动画的持续时间:animation-duration: 1s;

c) 动画的延时:animation-delay: 1s;

d) 播放状态:animation-play-state: paused|running;

e) 播放速度:animation-timing-function: linear | ease | ease-in | ease-out;

f) 播放次数反复:animation-iteration-count: 1 | infinite;

g) 动画播放完结后的状态:animation-fill-mode: forwards;

h) 循环播放时，交叉动画:animation-direction: alternate | ;

3、代码说明

css

* {
  padding: 0;
  margin: 0;
}
div {
  width: 300px;
  height: 300px;
  margin: 100px auto;
}
div > img {
  width: 100%;
}
/*添加动画*/
@keyframes rotateAni {
  0% {
    /*可以同时对多个属性添加动画效果*/
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
div:hover > img {
  /*动画名称-自定义*/
  animation-name: rotateAni;
  /*动画时间*/
  animation-duration: 1s;
  /*动画速率曲线： linear：匀速  ease：动画以低速开始，然后加快，在结束前变慢  ease-in：动画以低速开始  ease-out：动画以低速结束  ease-in-out：动画以低速开始和结束*/
  animation-timing-function: linear;
  /*动画播放次数*/
  animation-iteration-count: 4;
  /*动画时间延迟*/
  animation-delay: 0s;
  /*动画播放完的状态：  forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
  animation-fill-mode: forwards;
  /*动画是否轮流反射播放：  alternate:在规定的次数内轮流反射播放  normal:正常播放*/
  /*animation-direction: alternate;*/
}
div:active > img {
  /*动画的当前播放状态：  paused：暂停  running:运行*/
  animation-play-state: paused;
}

4、动画案例：汽车/钟表/宇宙

web 字体和字体图标

开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至 IE 低版本浏览器也能支持。

字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

TureTpe(.ttf)格式 .ttf 字体是 Windows 和 Mac 的最常见的字体，是一种 RAW 格式，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
OpenType(.otf)格式 .otf 字体被认为是一种原始的字体格式，其内置在 TureType 的基础上，支持这种字体的浏览器有 Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
Web Open Font Format(.woff)格式 woff 字体是 Web 字体中最佳格式，他是一个开放的 TrueType/OpenType 的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
Embedded Open Type(.eot)格式 .eot 字体是 IE 专用字体，可以从 TrueType 创建此格式字体，支持这种字体的浏览器有 IE4+；
SVG(.svg)格式 .svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

Web 字体

1）得自定义想生成对应字体文件的内容

2）使用网络资源生成 web 字体，只对已经生成的汉字有效

3）使用：

a）定义自定义字体

css

@font-face {
  font-family: 'shuangyuan';
  src: url('../fonts/webfont.eot'); /* IE9*/
  src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont.woff') format('woff'),
    /* chrome、firefox */ url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

b）定义样式使用自定义字体

css

.myFont {
  font-family: shuangyuan;
}

c）指定样式，调用样式

html

<span class="myFont"
  >开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至IE低版本浏览器也能支持</span
>

字体图标

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了

a) 优点

将所有图标打包成字体库，减少请求；
具有矢量性，可保证清晰度；
使用灵活，便于维护

b) 生成字体图标文件

下载字体图标文件：如https://www.awesomes.cn/的网站的介绍和使用

自定义字体

css

/*定义字体图标*/
@font-face {
  font-family: 'wjs'; //自定义的字体名称
  src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/
  src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MiFie-Web-Font.woff')
      format('woff'), /* chrome、firefox */ url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */
}

通过 css 样式使用字体

css

/*自定义字体图标*/
.wjs_font_icon {
  font-family: wjs; //这里对应着自定义的字体名称
}
/*手机图标对应的编码*/
.wjs_font_icon_phone::before {
  content: '\e908'; //指定显示的内容
}

多列布局

CSS3 中新出现的多列布局(multi-column)是传统 HTML 网页中块状布局模式的有力扩充。这种新语法能够让 WEB 开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样

1、常用属性

column-count: 属性设置列的具体个数
column-width:属性控制列的宽度（与 column-count 冲突时，取大优先，并且一定会自动填充整个屏幕）
column-gap:两列之间的缝隙间隔
column-rule:规定列之间的宽度、样式和颜色（与边框的样式一样）
column-span:规定元素应横跨多少列(n:指定跨 n 列 all:跨所有列)

2、多列的用法

css

* {
  padding: 0;
  margin: 0;
}
.wrapper {
  width: 1054px;
  padding: 20px;
  margin: 0 auto;
  font-family: '微软雅黑', Arial;
  /*设置以几列的方式显示*/
  column-count: 2;
  /*指定列宽*/
  column-width: 500px;
  /*指定列与列之间的间距*/
  column-gap: 50px;
  /*指定列与列之间间隙的样式*/
  /*column-rule:2px dotted red*/
  /*相对应下面的三个属性*/
  column-rule-color: red;
  column-rule-style: dotted;
  column-rule-width: 2px;
}
.wrapper > h4 {
  column-span: all;
}

3、列高度的平衡：

如果设定列的最大高度，这个时候，文本内容会从第一列开始填充，然后第二列，第三列

css

max-height: 300px;

伸缩布局 Flex

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3 在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

传统布局与 flex 布局

display: flex

说明
如果一个容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)

justify-content

说明
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

语法：

css

justify-content：flex-start | flex-end |center | space-between | space-around

取值
- flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

align-items

说明
定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式

语法

css

align-items：flex-start | flex-end | center | baseline | stretch

取值
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
- stretch：（默认）如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex

说明
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选
语法：大多数情况下没必要使用这种语法，当使用 flex 缩写时，大多数情况下没必要使用这种语法

css

flex: [flex-grow][flex-shrink][flex-basis];

flex: [number]：（常用写法）这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例
flex: auto：属性值被设为 auto 的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间

flex-flow

说明 flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值：flex-direction：定义弹性盒子元素的排列方向。flex-wrap：控制 flex 容器是单行或者多行

flex-direction

语法

css

flex-direction： flex-direction：row | row-reverse | column | column-reverse

取值
- row：（默认）主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
- row-reverse：对齐方式与 row 相反。
- column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
- column-reverse：对齐方式与 column 相反。

flex-wrap

语法

css

flex-wrap：  flex-wrap：nowrap | wrap | wrap-reverse

取值
- nowrap：（默认）flex 容器为单行。该情况下 flex 子项可能会溢出容器
- wrap：flex 容器为多行。该情况下 flex 子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse：反转 wrap 排列。

align-self

说明定义 flex 子项单独在侧轴（纵轴）方向上的对齐方式
语法

css

align-self：auto | flex-start | flex-end | center | baseline | stretch

取值
- auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

综合案例-携程网页面

a) 主要技术点

css

display:flex; | flex-wrap:wrap;

b) 效果

c) div 结构：

html

<div class="layout">
  <header>
    <div class="banner">
      <a href="">
        <img src="../images/banner.jpg" alt="" />
      </a>
    </div>
  </header>
  <div class="main">
    <div class="item">
      <div class="pub"></div>
      <div class="sub">
        <a href="javascript:;">海外酒店</a>
        <a href="javascript:;">团购</a>
        <a href="javascript:;">特惠酒店</a>
        <a href="javascript:;">客栈公寓</a>
      </div>
    </div>
    <div class="item">
      <div class="pub"></div>
      <div class="sub">
        <a href="javascript:;">海外酒店</a>
        <a href="javascript:;">团购</a>
        <a href="javascript:;">特惠酒店</a>
        <a href="javascript:;">客栈公寓</a>
      </div>
    </div>
    <section class="extra">
      <a href="javascript:;">
        <img src="../images/extra_1.png" />
      </a>
      <a href="javascript:;">
        <img src="../images/extra_2.png" />
      </a>
    </section>
  </div>
  <footer>
    <nav>
      <a href="javascript:;">电话预订</a>
      <a href="javascript:;">下载客户端</a>
      <a href="javascript:;">我的</a>
    </nav>
    <!-- 版本信息 -->
    <div class="copyright">
      <!-- 网站链接 -->
      <p class="link">
        <a href="javascript:;">网站地图</a> | <a href="javascript:;">ENGLISH</a> |
        <a href="javascript:;">电脑版</a>
      </p>
      <p>&copy;2015 携程旅行</p>
    </div>
  </footer>
</div>

d) 样式

css

* {
  padding: 0;
  margin: 0;
}
.layout {
  min-width: 320px;
}
header {
}
.banner {
  display: flex;
}
.banner > a {
  flex: 1;
}
.banner > a > img {
  width: 100%;
  height: auto;
  display: block;
}
footer {
  width: 100%;
}
footer > nav {
  display: flex;
}
footer > nav > a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  line-height: 40px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.copyright > p {
  padding-top: 10px;
  text-align: center;
  font-size: 12px;
}
.copyright > p > a {
  padding: 0 5px;
  text-decoration: none;
  color: #666;
}
.main {
  padding: 5px;
}
.main > .item {
  margin-top: 5px;
  display: flex;
  height: 90px;
  border-radius: 5px;
}
.main > .item:nth-child(1) {
  background-color: #ff697a;
}
.main > .item > .pub {
  flex: 1;
  border-top: 1px solid #fff;
}
.main > .item > .sub {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}
.main > .item > .sub > a {
  width: 50%;
  height: 45px;
  text-align: center;
  line-height: 45px;
  color: white;
  text-decoration: none;
  font-size: 13px;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  box-sizing: border-box;
}
.main .extra {
  display: flex;
}
.main .extra > a {
  flex: 1;
}
.main .extra > a > img {
  width: 100%;
}

HTML5 ​

概述 ​

什么是 HTML5 ​

新元素和语义化 ​

新增标签 ​

移除标签 ​

语义标签 ​

兼容处理 ​

表单控件 ​

新增表单标签 ​

新增表单属性 ​

新增 type 类型 ​

新增表单事件 ​

案例 ​

▸多媒体 ​

audio ​

video ​

source ​

HTMLMediaElement ​

案例：自定义播放器 ​

▸DOM 扩展 ​

获取DOM元素 ​

类名操作 ​

自定义属性data-* ​

案例： tab标签页 ​

▸ 网络状态 ​

▸ 全屏 ​

▸FileReader ​

▸ 拖拽 ​

API ​

基本实现 ​

通用-多元素拖拽 ​

▸ 地理定位 ​

API ​

百度地图 ​

web 存储 ​

Window.sessionStorage ​

Window.localStorage ​

▸ 应用缓存(弃用) ​

CSS3 ​

CSS3 简介 ​

如何对待？ ​

如何使用手册 ​

CSS3 现状 ​

选择器 ​

颜色设置 ​

文本(shadow 阴影) ​

盒模型 ​

边框圆角 ​

案例：android 机器人 ​

边框阴影 ​

边框图片 ​

渐变 ​

背景 ​

过渡 ​

过渡案例：手风琴菜单 ​

2D 转换 ​

3D 转换 ​

动画 ​

web 字体和字体图标 ​

字体格式 ​

Web 字体 ​

字体图标 ​

多列布局 ​

伸缩布局 Flex ​

传统布局与 flex 布局 ​

display: flex ​

justify-content ​

align-items ​

flex ​

flex-flow ​

flex-direction ​

flex-wrap ​

align-self ​

综合案例-携程网页面 ​

HTML5

概述

什么是 HTML5

新元素和语义化

新增标签

移除标签

语义标签

兼容处理

表单控件

新增表单标签

新增表单属性

新增 type 类型

新增表单事件

案例

▸多媒体

audio

video

source

HTMLMediaElement

案例：自定义播放器

▸DOM 扩展

获取DOM元素

类名操作

自定义属性data-*

案例： tab标签页

▸ 网络状态

▸ 全屏

▸FileReader

▸ 拖拽

API

基本实现

通用-多元素拖拽

▸ 地理定位

API

百度地图

web 存储

Window.sessionStorage

Window.localStorage

▸ 应用缓存(弃用)

CSS3

CSS3 简介

如何对待？

如何使用手册

CSS3 现状

选择器

颜色设置

文本(shadow 阴影)

盒模型

边框圆角

案例：android 机器人

边框阴影

边框图片

渐变

背景

过渡

过渡案例：手风琴菜单

2D 转换

3D 转换

动画

web 字体和字体图标

字体格式

Web 字体

字体图标

多列布局

伸缩布局 Flex

传统布局与 flex 布局

display: flex

justify-content

align-items

flex

flex-flow

flex-direction

flex-wrap

align-self

综合案例-携程网页面