重温前端基础（一） HTML、CSS、H5C3

一刀^••^ 2020-10-10 10:39:22

353

分类专栏：前端文章标签： html html5 css3 javascript jquery

最后发布:2020-10-10 10:39:22首次发布:2020-10-10 10:39:22

本文链接：https://blog.csdn.net/zglibk/article/details/108990275

版权

0. WEB 标准构成

构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，主要指的是`HTML`。
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是`CSS`
行为	行为是指网页模型的定义及交互的编写，主要指的是 `Javascript`

1. HTML

1.1 HTML概念

HTML ：超文本标记语言 (Hyper Text Markup Language)。是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

1.2 超文本含义

可以加入图片、声音、动画、多媒体等内容（因此可理解为超越文本限制）；
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

1.3 页面语言

最常见的 2 个：

en：定义语言为英语
zh-CN：定义语言为中文

<!-- 指定该html标签 内容 所用的语言为中文 -->
<html lang="zh-CN">

1.4 字符集

utf-8是目前最常用的字符集编码方式。

字符	说明
`GB2312`	简单中文，包括6763个汉字国标（GB）
`BIG5`	繁体中文，港澳台等用
`GBK`	包含全部中文字符 —— 是`GB2312`的扩展，加入对繁体字的支持，兼容`GB2312`
`UTF-8`	基本包含全世界所有国家需要用到的字符。

【示例】：

<meta charset="UTF-8" />

意思是让 html 文件以 UTF-8 编码保存，浏览器根据编码去解码对应的html内容。

1.5 标签语义化

目的：

方便代码的阅读和维护；
同时让浏览器或是爬虫可以很好地解析，从而更好分析其中的内容；
使用语义化标签会具有更好的搜索引擎优化。

根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

1.6 常用标签

标签分类	名称	语法格式	描述
排版标签	标题标签 h	<h5> 内容 </h5>	作为标题使用，h1.h2…h5 依据重要性递减
排版标签	段落标签 p	<p> 内容 </p>	把 HTML 文档分割为若干段落
排版标签	水平线标签 hr	<hr /> （单标签）	创建横跨网页水平线
排版标签	换行标签 br	<br /> （单标签）	强制换行
排版标签	div 标签	<div> 内容 </div>	没有语义
排版标签	span 标签	<span>内容</span>	没有语义
格式化标签	字体加粗	<b> </b> <strong> </strong>	XHTML推荐使用 strong
格式化标签	斜体标签	<i></i> <em></em>	XHTML推荐使用 em
格式化标签	文字删除线	<s> </s> <del> </del>	XHTML推荐使用 del
图像标签	img 标签	<img src=“图像URL” /> （单标签）	更多相关内容请看 1.7 节
链接标签	a 标签	<a> </a>	更多相关内容请看 1.8 节

区别：
<b></b> 只是加粗，<strong> </strong> 除了加粗还有强调的意思，语义更强烈。

1.7 图像标签 img

语法格式：

<img src="图像URL" />

【<img /> 标签属性】

属性	属性值	描述
`src`	`URL`	图像的路径
`alt`	文本	图像不能显示时的替换文本
`title`	文本	鼠标悬停时显示的内容
`width`	像素（XHTML不支持页面百分比`%`）	设置图像的宽度
`height`	像素（XHTML不支持页面百分比`%`）	设置图像的高度
`border`	数值	设置图像边框的宽度

属性之间不分先后顺序，标签名与属性、属性与属性之间均以 空格 分开。
采取键/值对的格式，如 key="value" 的格式

【示例】：

<img src="cz.jpg" width="300" height="300" border="3" />
<img src="cz.jpg" width="300" height="300" border="3" title="内容" />
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />

1.8 链接标签

语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
`href`	用于指定链接目标的`url`地址必须属性），当给标签应用该`href`属性时，此标签就具有了超链接的功能
`target`	用于指定链接页面的打开方式，其取值有`_self`和_`blank`两种，其中`_self`为默认值，`__blank`为在新窗口中打开页面

1.9 锚点定位

作用： 通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

使用相应的id名标注跳转目标的位置。 (找目标)
```
<h3 id="two">第2集</h3> 
```
使用<a href="#id名"> 链接文本</a>创建链接文本（被点击的）——拉关系（我也有一个姓毕的姥爷）
```
<a href="#two">
```

1.10 base 标签

语法：

<base target="_blank" />

总结：

base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间
把所有的连接都默认添加 target="_blank"

1.11 特殊字符

一些特殊的符号，在 html 里面很难或者不方便直接使用时，可用下面的替代代码。

特殊字符	描述	代码
	空格符	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`￥`	人民币	`¥`
`©`	版权	`©`
`®`	注册商标	`®`
`°`	摄氏度	`°`
`±`	正负号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	平方2（上标2）	`²`
³	立方3（上标3）	`³`

🔔 注：第三列中的代码是以运算符&开头,以分号运算符;结尾的。

1.12 XHTML

XHTML 是更严格更纯净的 HTML 代码。

XHTML 指 可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。

1.13 HTML和 XHTML之间的区别

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持
XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。

1.14 表格

创建表格的基本标签 table、tr、td，缺一不可。

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table 标签：定义“表格”；
tr 标签：定义“行”，必须嵌套在<table> </table> 标签中；
td 标签：定义“单元格”，必须嵌套在<tr> </tr>标签中。

1.14.1 表格属性

表格有部分属性不常用，重点记住 cellspacing 、 cellpadding。

属性	含义	常用属性值
`border`	设置表格的边框（默认`border="0"`无边框）	像素值
`cellspacing`	设置单元格与单元格边框之间的空白间距	像素值（默认为`2`像素）
`cellpadding`	设置单元格内容与单元格边框之间的空白间距	像素值（默认为`1`像素）
`width`	设置表格的宽度	像素值
`height`	设置表格的高度	像素值
`align`	设置表格在网页中的水平对齐方式	`left`、`center`、`right`

实际开发中，基本采用 3 参为 0（border、cellpadding、cellspacing为0）
在这里插入图片描述

1.14.2 表头单元格标签 th

作用：
一般表头单元格位于表格的第一行或第一列，并且文本加粗居中。
语法：
只需用表头标签 <th></th> 替代相应的单元格标签 <td></td> 即可。

在这里插入图片描述
案例效果：

代码：

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
	<tr>  
		<th>姓名</th> 
		<th>性别</th>
		<th>电话</th>
	</tr>
	<tr>
		<td>小王</td>
		<td>女</td>
		<td>110</td>
	</tr>
	<tr>
		<td>小明</td>
		<td>男</td>
		<td>120</td>
	</tr>	
</table>

th也是单元格，只是和普通的td单元格不一样，它会让里面的文字居中 + 加粗。

1.14.3 表格标题- caption

定义和用法：

<table>
   <caption>我是表格标题</caption>
</table>

🔔 注：

caption 元素定义表格标题，标题会被居中且显示于表格之上。
caption 标签必须紧随 table 标签之后。

1.14.4 合并单元格

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

合并顺序：遵循先上、后下、先左、后右的顺序。
合并步骤：

确定是跨行还是跨列合并；
找到目标单元格，写上合并方式、要合并的单元格数量。如：
```
<td colspan="3"> </td>
```
删除多余的单元格单元格

1.14.5 表格总结

标签名	定义	说明
<table></table>	定义表格	就是一个四方的盒子
<thead></thead>	表格头部	用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
<tr></tr>	表格行标签	行标签要再table标签内部才有意义
<tbody></tbody>	定义表格主体	放数据本体
<td></td>	单元格标签	单元格标签是个容器级元素，可以放任何东西
<th></th>	表头单元格标签	也是一个单元格，但是里面的文字会居中且加粗
<caption></caption>	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
<tfoot></tfoot>	表格脚注	放表格的脚注之类
clospan 和 rowspan	合并属性	用来合并单元格

注：一般稍微复杂的表格，都将表格分成三个部分：题头、正文和脚注。这三部分就分别用:thead、tbody、tfoot来标注。

1.15 列表

1.15.1 无序列表 ul

<ul></ul>中只能嵌套<li></li>，不可直接在<ul></ul>标签中输入其他标签或者文字；
<li>与</li>之间相当于一个容器，可以容纳所有元素；
无序列表会带有自己默认样式属性（去掉默认，用CSS美化）。

1.15.2 有序列表 ol

所有特性基本与ul一致。但是实际中比 无序列表 更少用。

1.15.3 自定义列表

定义列表常用于对术语或名词进行解释和描述。基本语法如下：

<dl>
	<dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</dl>

应用场景举例：

在这里插入图片描述

1.15.4 列表总结

标签名	定义	说明
`<ul> </ul>`	无序标签	里面只能包含`li`，没有顺序，布局中最常用；
`<ol> </ol>`	有序标签	里面只能包含`li`，有顺序，使用情况较少；
`<dl> </dl>`	自定义列表	里面有2个兄弟， `dt` 和 `dd`。

1.16 表单标签

表单作用：收集用户信息。
完整的表单通常由表单控件、提示信息、表单域 3 个部分构成。

1.16.1 input 控件

<input />标签为单标签；
type属性设置不同的属性值用来指定不同的控件类型；
除了type属性还有别的属性

语法：

<input type="属性值" value="你好">

【input 常见属性】

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	input 控件中的默认文本值
size	正整数	input 控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最大字符数

radio 用法举例（多选一的场景）：

<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

【input 控件小结】

属性	说明	作用
`type`	表单类型	用来指定不同的控件类型
`value`	表单值	表单里面默认显示的文本
`name`	表单名称	页面中的表单很多，name主要作用就是用于区别不同的表单。
`checked`	默认选中	表示那个单选或者复选按钮一开始就被选中了

1.17 lable 标签

【作用】

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

绑定元素

<!-- 方法一-->
<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

<!-- 方法二-->
<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

1.18 textarea控件(文本域)

【语法】：

<textarea >
  文本内容
</textarea>

【作用】：

通过textarea控件可以轻松地创建多行文本输入框；
cols="每行中的字符数" rows="显示的行数" 实际开发不适用。

文本框和文本域的区别：

表单	名称	区别	默认值显示	应用场景
input type=“text”	文本框	只能显示一行文本	单标签，通过 value显示默认值	用户名、昵称、密码等
textarea	文本域	可显示多行文本	双标签，默认值写到标签中间	留言板

1.19 select下拉列表

如果有多个选项让用户选择，为节约空间，使用select控件定义下拉列表。

【语法】：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

select> 中至少包含一对 option
在option 中定义selected =" selected "时，即为默认选中项。

实际开发中较少使用（多数情况下第三方开发框架，有现成的组件）

1.20 form 表单域

form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

【语法】：

<form action="url地址" method="提交方式" name="表单名称">
	各种表单控件
</form>

【常见属性】：

属性	属性值	作用
`action`	`url`地址	用于指定接收并处理表单数据的服务器程序的`url`地址。
`method`	`get`/`post`	用于设置表单数据的提交方式，其取值为`get`或`post`。
`name`	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

后面 ajax 前后端交互里，就一定要用到 form表单域。

2. 层叠样式表（CSS）

2.1 书写位置

2.1.1 行内式（内联样式）

【语法】：

<标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容 </标签名>

【示例】：

<div style="color:red;font-size:12px;">青春不常在，抓紧谈恋爱</div>

任何HTML标签都拥有style属性，可用来设置 行内式 。

缺点：只能控制当前的标签、以及嵌套在其中的子标签，造成代码冗余。没有实现样式和结构相分离。

2.1.2 内嵌式（内部样式）

将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

【语法】：

<head>
	<style type="text/CSS">
	    选择器（选择的标签） { 
	      属性1: 属性值1;
	      属性2: 属性值2; 
	    }
	</style>
</head>

【示例】：

<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>

🔔 注意：

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在 html5 中可以省略。
只能控制当前的页面

2.1.3 外链式（外部样式表）

一个或多个以.CSS为扩展名的外部样式表文件，通过link标签将外部样式表文件链接到HTML文档中。

【语法】：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径" />
</head>

属性	作用
`rel`	定义当前文档与被链接文档之间的关系，需要指定为“`stylesheet`”，表示链接是样式表文件。
`type`	定义所链接文档的类型，需要指定为“`text/CSS`”，表示链接的是CSS样式表。可省略不写
`href`	定义所链接外部样式表文件的`URL`，可以是相对路径，也可以是绝对路径。

注： link 是单标签 - link标签需要放在head头部标签中，并且指定link标签的三个属性。

2.2 css 选择器

2.2.1 基础选择器

标签选择器
```
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
```
把某一类标签全部选择出来，缺点是不能差异化设置。

类选择器

<p class='类名'></p>

.类名  { 属性1:属性值1;属性2:属性值2;属性3:属性值3; }

id选择器
```
<p id="id名"></p>
```
```
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
```
元素id值唯一，只对应于文档中某一具体元素。经常和javascript 搭配使用。

通配符选择器
示例：

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

注：会匹配页面所有的元素，降低页面响应速度，不建议随便使用。

【基础选择器一览】：

选择器	作用	缺点	使用情况	用法
标签选择器	选出所有相同的标签	不能差异化选择	较多	`p { color：red;}`
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	`.nav { color: red; }`
`id`选择器	一次只能选择器1个标签	只能使用一次	不推荐	`#nav {color: red;}`
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐	`* {color: red;}`

2.2.2 复合选择器

后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的子孙后代。

【语法示例】
```
.class h3{color:red;font-size:16px;}
```
子元素选择器
【语法示例】
```
.class>h3{color:red;font-size:14px;}
```
交集选择器
由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

【语法示例】
```
p.one {color:red}
```
表示选择的是：类名为 .one 的段落标签（p）。
并集选择器
是各个选择器通过逗号（,）连接，通常用于集体声明。

任何形式的选择器（包括标签选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。

【语法示例】
```
.one, p, #test{color: #F00;} 
```

链接伪类选择器
用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

a:link      /* 未访问的链接 */
a:visited   /* 已访问的链接 */
a:hover     /* 鼠标移动到链接上 */
a:active    /* 选定的链接 */

写的时候，它们的顺序尽量不要颠倒按照 lvha 的顺序。否则可能引起错误。

工作开发中，很少写全四个状态，一般写法如下：

a {   /* a是标签选择器  所有的链接 */
	font-weight: 700;
	font-size: 16px;
	color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
	color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

2.3 font字体

大小
```
p {font-size:20px;}
```
字体
```
p{ font-family:"微软雅黑";}
```
中文字体名称，在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。

【解决方法】：
（一）、用英文字体名称替代：font-family:"Microsoft Yahei"；

（二）、使用Unicode字体：使用 Unicode 写中文字体名称，浏览器可正确解析。如下所示：
```
font-family: "\5FAE\8F6F\96C5\9ED1";   表示设置字体为“微软雅黑”。
```
更多编码请参阅：《中文字体名称对照表(unicode码)及20个web安全字体》，=> 点击前往

注：如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

字体粗细
- HTML 字体加粗：<b></b>、<strong></strong>
- css中的字体加粗（没有语义）：
属性值描述
normal 默认值（不加粗）
bold 定义粗体（加粗）
0-900 400 <=> normal，700 <=> bold

属性值	描述
normal	默认值（不加粗）
bold	定义粗体（加粗）
0-900	400 <=> normal，700 <=> bold

字体风格（倾斜）

1） HTML ：通过<i>或<em>标签；
2） CSS：font-style:italic;

属性作用
normal 默认值，浏览器会显示标准的字体样式 font-style: normal;
italic 浏览器会显示斜体的字体样式。
font 综合设置字体样式
【语法】：
```
选择器{font:font-style font-weight font-size/line-height font-family;}
```
🔔 注意：
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
- 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用。

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

2.4 CSS外观属性

2.4.1 color:文本颜色

表示方法	属性值
预定义的颜色值	red，green，blue，…pink
十六进制	#FF0000，#FF6600，#29D794
RGB	rgb(255,0,0)或rgb(100%,0%,0%)

2.4.2 text-align:文本水平对齐方式

text-align属性用于设置文本内容的 水平对齐 ，相当于html中的align对齐属性。

属性	描述
left	左对齐（默认值）
right	右对齐
center	居中对齐

2.4.3 line-height:行间距

用于设置行间距，即字符的垂直间距（行高）。

常用属性值单位：像素（px）、相对值（em）、百分比（%）。

2.4.4 text-indent:首行缩进

用于设置首行文本的缩进，建议使用em作为设置单位（1em 就是一个字的宽度如果是汉字段落， 1em 就是 1个汉字的宽度）。

示例：

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

2.4.5 text-decoration 文本的装饰

text-decoration 通常用于给链接修改装饰效果。

值	描述
`none`	默认。定义标准的文本。取消下划线（最常用）
`underline`	定义文本下的一条线。下划线也是我们链接自带的（常用）
`overline`	定义文本上的一条线。（一般不用）
`line-through`	定义穿过文本下的一条线。（不常用）

2.4.6 css外观属性总览

属性	表示	注意点
`color`	颜色	常用十六进制比如而且是简写形式 #fff
`line-height`	行高	控制行与行之间的距离
`text-align`	水平对齐	设定文字水平的对齐方式
t`ext-indent`	首行缩进	通常我们用于段落首行缩进2个字的距离 `text-indent: 2em`;
`text-decoration`	文本修饰	记住添加下划线 `underline` 取消下划线 `none`

2.5 标签显示模式（display）

设置标签以什么方式进行显示，比如div 自己占一行，比如span 一行可以放很多个。

HTML标签一般分为块标签和行内标签两种，也称块元素和行内元素。

2.5.1 块级元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素。

独占一行；
高度、宽度、外边距、内边距都可控制；
宽度默认是容器（父级宽度）的100%；
是一个容器及盒子，里面可以放行内或者块级元素（p标签和h标签除外，它们是文字类块元素）。

2.5.2 行内元素 (inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>是最典型的行内元素。有的地方也成内联元素

（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

2.5.3 行内块元素（inline-block）

行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性。

（1）和相邻的行内元素（行内块）在一行上，但是之间会有空白缝隙。一行可以显示多个；
（2）默认宽度是其本身内容的宽度；
（3）高度、行高、外边距以及内边距均可控制。

2.5.4 三种模式的区别

显示模式	排列	设置样式	默认宽度	容纳
块级元素	1行只能放1个块级元素	宽、高	容器的100%	容器级可以包含任何标签
行内元素	1行可放多个行内元素	不可直接设置宽/高	它本身内容的宽度	文本或其它行内元素
行内块	1行放多个行内块元素	可设置宽、高	它本身内容的宽度

2.5.5 标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

2.6 行高（line-height）

实现单行文字垂直居中（文字行高=盒子高度时）
在这里插入图片描述
行高和高度的三种关系**

如果行高等高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上

2.7 CSS 背景(background)

通过css背景属性，给页面元素添加背景样式 - 能设置不同的背景图片位置。

2.7.1 背景颜色(color)

【语法】：

/* 默认的值是 transparent  透明的 */
background-color:颜色值;

2.7.2 背景图片(image)

【语法】：

background-image : none | url (url)

参数	作用
`none`	无背景图（默认）
`url`	使用绝对或相对地址指定背景图像

示例：

background-image : url(images/demo.png);

2.7.3 背景平铺（repeat）

【语法】：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

【参数】：

参数	作用
`repeat`	背景图像在纵向和横向上平铺（默认的）
`no-repeat`	背景图像不平铺
`repeat-x`	背景图像在横向上平铺
`repeat-y`	背景图像在纵向平铺

2.7.4 背景位置(position)

【语法】：

background-position : length || length

background-position : position || position

【参数】：

参数	值
`length`	百分数 \| 由浮点数字和单位标识符组成的长度值
`position`	top \| center \| bottom \| left \| center \| right 等方位名词

注意：

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致；
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标，那么第一个肯定是 x ，第二的一定是y；
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中；
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标。

2.7.5 背景附着

背景附着就是解释背景是滚动的还是固定的。

【语法】：

background-attachment : scroll | fixed

【参数】：

参数	作用
`scroll`	背景图像是随对象内容滚动
`fixed`	背景图像固定

2.7.6 背景简写

background属性值的书写顺序官方并没有强制标准的。为了可读性，建议如下写：

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

【语法】示例：

background:transparent url(image.jpg) repeat-y scroll center top;

2.7.7 背景透明（CSS3）

gba() 函数使用红（R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。

低于 IE 9 的版本不支持。

【语法】：

background: rgba(0, 0, 0, 0.3);

参数 alpha 透明度，取值范围 0~1之间（1为完全不透明）；
R、G、B取值范围：0~255 或 0~100%。

🔔注：背景半透明指盒子背景半透明，盒子里的内容不受影响。

2.8 CSS 三大特性

层叠性
继承性
优先级

2.8.1 层叠性

层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一个能力。

如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉，如图：
在这里插入图片描述

2.8.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
在这里插入图片描述

2.8.3 优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题。

权重计算公式
关于CSS权重，有一套计算公式，这个就是 CSS Specificity（特殊性）

签选择器计算权重公式
继承或者 * 0,0,0,0
元素（标签选择器） 0,0,0,1
类、伪类 0,0,1,0
id 0,1,0,0
行内样式 style="" 1,0,0,0
!important ∞ 无穷大
权重叠加
交集选择器、后代选择器等，是由多个基础选择器组合而成的，那么此时，就会出现权重叠加。

就是一个简单的加法计算
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
注：数位之间没有进制。例如：

0,0,0,5 + 0,0,0,5 = 0,0,0,10

而不是

0,0,0,5 + 0,0,0,5 = ~~0,0, 1, 0~~

所以不会存在 10 个div能赶上一个类选择器的情况。
继承的权重为 0
这个不难，但是忽略很容易绕晕。修改样式时，一定要看该标签有没有被选中。
1）如果选中了，那么以上面的公式来计权重。谁大听谁的。
2）如果没有选中，那么权重是0，因为继承的权重为0.

签选择器	计算权重公式
继承或者 `*`	0,0,0,0
元素（标签选择器）	0,0,0,1
类、伪类	0,0,1,0
`id`	0,1,0,0
行内样式 `style=""`	1,0,0,0
`!important`	∞ 无穷大

2.9 盒子模型（Box Model）

所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子、容器。

2.10 盒子边框（border）

【语法】：

border : border-width || border-style || border-color

属性	作用
`border-width`	定义边框粗细，单位 `px`
`border-style`	边框样式
`border-color`	边框颜色

border-style 边框样式参数：

参数	描述
`none`	没有边框（即忽略所有边框的宽度）（默认值）
`solid`	边框为单实线(最为常用)
`dashed`	边框为虚线
`dotted`	边框为点线

边框综合设置

border : border-width || border-style || border-color

【语法示例】：

 border: 1px solid red;  /* 各参数之间没有顺序 */

表格的细线边框
虽然通过cellspacing="0"，可将单元格之间的距离设置为0，但是，两个单元格之间的边框会出现重叠，从而使边框变粗。

【解决边框重叠】：
```
table { border-collapse:collapse; }  /* 合并相邻边框 */
```

2.11 内边距（padding）

边框与内容之间的距离。添加内边距会撑大盒子。

padding 的简写：

值的个数	表达的意思
1个值	padding：上下左右内边距
2个值	padding：上下内边距左右内边距
3个值	padding：上内边距左右内边距下内边距；

在这里插入图片描述

如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。

2.12 外边距（margin）

margin属性设置外边距，控制盒子和盒子之间的距离。

margin值的简写（复合写法）跟 padding 完全相同。

2.12.1 块级盒子水平居中

让一个块级盒子实现水平居中必须：

盒子必须指定了宽度（width）；
给左右的外边距都设置为auto

【示例代码】：

.header {
	width:960px;
	margin:0 auto;
}

2.12.2 文字居中和盒子居中区别

盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐；

块级盒子水平居中：左右margin 改为 auto 。如：

/*  文字、行内元素、行内块元素水平居中 */
text-align: center;
 
/* 块级盒子水平居中:左右margin改为auto就阔以了 */
margin: 10px auto;

2.12.3 插入图片和背景图片的区别

插入图片：如产品展示类，移动位置只能靠盒模型 padding 、margin；
背景图片：一般用于小图标背景，或者超大背景图片。背景图片只能通过background-position。

【示例代码】：

/* 插入图片 */
img {  
	width: 200px;/* 插入图片更改大小 width 和 height */
	height: 210px;
	margin-top: 30px;  /* 插入图片更改位置，可以用margin或padding盒模型 */
	margin-left: 50px; /* 插入图片也是一个盒子 */
}

/* 背景图片 */
div {
	width: 400px;
	height: 400px;
	border: 1px solid purple;
	background: #fff url(images/sun.jpg) no-repeat;
	/* 背景图片更改位置 用 background-position */
	background-position: 30px 50px;
}

2.12.4 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并（也称外边距塌陷）。

相邻块元素垂直外边距的合并

【解决方案】：尽量给只给一个盒子添加margin值。
嵌套块元素垂直外边距的合并（塌陷）

【解决方案】：
1. 可以为父元素定义上边框；
2. 可以为父元素定义上内边距；
3. 可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。

2.13 盒子模型布局稳定性

内边距和外边距，什么情况下用内边距，什么情况下用外边距？

大部分情况下是可以混用的，如根据稳定性来分，建议如下：

优先使用宽度(width)=> 其次，使用内边距(padding)=> 再次，外边距(margin)。

 width >  padding  >   margin

原因：

margin ：会有外边距合并，还有 IE6下面margin加倍的bug，所以最后使用。
padding ：会影响盒子大小，需要进行加减计算（麻烦），其次使用。
width ：没有问题，较常使用宽度剩余法、高度剩余法来做。

2.14 CSS3部分新属性

2.14.1 圆角边框

如图：
在这里插入图片描述
【语法】：

border-radius:length;  /* length 为数值或百分比 */

【示例】：

/* 正方形变成一个圆 */
border-radius: 50%;

在这里插入图片描述

2.14.2 盒子阴影（CSS3）

如图：
在这里插入图片描述
【语法】：

box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影；

值	描述
`h-shadow`	必须。水平阴影的位置。允许负值
`v-shadow`	必须。垂直阴影的位置。允许负值
`blur`	可选。模糊距离
`spread`	可选。阴影的尺寸
`color`	可选。阴影的颜色
`inset`	可选。将外部阴影（`outset`）改为内部阴影

注：外阴影 (outset) 是默认的，但是不能写，想要内阴影可以写inset 。

【语法示例】：

div {
	width: 200px;
	height: 200px;
	border: 10px solid red;
	/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
	/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
	box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);			
}

2.15 浮动（float）

2.15.1 CSS 布局的三种机制

CSS 提供了 3 种机制 来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位。

2.15.2 普通流

块级元素：独占一行，从上向下顺序排列；
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素：按照从左到右顺序排列，碰到父元素边缘则自动换行；
常用元素：span、a、i、em等

2.15.3 浮动

设置元素的浮动属性以使其脱离标准普通流的控制，并移动到指定位置。

【语法】：

选择器 { float: 属性值; }

属性值：none(默认值，不浮动)、left(左浮动)、right(右浮动)。

【特性】

脱离标准流（俗称 “脱标” ）；
不占有原来位置；
float属性会改变元素display属性

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和行内块极其相似（但是元素之间没有空白间隙）。

2.15.4 浮动(float)的应用

在这里插入图片描述
实际重要的导航栏中，不会直接用链接a ，而是用 li 包含链接(li+a)的做法。

li+a 语义更清晰，一看就是有条理的列表型内容；
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

2.15.5 清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

准确地说，并不是清除浮动，而是 清除浮动后造成的影响 。

清除浮动的本质：

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不再影响下面的标准流。
清除浮动的方法：

选择器 {clear:属性值;}

属性值	描述
`left`	不允许左侧有浮动元素（清除左侧浮动的影响）
`right`	不允许右侧有浮动元素（清除右侧浮动的影响）
`both`	同时清除左右两侧浮动的影响

1） 额外标签法(隔墙法)

在浮动元素末尾添加一个空的标签，如下所示：

<div style=”clear:both”></div>

2）父级添加overflow属性方法

可以给父级添加：

div:{overflow：hidden | auto | scroll｝

3）使用after伪元素清除浮动

.clearfix:after {
	content: ""; 
	display:block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}   

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

4）使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
	content:"";
	display:table; 
}
.clearfix:after {
	clear:both;
}
.clearfix {	*zoom:1;}     /* IE6、7 专有 */

2.15.6 清除浮动总结

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级`overflow:hidden;`	书写简单	溢出隐藏
父级`after`伪元素	结构语义化正确	IE6-7不支持`:after`，有兼容性问题
父级双伪元素	结构语义化正确	IE6-7不支持`:after`，有兼容性问题

2.16 定位

定位也是用来布局的，由两部分组成：“定位模式” 和 “边偏移”。

定位改变display属性：一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换为行内块，就可以给这个盒子直接设置宽度和高度等。

浮动元素、绝对定位(固定定位）的元素都不会触发外边距合并的问题。

2.16.1 边偏移

简单说，定位的盒子是通过边偏移来移动位置的。凡是有定位的地方必有边偏移.

在 CSS 中，通过 top、bottom、left 、 right 属性定义元素的边偏移；

边偏移 需要和 定位模式 联合使用，单独使用无效。

2.16.2 定位模式 (position)

【语法】：

选择器 { position: 属性值; }

不同情况下，用不同的定位模式：

值	定义
`static`	默认。无定位或静态定位，没有边偏移，实际开发中基本不用
`relative`	相对定位。1）保留原位置；2）相对于原来在标准流中的位置来移动的
`absolute`	绝对定位。1）不保留原位置；2）以带有定位的父级元素来移动位置。如果父级都没有定位，则以浏览器文档为准移动位置。
`fixed`	固定定位

由于子元素不占据位置，所以使用绝对定位；由于父元素占据位置，为不影响后面元素正常显示，因此使用相对定位。

定位布局时，应用 z-index 层叠等级属性调整盒子的堆叠顺序时，只能应用于 相对定位。

口诀：
子绝父相 —— 子级是绝对定位时，父级用相对定位。

2.16.3 相对定位（relative）

相对定位：通过设置垂直或水平位置，相对于原来位置移动，元素设置此属性之后仍然处于文档流中，不影响其他元素的布局。

🔔 注：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

2.16.4 固定定位(fixed)

固定定位 是 绝对定位 的一种特殊形式（IE6等低版本不支持固定定位）。

【特点】：

完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度。

2.16.5 绝对定位（absolute）

absolute：元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。

绝对定位的盒子居中
不能通过设置 margin: auto 设置水平居中。

使用绝对定位时要想实现水平居中，按照下图所示方法：

1）left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2）margin-left: -100px;：让盒子向左移动自身宽度的一半。

父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位

2.17 CSS 高级技巧

2.17.1 元素的显示与隐藏

display ：设置或检索对象是否、及如何显示。
```
div: {display: none;} /* 隐藏对象 */

/* 除了转换为块级元素之外，同时还有显示元素的意思。 */
div: {display: block;}
```
特点：隐藏之后，不再保留位置。
应用场景：配合 js 做特效，比如下拉菜单，应用极为广泛。
visibility可见性（使用较少）
设置或检索是否显示对象。
```
div: {visibility:visible;} /*　对象可视  */

div: {visibility:hidden;}  /* 对象隐藏 */
```
特点：隐藏之后，继续保留原有位置。

overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

div: {overflow:属性值}

属性值	描述
`visible`	不剪切内容也不添加滚动条
`hidden`	不显示超过对象尺寸的内容，超出的部分隐藏掉
`scroll`	不管内容超出与否，总是显示滚动条
`auto`	超出自动显示滚动条，不超出不显示滚动条

2.17.2 CSS用户界面样式

界面样式，更改一些用户操作样式（鼠标样式、表单轮廓、防止表单域拖拽等），以便提供更好的用户体验。

鼠标样式cursor

值描述
default 小白默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
```
img: {cursor:pointer}
```

值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline
如 input 文本框边缘的外围，可起到突出元素的作用。
```
 outline : outline-color ||outline-style || outline-width
```
一般不会关心设置多少，平时都是去掉的，直接outline: 0;或者outline: none;
```
<input type="text" style="outline: 0;" />
```

防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

在这里插入图片描述

2.17.3 vertical-align 垂直对齐

【回顾】：

有宽度的块级元素居中对齐：margin: 0 auto;
文字居中对齐：text-align: center;

vertical-align 垂直对齐，只针对于行内元素或者行内块元素。

vertical-align : baseline | top | middle | bottom

🔔 注：通常用来控制 图片/表单 与文字的对齐。
通过vertical-align 控制图片和文字的垂直关系。默认的图片会和文字基线对齐.

图片、表单和文字对齐
（默认：图片与文字成基线对齐。）

模式常用属性值
基线对齐 vertical-align: baseline;
垂直居中 vertical-align: middle;
顶部对齐 vertical-align: top;

模式	常用属性值
基线对齐	`vertical-align: baseline;`
垂直居中	`vertical-align: middle;`
顶部对齐	`vertical-align: top;`

去除图片底侧空白缝隙

【原因】：图片或表单等行内块元素，它的底线会和父级盒子的基线对齐。

【解决】：

方法一：让图片不要和基线对齐。
```
img｛vertical-align:middle} /* 或 top 或 bottom */
```
方法二：转换为块级元素
```
 img {display：block;}
```

2.17.4 溢出文字省略号显示

white-space
设置如何处理元素中的空白（或对象内文本显示方式），通常用来强制一行显示内容。
```
p {white-space:nowrap；}
```

text-overflow 文字溢出
设置是否使用省略标记（…）标示对象内文本的溢出。

/* 不显示省略标记（...），而是简单的裁切 */
div {text-overflow : clip；}

/* 当对象内文本溢出时显示省略标记（...）*/
div {text-overflow：ellipsis；}

注：一定要先white-space强制一行内显示，和overflow搭配使用。

溢出文字省略号显示 三部曲：

/*1. 先强制一行内显示文本*/
white-space: nowrap;
 /*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;

2.18 切图插件Cutterman

Cutterman 是一款运行在 photoshop 中的插件，能够自动将你需要的图层进行输出。

官网：http://www.cutterman.cn/zh/cutterman

在这里插入图片描述

注： cutterman 插件要求 photoshop 必须是完整版，不能是绿色版。

2.19 CSS 精灵(雪碧)技术（sprite)

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需精灵图中不同位置的某个小图。

这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来

需要使用到的CSS：

background-image;
background-repeat
background-position属性进行背景定位，

其中最关键的是使用background-position属性精确地定位。

精灵技术使用的核心

首先，css精灵技术主要针对于背景图片，插入的图片img不需要。

其次，需要精确测量每个小背景图片的大小和位置。给盒子指定小背景图片时，背景定位基本都是负值。
制作精灵图
把小图拼合成一张大图。大多数情况下，精灵图都由网页美工做。

小公司，或背景图片使用很少的情况，没必要使用精灵技术，维护成本太高。如果背景图片较多，建议使用精灵技术。

2.20 滑动门

为使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。

它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。

常见用于导航栏，如微信官网 http://weixin.qq.com/

【核心技术】：利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局如下所示：

效果展示：

在这里插入图片描述

html结构

<li>
	  <a href="#">
	    <span>导航栏内容</span>
	  </a>
	</li>

CSS样式

* {
	padding:0;
	margin:0;	
   }
   
body{
      background: url(images/wx.jpg) repeat-x;
   }
   
.father {
      padding-top:20px;
   }
   
li {
	padding-left: 16px;
	height: 33px;
	float: left;
	line-height: 33px;
	margin:0  10px;
	background: url(./images/to.png) no-repeat left ;
    }
    
a {
	padding-right: 16px;
	height: 33px;
	display: inline-block;
	color:#fff;
	background: url(./images/to.png) no-repeat right ;
	text-decoration: none;
    }
li:hover,
li:hover a {
	background-image:url(./images/ao.png);
	}

代码中涉及的素材图片存放在网盘 [下载] 。

2.21 margin负值之美

负边距+定位：水平垂直居中
前面讲过，一个绝对定位的盒子，利用父盒子的 50%，然后往左(上) 走自己宽度的一半，可以实现盒子水平垂直居中。

div {
	/*这样，浮动的盒子就是紧贴在一起的*/
	float: left;
	width: 200px;
	height: 300px;
	border: 1px solid #ccc;
	margin-left: -1px;
	margin-top: -1px;
}

压住盒子相邻边框

效果
在这里插入图片描述
示例代码：

div {
	position: relative;
	/*浮动的盒子是紧贴在一起的*/
	float: left;
	width: 200px;
	height: 300px;
	border: 1px solid #ccc;
	margin-left: -1px;
	margin-top: -1px;
}

/*鼠标经过div  */
div:hover {
	/*让当前鼠标经过的这个div 升到最高处*/
	/*定位的盒子是最高层的  */
	border: 1px solid #f40;
	/*都是定位的盒子，通过z-index 来实现层级关系*/
	z-index: 1;
}

2.22 CSS三角形之美

在这里插入图片描述
核心是用css边框模拟三角效果，做法如下：

宽度、高度为0；
4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明；
为了照顾兼容性，低版本的浏览器，加上 font-size: 0; line-height: 0;

CSS样式代码：

div {
 	width: 0; 
    height: 0;
    line-height:0；
    font-size: 0;
	border-top: 10px solid red;
	border-right: 10px solid green;
	border-bottom: 10px solid blue;
	border-left: 10px solid #000; 
 }

3 HTML5

HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML。

3.1 HTML5 的概念

两个概念：

是一个新版本的 HTML 语言，定义了新的标签、特性和属性；
拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5。

3.2 HTML5 新增标签

新增语义化标签：

标签名称	描述
`header`	头部标签
`nav`	导航标签
`article`	内容标签
`section`	块级标签
`aside`	侧边栏标签
`footer`	尾部标签

如图所示：
在这里插入图片描述
🔔 注：

语义化标签主要针对搜索引擎；
新标签可以使用一次或者多次；
在 IE9 浏览器中，需要把语义化标签都转换为块级元素；
语义化标签，在移动端支持比较友好。

3.3 多媒体标签

音频 – audio
视频 – video

3.3.1 音频标签 - audio

audio目前支持的 3 种格式

格式 IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √

格式	IE9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

audio的参数

属性	值	描述
`autoplay`	`autoplay`	音频在就绪后马上播放
`controls`	`controls`	向用户显示控件，比如播放按钮。
`loop`	`loop`	每当音频结束时，重新开始播放
`src`	`url`	要播放音频的`URL`地址

audio代码演示：

<body>
  <!-- 注：在 chrome 浏览器中被禁用了 autoplay 属性 -->	
  <!-- 因为不同浏览器支持不同的格式，一般采取给同一音频准备多个不同格式的文件 -->
	<audio controls="controls">
        <source src="media/snow.mp3" type="audio/mpeg" />
        <source src="media/snow.ogg" type="audio/ogg" />
        您的浏览器不支持播放声音
	</audio>
</body>

在这里插入图片描述

3.3.2 视频标签 - video

video支持的三种格式

格式 IE Firefox Opera Chrome 3.0 Safari 3.0
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

格式	IE	Firefox	Opera	Chrome 3.0	Safari 3.0
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

video语法格式：

<video src="./media/video.mp4" controls="controls"></video>

video 参数：

属性	值	描述
`autoplay`	`autoplay`	视频就绪自动播放（Chrome需添加`muted`来解决）
`controls`	`controls`	向用户显示播放控件
`width`	pixels（像素）	设置播放器宽度
`height`	pixels（像素）	设置播放器高度
`loop`	`loop`	播放完是否继续播放该视频（循环播放）
`preload`	`auto`（预加载视频） `none`（不预加载）	规定是否预加载视频，如果设置了`autoplay`就忽视此属性
`src`	`url`	视频`url`地址
`poster`	`imgurl`	加载等待时画面图片
`muted`	`muted`	静音播放

代码演示：

<body>
    <!-- 谷歌浏览器禁用了自动播放功能，解决方案：给视频添加静音属性 -->
    <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
        <source src="media/video.mp4" type="video/mp4" />
        <source src="media/video.ogg" type="video/ogg" />
        您的浏览器太low了，不支持播放此视频
    </video>
</body>

3.3.3 多媒体标签总结

音频标签与视频标签使用基本一致；
多媒体标签在不同浏览器下情况不同，存在兼容性问题；
谷歌浏览器禁用了音频和视频标签的自动播放功能；
谷歌浏览器中视频添加 muted 标签可以实现自动播放；

3.4 input 标签新增属性

属性值	说明
`type="email"`	限制用户输入必须为 email 类型
`type="url"`	限制用户输入必须为URL类型
`type="date"`	限制用户输入必须为日期类型
`type="time"`	限制用户输入必须为时间类型
`type="month"`	限制用户输入必须为月类型
`type="week"`	限制用户输入必须为周类型
`type="number"`	限制用户输入必须为数字类型
`type="tel"`	手机号码
`type="search"`	搜索框
`type="color"`	生成一个颜色选择菜单

3.5 新增表单属性

属性	值	说明
`required`	`required`	拥有该属性表示必填，内容不能为空
`placeholder`	提示文本（点位符）	表单的提示信息，存在默认值将不显示
`autofocus`	`autofocus`	自动获得焦点，页面加载完成时，自动定位到指定表单
`autocomplete`	`off` / `on`	规定输入字段是否启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
`multiple`	`multiple`	在打开的文件浏览器中，可多选文件并提交

3.6 CSS3属性选择器

目前还草案，不断改进中，移动端支持优于 PC 端。

3.6.1 属性选择器列表

选择符	简介
`E[att]`	选择具有 att 属性的 E 元素
`E[att="val"]`	选择具有 att 属性且属性值等于 val 的 E 元素
`E[att^="val"]`	匹配具有 att 属性、且值以 val 开头的 E 元素
`E[att$="val"]`	匹配具有 att 属性、且值以 val 结尾的 E 元素
`E[att*="val"]`	匹配具有 att 属性、且值中含有 val 的 E 元素

3.6.2 属性选择器代码演示

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

3.7 结构伪类选择器

3.7.1 属性列表

选择符	简介
`E:first-child`	匹配父元素中的第一个子元素 E
`E:last-child`	匹配父元素中最后一个 E 元素
`E:nth-child(n)`	匹配父元素中的第`n`个子元素 E
`E:first-of-type`	指定类型 E 的第一个
`E:last-of-type`	指定类型 E 的最后一个
`E:nth-of-type(n)`	指定类型 E 的第`n`个

代码演示

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

3.7.2 `nth-child` 参数详解

nth-child 详解
- n可以是数字、关键字、公式；
- n如果是数字，就是选中第几个；
- 常见的关键字有 even 偶数、odd 奇数；
- 常见的公式如下表(如果 n 是公式，则从0开始计算)；
- 但是第0个元素或者超出了元素的个数会被忽略；
n 公式

式取值
2n 偶数
2n+1 奇数
5n 5 10 15 …
n+5 从第5个开始（包含第5个）到最后
-n+5 前5个（包含第5个）…
代码演示：

式	取值
`2n`	偶数
`2n+1`	奇数
`5n`	5 10 15 …
`n+5`	从第`5`个开始（包含第`5`个）到最后
`-n+5`	前`5`个（包含第`5`个）…

 /* 偶数 */
ul li:nth-child(even) {
	background-color: aquamarine;
}
   
/* 奇数 */
ul li:nth-child(odd) {
	background-color: blueviolet;
}
   
/*  n 是公式，从 0 开始计算  */
ul li:nth-child(n) {
	background-color: lightcoral;
}
   
/* 偶数 */
ul li:nth-child(2n) {
	background-color: lightskyblue;
}
   
/* 奇数 */
ul li:nth-child(2n + 1) {
	background-color: lightsalmon;
}
   
/*  选择第 0 5 10 15, 应该怎么选  */
ul li:nth-child(5n) {
	background-color: orangered;
}
   
/*  n + 5 就是从第5个开始往后选择  */
ul li:nth-child(n + 5) {
	background-color: peru;
}
   
/*  -n + 5 前五个  */
ul li:nth-child(-n + 5) {
	background-color: tan;
}

3.7.3 `nth-child` 和 `nt-of-type` 的区别

区别
- nth-child(n) 选择父元素里面的第几个子元素，不管里面的子元素是否同一类型；
- nt-of-type 选择指定类型的元素

代码演示：

div :nth-child(1) {
	background-color: lightblue;
}
   
div :nth-child(2) {
	background-color: lightpink;
}
   
div span:nth-of-type(2) {
	background-color: lightseagreen;
}
   
div span:nth-of-type(3) {
	background-color: #fff;
}

3.8 伪元素选择器

3.8.1 伪类选择器

选择符	简介
`::before`	在元素内部的前面插入内容
`::after`	在元素内部的后面插入内容

代码演示：

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

3.8.2 伪类选择器注意事项

before 和 after 必须有 content 属性；
before 在内容前面，after 在内容后面；
before 和 after 创建的是一个元素（属于行内元素）；
创建出来的元素在 Dom 中查找不到，所以称为伪元素；
权重：伪元素和标签选择器一样，权重为 1。

3.8.3 伪元素案例 - 添加字体图标

p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

3.9 `2D` 转换之 `translate`

3.9.1 `2D`转换

2D 转换：改变标签在二维平面上的位置和形状
移动： translate
旋转： rotate
缩放： scale

3.9.2 `translate` 语法

x ： x 轴上水平移动；
y ： y 轴上水平移动。

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

3.9.3 重点知识点

2D 的移动主要指水平、垂直方向上的移动；
translate 最大的优点：是不影响其他元素的位置；
translate 中的100%单位，是相对于本身的宽度和高度来进行计算的；
行内标签没有效果。

3.9.4 代码演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  transform: translate(100px, 100px);

  /* 水平移动 100px */
  transform: translate(100px, 0)

  /* 垂直移动 100px */
  transform: translate(0, 100px) 

  /* 水平移动 100px */
  transform: translateX(100px); 

  /* 垂直移动 100px */
  transform: translateY(100px)
}

3.10 实例 - 让盒子实现水平垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. tranlate里面的参数可以用 % */
            /* 2. 如果里面的参数是%，移动的距离是盒子自身的宽度或者高度来对比的 */
            /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
            /* transform: translateX(50%); */
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
            transform: translate(-50%, -50%);
        }
        
        span {
            /* translate 对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

</html>

3.11 `2D` 转换 `rotate`

rotate 旋转：2D 旋转指让元素在二维平面内顺时针或者逆时针旋转。

使用步骤：
1. 给元素添加转换属性 transform；
2. 属性值为 rotate(角度) 。

语法示例

div{
	/* 顺时针方向旋转 30度 */
	transform: rotate(30deg);
}

知识点
- rotate 里面跟角度的度数，单位 deg；
- 角度为正时，顺时针，角度为负时，逆时针；
- 默认旋转中心点：元素的中心点。

案例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="media/pic.jpg" alt="">
</body>

</html>

本案例效果图示如下：
在这里插入图片描述

3.12 案例 - CSS制作下拉框三角符号

案例效果：
在这里插入图片描述
案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        
        /* 鼠标经过div  里面的三角旋转 */
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

3.13 设置元素旋转中心点(`transform-origin`)

transform-origin 基础语法
```
transform-origin: x y;
```
重要知识点
- 注意后面的参数 x 和 y 用空格进行分隔；
- x、y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center；
- 可以给 x、y 设置像素或者方位名词(top、bottom、left、right、center)。

旋转中心案例 在这里插入图片描述
【案例源码】：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }
        
        div::before {
            content: "pink";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        
        /* 鼠标经过div 里面的before 复原 */	        
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

3.14 `2D` 转换之 `scale`

scale 的作用：控制元素的放大与缩小。

语法
```
transform: scale(x, y)
```
知识要点
- 注意，x 与 y 之间使用逗号进行分隔；
- transform: scale(1, 1): 宽高都放大一倍，相当于没有放大；
- transform: scale(2, 2): 宽和高都放大 2 倍；
- transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致；
- transform:scale(0.5, 0.5): 缩小；
- scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子。

示例代码：

div:hover {
	/* 注意：数字是倍数的含义，所以不要加单位 */
	transform: scale(2, 2)
   
	/* 实现等比缩放，同时修改宽与高 */
	transform: scale(2)
   
	/* 小于 1 就等于缩放*/
	transform: scale(0.5, 0.5)
}

案例 - 图片放大

【案例效果】：
在这里插入图片描述

【案例代码】：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        
        div img {
            transition: all .4s;
        }
        
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>

</html>

案例 - 分页按钮

【案例效果】：
在这里插入图片描述
【案例代码】：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

3.15 `2D` 转换综合写法以及顺序问题

知识要点
- 同时使用多个转换，其格式为 transform: translate() rotate() scale()；
- 顺序会影响到转换的效果(如果先旋转会改变坐标轴方向)
- 在同时有位置或者其他属性时，应要将位移放到最前面。

代码示例

div:hover {
	transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

3.16 动画(`animation`)

动画的概念：
动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
动画的基本使用
- 先定义动画；
- 在调用定义好的动画。

语法格式(定义动画)

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

语法格式(使用动画)

div {
	/* 调用动画 */
	animation-name: 动画名称;
	/* 持续时间 */
	animation-duration: 持续时间；
}

动画序列
- 0% 是动画开始，100 % 是动画完成，这样的规则就是动画序列；
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果；
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数；
- 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%。

示例代码

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
</style>

案例 - 动画序列

【案例代码】：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* from to 等价于  0% 和  100% */
        /* @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间（本案例10s）的划分 25% * 10  =  2.5s */
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0)
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

3.17 动画属性

3.17.1 常见的属性

属性	描述
`@keyframes`	规定动画
`animation`	所有动画属性的简写属性，除了`animation-play-state`属性
`animation-name`	规定`@keyframes`动画的名称(必须的)
`animation-duration`	规定动画完成一个周期所花费的秒或毫秒，默认是0(必须的)
`animation-timing-function`	规定动画的速度曲线，默认是“`ease`”
`animation-delay`	规定动画何时开始，默认是`0`
`animation-iteration-count`	规定动画被播放的次数，默认是`1`，还有`infinite`
`animation-direction`	规定动画是否在下一周期逆向播放，默认是“`normal`”，`alternate`逆播放
`animation-play-state`	规定动画是否正在运行或暂停，默认是“`running`”，还有“`paused`”
`animation-fill-mode`	规定动画结束后状态，保持`forwards`，回到起始`backwards`

3.17.2 示例代码

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}

3.18 动画简写

3.18.1 动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

3.18.2 知识要点

简写属性里，不包含 animation-paly-state；
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用；
要想动画走回来，而不是直接调回来：animation-direction: alternate；
盒子动画结束后，停在结束位置：animation-fill-mode: forwards ；

3.18.3 示例代码

animation: move 2s linear 1s infinite alternate forwards;

3.19 速度曲线

速度曲线细节
animation-timing-function: 规定动画的速度曲线，默认是ease。

值	描述
`linear`	匀速 - 动画从头到尾的速度是相同的。
`ease`	默认 - 动画以低速开始，然后加快，在结束前变慢。
`ease-in`	动画以低速开始。
`ease-out`	动画以低速结束。
`ease-in-out`	动画以低速开始和结束。
`steps()`	指定了时间函数中的间隔数量（步长）。

速度曲线步长

案例效果：
在这里插入图片描述
案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 40px;
            width: 0;
            height: 60px;
            background-color: #F19EC2;
            color: #fff;
            /* 文字强制一行内显示 */
            white-space: nowrap;
            /* steps：分几步完成动画(有steps 就不要再写 ease 或者linear )*/
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 445px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘 - 我在这里等你</div>
</body>

</html>

案例 - 奔跑的熊大

效果图示：
在这里插入图片描述
案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

图像素材 [ 网盘下载 ] 提取码：7yiw

3.20 3D

3.20.1 认识3D转换

3D 的特点
- 近大远小；
- 物体和面遮挡不可见。
三维坐标系
- x 轴：水平向右 – x 轴右边是正值，左边是负值
- y 轴：垂直向下 – y 轴下面是正值，上面是负值
- z 轴：垂直屏幕 – 往外边的是正值，往里面的是负值

在这里插入图片描述

3.20.2 `3D`转换

3D 转换知识要点
- 3D 位移：translate3d(x, y, z)
- 3D 旋转：rotate3d(x, y, z)
- 透视：perspctive
- 3D呈现： transfrom-style

3D 移动 translate3d
3D 移动：在 2D 移动的基础上多加了一个可以移动的方向 - z 轴方向。

transform: translateX(100px) /* 仅仅是在 x 轴上移动 */
transform: translateY(100px) /* 仅仅是在 y 轴上移动 */
transform: translateZ(100px) /* 仅仅是在 z 轴上移动 */
transform: translate3d(x, y, z) /* x、y、z 为要移动的轴的方向的距离 */

注： x, y, z 对应的值不能省略，如不需要则用 0 进行填充。

语法
```
transform: translate3d(x, y, z)
```

语法示例

transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 对应的值不能省略，不需要则填写 0 进行填充 */
transform: translate3d(100px, 100px, 0)

3.20.3 透视 `perspective`

perspective 属性定义 3D 元素距视图的距离，像素单位。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身（透视需要写在被视察元素的父盒子上面）。

知识要点
d：视距，人的眼睛到屏幕的距离；
z：z 轴，z 轴越大(正值)，看到的物体就越大。

示例代码

body {
  perspective: 500;
  -webkit-perspective: 500; /* Safari 和 Chrome */
}

3.20.4 `translateZ`

perspecitve 与 translateZ 的区别
perspecitve 给父级进行设置，translateZ 给子元素进行设置不同的大小。

3.20.5 `3D` 旋转`rotateX`

3D 旋转：可以让元素在三维平面内沿着 x 轴、y 轴、z 轴或者自定义轴进行旋转。

语法

transform: rotateX(45deg) /* 沿着 x 轴正方向旋转 45 度 */
transform: rotateY(45deg) /* 沿着 y 轴正方向旋转 45 度 */
transform: rotateZ(45deg) /* 沿着 z 轴正方向旋转 45 度 */
transform: rotate3d(x, y, z, 45deg) /* 沿着自定义轴旋转 45度 */

案例 - rotateX

1）示例效果：在这里插入图片描述
2）示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 300px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

图片素材 pig,jpg [ 网盘下载 ] 提取码: zivx

左手准则
- 左手拇指指向 x 轴的正方向；
- 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向。

3.20.6 `3D` 旋转 `rotateY`

案例效果

案例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

左手准则
- 左手拇指指向 y 轴的正方向;
- 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)。

3.20.7 `3D` 旋转 `rotateZ`

案例效果

案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            /* transform: rotateZ(180deg); */
            /* transform: rotate3d(x,y,z,deg); */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* transform: rotate3d(0, 1, 0, 45deg); */
            transform: rotate3d(1, 1, 0, 45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

rotate3d
- transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转（deg 为角度）
- x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
  - transform: rotate3d(1, 1, 0, 180deg) – 沿着对角线旋转 180deg
  - transform: rotate3d(1, 0, 0, 180deg) – 沿着 x 轴旋转 180deg

3.20.8 `3D`呈现`transform-style`

transform-style属性控制子元素是否开启三维立体环境。

代码写给父级，但是影响的是子盒子。

语法
```
transform-style: flat | preserve-3d;
```
值描述
flat 默认值。子元素不开启 3D 立体空间
preserve-3d 子元素开启立体空间

案例 - transform-style

1）案例效果：
在这里插入图片描述
2）案例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(60deg);
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>	
</html>

附：相关文档查阅地址

经常查阅文档是一个非常好的学习习惯。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

下一篇：重温前端基础（二）- 移动WEB开发

点赞
评论
分享
x
海报分享

扫一扫，分享海报
收藏 2
打赏

打赏

一刀^••^

你的鼓励将是我创作的最大动力

C币余额

2C币 4C币 6C币 10C币 20C币 50C币

确定
举报
关注关注
一键三连
点赞Mark关注该博主, 随时了解TA的最新博文

已标记关键词清除标记

插入表情

还能输入1000个字符 “速评一下”

特殊字符	描述	代码
	空格符	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`￥`	人民币	`¥`
`©`	版权	`©`
`®`	注册商标	`®`
`°`	摄氏度	`°`
`±`	正负号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	平方2（上标2）	`²`
³	立方3（上标3）	`³`

值	描述
`flat`	默认值。子元素不开启 `3D` 立体空间
`preserve-3d`	子元素开启立体空间

特殊字符	描述	代码
	空格符	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`￥`	人民币	`¥`
`©`	版权	`©`
`®`	注册商标	`®`
`°`	摄氏度	`°`
`±`	正负号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	平方2（上标2）	`²`
³	立方3（上标3）	`³`

重温前端基础（一） HTML、CSS、H5C3

目录

0. WEB 标准构成

1. HTML

1.1 HTML概念

1.2 超文本含义

1.3 页面语言

1.4 字符集

1.5 标签语义化

1.6 常用标签

1.7 图像标签 img

1.8 链接标签

1.9 锚点定位

1.10 base 标签

1.11 特殊字符

1.12 XHTML

1.13 HTML和 XHTML之间的区别

1.14 表格

1.14.1 表格属性

1.14.2 表头单元格标签 th

1.14.3 表格标题- caption

1.14.4 合并单元格

1.14.5 表格总结

1.15 列表

1.15.1 无序列表 ul

1.15.2 有序列表 ol

1.15.3 自定义列表

1.15.4 列表总结

1.16 表单标签

1.16.1 input 控件

1.17 lable 标签

1.18 textarea控件(文本域)

1.19 select下拉列表

1.20 form 表单域

2. 层叠样式表（CSS）

2.1 书写位置

2.1.1 行内式（内联样式）

2.1.2 内嵌式（内部样式）

2.1.3 外链式（外部样式表）

2.2 css 选择器

2.2.1 基础选择器

2.2.2 复合选择器

2.3 font字体

2.4 CSS外观属性

2.4.1 color:文本颜色

2.4.2 text-align:文本水平对齐方式

2.4.3 line-height:行间距

2.4.4 text-indent:首行缩进

2.4.5 text-decoration 文本的装饰

2.4.6 css外观属性总览

2.5 标签显示模式（display）

2.5.1 块级元素

2.5.2 行内元素 (inline-level)

2.5.3 行内块元素（inline-block）

2.5.4 三种模式的区别

2.5.5 标签显示模式转换 display

2.6 行高（line-height）

2.7 CSS 背景(background)

2.7.1 背景颜色(color)

2.7.2 背景图片(image)

2.7.3 背景平铺（repeat）

2.7.4 背景位置(position)

2.7.5 背景附着

2.7.6 背景简写

2.7.7 背景透明（CSS3）

2.8 CSS 三大特性

2.8.1 层叠性

2.8.2 继承性

2.8.3 优先级

2.9 盒子模型（Box Model）

2.10 盒子边框（border）

2.11 内边距（padding）

2.12 外边距（margin）

2.12.1 块级盒子水平居中

2.12.2 文字居中和盒子居中区别

2.12.3 插入图片和背景图片的区别

2.12.4 外边距合并

2.13 盒子模型布局稳定性

2.14 CSS3部分新属性

2.14.1 圆角边框

3.7.2 `nth-child` 参数详解

3.7.3 `nth-child` 和 `nt-of-type` 的区别

3.9 `2D` 转换之 `translate`

3.9.1 `2D`转换

3.9.2 `translate` 语法

3.11 `2D` 转换 `rotate`

3.13 设置元素旋转中心点(`transform-origin`)

3.14 `2D` 转换之 `scale`

3.15 `2D` 转换综合写法以及顺序问题

3.16 动画(`animation`)

3.20.2 `3D`转换

3.20.3 透视 `perspective`

3.20.4 `translateZ`

特殊字符	描述	代码
	空格符	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`￥`	人民币	`¥`
`©`	版权	`©`
`®`	注册商标	`®`
`°`	摄氏度	`°`
`±`	正负号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	平方2（上标2）	`²`
³	立方3（上标3）	`³`