HTML和CSS篇
一、HTML的基本结构
1、什么是标签
所有的字符内容都是用尖括号 < 和 > 括起来的，这样的内容被称为标签，其中 <> 代表开始标签，</> 代表结束标签。
上图展示的是双标签元素，其实 HTML 标签有两种形式：
双标签
<标签名>内容</标签名>
双标签是指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用 <标签名> 表示，结束标签用 </标签名> 表示，只有一对标签一起使用才能表示一个具体的含义。
单标签
单标签没有开标签和闭标签之分，它只有一个标签，其写法如下所示：
<标签名>
或者
<标签名/>
例如，换行标签 <br/>，使用该标签可以给文字段落换行。
2、html 标签
html 标签标识该文档为 HTML 文档。它相当于是一个两层楼的房子框架，第一层是 body 楼，居民住在不同类型的房间中，第二层是 head 楼，里面放着居民的信息文件。
<html> 标签置于 HTML 文档最前边，用来标识 HTML 文档的开始，而 </html> 标签恰好相反，它放在 HTML 文档最后边，用来标识 HTML 文档的结束。
两个标签必须成对使用，网页中其他的所有标签都应该放在 <html> 和 </html> 标签之间。
基本语法：
<html>
...
</html>
3、head 标签
head 标签是头部元素的家 ，头部元素是对页面的一些基本描述。在上面的模板中，我们可以看到 head 标签里有两个成员，title 标签和 meta 标签。其实不止这两个，常见的头部标签如下表所示：
| 标签 | 描述 |
|---|---|
| <title> | 定义页面标题内容。 |
| <meta> | 有关文档本身的元信息，例如：文档的作者，用于查询的关键词，关于文档的描述等。 |
| <style> | 定义 CSS 层叠样式表的内容。 |
| <link> | 定义外部文件的链接，最常见的用途是链接外部样式表。 |
| <script> | 定义页面中程序脚本的内容。 |
4、meta 标签
meta 标签的功能是提供关于页面的元信息，能够提供文档作者、关键字、描述等多种信息，在 HTML 的头部可以包括任意数量的 meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
其中，name、content 被称为属性，viewport 和 width=device-width, initial-scale=1.0 被称为属性值。
例如：我们添加一个作者的信息。
<meta name="author" content="Lee,1234567@qq.com" />
除了上面介绍的属性，这里再给大家介绍一个字符编码的属性，大家知道我们现在常用的是 UTF-8 编码，这种通用的编码使我们的页面内容能够在不同情况下被正确的解析。
在 meta 标签中，我们使用 charset 属性来规定字符编码，在解析文档时，会告诉浏览器我们使用的编码形式。使用如下：
<meta charset="utf-8" />
5、title 标签
<title>标签是用来设置页面标题的，我们随便打开一个网页都可见其标题。
它有以下几个方面的用处：
- 可以在浏览者保存该页面时成为默认的保存文件名。
- 可以在浏览者将该网址添加进收藏夹时成为收藏夹中该网址的名称。
- 方便搜索引擎索引页面。
- 搜索引擎显示的页面标题往往就是网页 <title> 标签的内容。
在我们的 HTML 模板中 <title>Document</title>，意思是设置页面的标题为 Document。
6、body 标签
body 标签界定了 HTML 文档的主体。在 <body> 和 <body> 之间放的是要显示在页面上的所有内容，如文本、超链接、图像、表格和列表等。
基本语法：
<body>
...
</body>
例如，我们在 body 标签中写入以下内容：
<body>
欢迎来到 body 楼！
</body>
二、行内标签
1、a 标签
基本使用
我们在网页中，经常看到点击一个标题可以跳转到其他页面。
在 HTML 中，使用 a 标签可以实现这一功能，它被称为超链接标签，常用于网页之间的跳转、设置文档书签，以及链接电话、邮箱等。
其基本使用格式如下：
<a href="URL"></a>
URL 是链接的地址。例如：
<a href="https://www.baidu.com">百度</a>
链接邮箱和电话
a 标签除了可以跳转到其他页面，还可以用于创建 email 链接、电话链接等。
使用格式如下：
<a href="mailto:邮箱地址"></a> <a href="tel:电话号码"></a>
target 属性
在 a 标签中还有个 target 属性可以用来规定打开链接文档的位置，它有如下表所示的几种属性值。
| 属性值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 在相同的框架中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
其使用格式为：
<a target="_blank|_self|_top|_parent"></a>
2、span 标签
span 标签是用来组合文档中行内元素的，比如你在文档中写入一些文字，页面会以默认样式输出这些文字，若我们想给这段话中的某些词语添加不一样的字体颜色，这时我们可以用 span 标签去包裹这些词语，然后通过 span 标签去设置字体颜色。
其使用格式如下：
<span></span>
span 标签就像一个透明的盒子，我们可以把多个盒子放在架子的同一行。
span 标签本身没有特殊之处，若不结合 CSS 来使用的话，我们使用其标签就没有意义了。比如：我们的 body 标签中只有一对 span 标签和一些文字内容，可以看到这与不添加标签直接写入文字内容是一样的效果。
3、strong 标签
平时我们浏览网站，会发现网页上字的粗细是不同的，有时候为了让某些词句成为我们关注的焦点，我们会把文字加粗。
在 HTML 中，可以使用 strong 标签来给文字加粗。
使用格式如下：
<strong></strong>
例如：
<strong>塔克拉玛干大沙漠</strong>是中国最大的沙漠。
4、img 标签
基本使用
在 HTML 中，我们用 img 标签来插入图片，它负责向页面中嵌入一幅图像。
准确来讲，img 标签并不会在页面中真正插入图像，而只是提供一个链接地址，通过链接来显示出图像。所以，img 标签创建的是被引用图像的占位空间。
其使用格式为：
<img src="图像 URL" alt="图像描述" />
属性说明如下：
- src 属性定义了图像的链接地址。
- alt 属性则当图像无法显示时，替代显示的文本。
另外，在 img 标签里可以用 width 属性来设置图片的宽度，用 height 属性来设置图片的高度。
我们设置了固定的宽和高后，在不同大小的窗口所看到的图片大小就相同了。
align 属性
align 属性能用来规定如何根据周围的文本来排列图像的位置，其属性值如下所示：
| 属性值 | 说明 |
|---|---|
| top | 顶部对齐 |
| bottom | 底部对齐 |
| middle | 居中对齐 |
| left | 居左对齐 |
| right | 居右对齐 |
title 属性
在 img 标签中，还可以使用 title 属性给元素增加额外的提示信息。
当你把鼠标移到元素上会显示出现一段提示文本。
其基本使用格式如下所示：
<img title="提示文本内容" />
三、块级标签
1、div标签
在 HTML 中，div 标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。
div 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，div 标签可用于对内容块设置样式属性。
div 标签的使用格式如下所示：
<div></div>
2、p 标签
在 HTML 中为我们提供 p 标签来分段。
对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。它有三个可取值，每个可取值的含义如表所示：
| 属性值 | 说明 |
|---|---|
| left | 段落左对齐 |
| right | 段落右对齐 |
| center | 段落居中对齐 |
3、标题标签hn
这里的标题标签不是我们之前讲过的 <title>，而是能够在页面上用于标题显示的 <hn> 系列标签。在 HTML 中一共有六级标题，用 <h1> ~ <h6> 来表示，其中 <h1> 的标题字号最大，依次递减。
在浏览器解析标题标签时，会将标题内容设为一个段落，字体设为黑体，字号大小根据 n 值的大小确定。
4、列表标签
无序列表
在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。
基本用法为：
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
我们使用 type 属性可以修改列表开头的符号，其取值如下：
| 属性值 | 说明 |
|---|---|
| disc | 实心圆 ● |
| circle | 空心圆 ○ |
| square | 实心方块 ■ |
有序列表
有序列表就是使用项目符号来标识项目，比如日常我们需要步骤化的操作，可以使用有序列表来表示。
其基本用法为：
<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
有序列表的默认是从 1 开始的数字排序。我们可以使用 type 属性来改变排序符号，取值如下所示：
| 属性值 | 说明 |
|---|---|
| A | 用大写字母作为排序符号 |
| a | 用小写字母作为排序符号 |
| I | 用大写罗马字符作为排序符号 |
| i | 用小写罗马字符作为排序符号 |
| 1 | 用数字作为排序符号 |
我们默认都是从第一个字母或数字开头来排序的，其实我们可以通过 start 属性，来自定义起始排序符号。start 属性必须要配合 type 属性来使用。例如：
<!--从第 4 个大写罗马数字开始排序-->
<ol type="I" start="4">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
自定义列表
自定义列表跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了。
基本用法为：
<dl>
<dt>列表项一</dt>
<dd>列表项一的描述</dd>
<dt>列表项二</dt>
<dd>列表项二的描述</dd>
</dl>
在开发过程中，一般使用这个组合标签来实现图文混编的功能。例如既有图片又有描述的商品列表，就可以使用这个组合标签来实现。
四、表单标签
1、form 标签
在 HTML 文档中，使用 form 标签来进行表单提交。form 标签有两个重要的属性，action 和 method 属性，其中 action 的属性值是表单提交的地址，method 的属性值是提交的方法。
其基本语法为：
<form action="表单提交地址" method="提交方法"></form>
method 属性规定了表单提交方式，最常用的有两种方式，分别是 GET 和 POST。其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器，而 POST 是将请求参数置于请求体内发送。
2、input 标签
input 标签表示表单，其中它有不同的属性，用于表示不同的表单类型。
文本类表单
以文本框为代表的表单元素称之为文本类元素。
其基本使用格式为：
<input type="text" />
例如，填写用户名的输入框就适合用文本类型的输入框。
选择类表单
选择类表单元素是指单选框和复选框。
- 单选框就是给出多个选项只能选择其中一个。
- 复选框就是给出多个选项可以选择多个。
单选框和复选框的使用格式如下所示：
<!--单选框-->
<input type="radio" name="选项名" value="提交值" />
<!--复选框-->
<input type="checkbox" name="选项名" value="提交值" />
注意：使用单选框时，每个选项一定要设置相同的 name 值，否则就没有单选的效果。
例如，选择性别的输入框就适合用单选框，选择兴趣爱好的输入框就适合用复选框。
对于 radio 类型元素来说，若 name 属性的取值相同，可以实现单选的效果，但 checkbox 不会因为 name 属性的取值相同变成单选。
文件上传类表单
在 HTML 中，我们使用 type=“file” 表示文件类型表单元素，其使用格式为：
<input type="file" name="表单名字" accept="上传文件的格式" />
在 HTML 中，我们使用 type=“submit” 表示发送类型表单元素，其使用格式为：
<input type="submit" name="表单名字" value="表单名" />
下拉列表
下拉列表就是一个鼠标放在目标框中，会出现多种选择的列表。
在 HTML 中，通过 select 和 option 标签可以实现下拉列表框，select 标签用于显示可供用户选择的下拉列表，其中的每个选项都由 option 标签标识。
其语法格式为：
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
select 有两个常用属性，如下所示：
| 属性 | 描述 |
|---|---|
| multiple | 设置下拉列表可以选择多项。 |
| size | 设置下拉列表选择几个表项。 |
option 有两个常用属性，如下所示：
| 属性 | 描述 |
|---|---|
| selected | 设置是否被选中。 |
| value | 设置列表项的默认值。 |
五、HTML5新特性
1、基本语义化标签
语义化标签就是把 HTML 文档中的元素划分到不同区域，每个区域有自己的含义。
在 HTML5 中，提供了如下图所示的语义化标签，让我们可以更直观地看到页面的结构。
标签说明：
- header 标签是头部区域。
- nav 标签是导航区域。
- article 标签是内容区域。
- section 标签是文档中部分内容区域。
- aside 标签是侧边内容栏区域。
- footer 标签是底部信息区域。
2、多媒体标签
多媒体标签就是用于在页面中嵌入音频和视频的标签。
audio 标签
在 HTML5 中，使用 audio 标签来播放声音文件或者音频流，该标签支持 Ogg、MP3、WAV 等音频格式。
其使用格式如下：
<audio src="URL" controls></audio>
参数说明：
- src 属性用于指定要播放的声音文件。
- controls 是 controls=“controls” 简写形式，用于提供播放、暂停和音量控件。
除了上面两种属性，audio 标签还有以下属性可用：
- autoplay 属性：音频自动播放。
- loop 属性：音频自动重复播放。
- preload 属性：用来缓冲 audio 标签的大文件，它有三个属性值 none（不缓冲）、auto（缓冲音频文件）、metadata
（缓冲文件的元数据）。
source 标签
audio 标签还可以通过子标签 source 来进行多数据源的设置。
其使用格式如下：
<audio>
<source src="URL" />
</audio>
一个 audio 标签可以包含多个 source 标签，当播放器无法识别当前格式的播放源时会调用下一个 source 播放源进行播放。
source 标签是用来指定多个文件，给不同的浏览器提供可支持的编码格式。
例如：
<audio>
<source src="filename.opus" />
<source src="filename.ogg" />
<source src="filename.mp3" />
</audio>
video 标签
在 HTML 中，提供了 video 标签向文档中嵌入媒体播放器。
语法格式如下所示：
<video controls>
<source src="URL" />
</video>
加入了 muted 属性，播放时则是静音状态。
我们在 video 标签中加入 poster 属性即可给视频添加封面。
使用格式如下：
<video poster="URL"></video>
3、HTML5 新属性
新表单类型-email
email 类型用于邮件地址的输入，很明显，它只适用于邮箱输入。
使用格式如下：
<input type="email" />
新表单类型-url
url 类型是专门用来输入网址的。
使用格式如下：
<input type="url" />
新表单类型-number
number 类型用于数字的输入。
number 类型表单有以下属性。
| 属性 | 描述 |
|---|---|
| max | 输入框允许的最大值。 |
| min | 输入框允许的最小值。 |
| step | 合法的数字间隔，例如 step=2，则合法为：2、4、6、8。 |
| value | 默认值。 |
例如：
<input type="number" value="5" step="2" />
设置默认值为 5，步长为 2，每点 ⬆️ 一次，数字 + 2。
新表单类型-range
range 类型用于包含一定范围内数值的输入。
其使用格式为：
<input type="range" />
新表单类型-date
date 是用来选取年、月、日的类型。
其使用格式为：
<input type="date" />
datetime-local 是用来选取年、月、日和本地时间。
其使用格式为：
<input type="datetime-local" />
新表单类型-search
search 类型的 input 标签提供用于输入搜索关键字的文本框，从外观看 search 和 text 是一样的，功能也是相近的可以输入任意的字符串。
使用格式如下：
<input type="search" />
新表单类型-color
color 类型是 input 标签提供的专门用于设置颜色的文本框。通过单击文本框可以打开一个调色板，用户可以在面板中选择需要的颜色。不同的操作系统打开的拾色面板也不相同。
新属性-form
HTML5 中 input 标签新增了一个 form 属性，通过该属性可以将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。
新属性-autofocus
打开一个页面，当某个文本框需要获得光标焦点时，可以使用 autofocus 属性来实现。
新属性-autocomplete
autocomplete 属性是用来规定表单是否应该启用自动完成功能。
自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。
autocomplete 属性包括两个属性值：on、off。
其语法格式为：
<form autocomplete="on"></form>
on 为默认值，意思是启用自动完成功能。off 为禁用自动完成功能。
新属性-placeholder
placeholder 属性规定可描述输入字段预期值的提示信息，也就是说设置了该属性，它会提示用户设置的输入值。
其语法格式为：
<input placeholder="text" />
六、HTML5 本地存储
1、localStorage（本地存储）
localStorage 对象是 HTML 5 新增的特性，主要用于本地存储。
localstorage 与 cookie 的区别：
- localStorage 解决了早期使用 cookie 存储遇到的存储空间不足的问题( 每条 cookie 的存储空间为 4k )；
- localStorage 一般浏览器支持的是 5M 大小，具体存储大小根据浏览器的不同会有所不同。
- 并且相较于 cookie 而言，localStorage 中的信息不会被传输到服务器。
localStorage 对象提供的方法如下：
| 方法 | 说明 |
|---|---|
| setItem(key,value) | 保存数据到本地存储 |
| getItem(key) | 从本地存储获取数据 |
| removeItem(key) | 根据指定 key 从本地存储中移除数据 |
| clear() | 清除所有保存数据 |
2、sessionStorage（会话存储）
localStorage 和 sessionStorage 对象作为 HTML5 新增的特性，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 键值对数据。
sessionStorage 对象提供的方法与 localStorage 对象相同。
他们的区别在于：
- localStorage 的生命周期是永久的，除非用户清除 localStorage 信息，否则这些信息将永远存在。
- sessionStorage 的生命周期是临时的，一旦当前窗口或标签页被关闭了，那么通过它存储的数据也就被清空了。
七、CSS 基础语法
1、选择器
标签选择器
如果需要对页面中的某一类标签统一设定样式时，应该使用标签选择器，标签选择器的关键字以标签的名字命名。
其语法格式为：
标签名 {
属性名: 属性值;
}
类选择器
在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 class="类名"的属性（不包括点号），表示该标签使用了指定的类选择器。
其语法格式为：
.类名 {
属性名: 属性值;
}
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号），指定这个 HTML 元素的 id，这个 id 在 HTML 文档中是唯一的。
它的使用与类选择器类似，语法格式如下：
#id选择器名 {
属性: 属性值;
}
选择器的优先级
在 HTML 中选择器的优先级为：id 选择器 > 类选择器 > 标签选择器。
!important
当你在样式声明中加入 !important 规则时，它会改变样式声明的优先级。
后代选择器
后代选择器是选择标签内部中某一标签的所有元素，其包括子元素及其他后代元素。
在使用后代选择器时，父标签名和后代标签名必须用空格隔开，这样才能识别是某个标签内部的后代元素。
群组选择器
群组选择器是用于同时对几个选择器进行相同的样式设置。
在使用群组选择器时，两个选择器之间必须要用英文逗号隔开。
2、背景样式
background-color 属性
background-color 属性可以给指定标签元素设置背景色。
background-image 和 background-size 属性
background-image 属性可以把图像插入背景。background-size 属性可以给背景图设置大小。
background-position 属性
通过 background-position 属性，可以改变图像在背景中的位置。
background-repeat 属性
background-repeat 属性是用来设置背景图像是否平铺。
下表列出了 background-repeat 属性的一些可取值以及每个可取值的含义。
| 可 取 值 | 描 述 |
|---|---|
| repeat | 背景图像将在垂直方向和水平方向重复（默认值） |
| repeat-x | 背景图像将在水平方向重复 |
| repeat-y | 背景图像将在垂直方向重复 |
| no-repeat | 背景图像将仅显示一次 |
我们规定应该从父元素继承 background-repeat 属性的设置。
3、文本属性
line-height 的使用
line-height 用于设置多行元素的空间量，可取值具体说明如下：
- normal：取决于用户端。
- number：数字乘以元素的字体大小。
- length：指定长度用于计算高度。
- %：计算值是给定的百分比值乘以元素计算出的字体大小。
text-decoration 的使用
text-decoration 属性用于设置文本的装饰线，例如给文本加下划线、中划线、波浪线等。可取值具体说明如下：
- text-decoration-line
设置线的位置，可取值包含：underline（下划线）、overline（上划线）、line-through（中划线）。 - text-decoration-color 设置线的颜色。
- text-decoration-style 设置线的样式，可取值包含：wavy（波浪线）、solid（实线）、dashed（虚线）。
- text-decoration-thickness 设置线的粗细。
4、字体属性
字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一个声明中设置所有的字体属性 |
| font-family | 字体名称、inherit | 设置字体类型 |
| font-size | xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit | 设置字体大小 |
| font-weight | normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 设置字体粗细 |
| font-style | normal、italic、oblique、inherit | 设置字体风格 |
5、链接中的伪类
在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
| 状态 | 效果 |
|---|---|
| a:link | 普通的、未被访问的链接。 |
| a:hover | 鼠标指针位于链接的上方。 |
| a:active | 链接被单击的时刻。 |
| a:visited | 用户已访问的链接。 |
针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。
| 状 态 | 颜 色 | 背 景 色 | 文 本 修 饰 |
|---|---|---|---|
| 未访问 | 蓝色 | 无 | 无下画线 |
| 鼠标移到 | 黑色 | #DDDDDD | 下画线 |
| 正单击 | 红色 | #AAAAAA | 删除线 |
| 已访问 | 绿色 | 无 | 无下画线 |
对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。
6、列表样式
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| list-style | list-style-type、list-style-position、list-style-image | 在一个声明中设置所有的列表属性 |
| list-style-image | URL、none | 设置图像为列表项标志 |
| list-style-position | inside、outside、inherit | 设置列表中列表项标志的位置 |
| list-style-type | disc（默认）、circle、square、decimal 等 | 设置列表项标志的类型 |
八、盒子模型
盒子模型就是用来装 HTML 元素的盒子，它用于描述一个装有 HTML 元素的矩形盒子。该模型包括边框（border）、内边距（padding）、内容（content）、外边距（margin）、宽和高等属性，下图显示了盒模型的结构。
各部分的功能如下表：
| 区域 | 功能 |
|---|---|
| 内容区 | 内容区在模型的中心包含了盒子内的信息也就是 HTML 元素。这些元素可以是文本、图片等。 |
| 内边距 | 内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。 |
| 边框 | 边框用于标识盒子的边界，介于内边距和外边距之间。 |
| 外边距 | 外边距位于边框外部，是边框与周围之间的空间。 |
1、border 属性
border 属性用于设置元素的边框属性，其用法如下所示：
border: border-width border-style border-color;
属性值说明如下：
- border-width：是边框宽度，宽度一般用数值即可。
- border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
- border-color：是边框线的颜色。
border、border-width、border-style、border-color 都是复合属性，我们也可以单独设置某条边框的样式。
例如，border-color 可以写成：
border-top-color: 上边框颜色;
border-right-color: 右边框颜色;
border-bottom-color: 下边框颜色;
border-left-color: 左边框颜色;
2、padding 属性
padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。
其使用格式如下所示：
padding: 上右下左;
padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;
3、margin 属性
margin 属性是用来设置元素的外边距的。
其使用格式如下：
margin: 上边距 右边距 下边距 左边距;
也可以省略写。
当左右边距值相同时，写法如下：
margin: 上边距 左右边距 下边距;
当上下边距值相同，左右边距值相同时，写法如下：
margin: 上下边距 左右边距;
当上下左右边距值均相同时，写法如下：
margin: 属性值;
从上面的内容，我们可以看出 margin 属性是个复合属性，我们可以分开设置上下左右的边距，写法如下：
/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;
九、display 属性
display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。
display 属性值的说明如下表所示。
| 属性值 | 说明 |
|---|---|
| block | 元素以块级方式展示。 |
| inline | 元素以内联方式展示。 |
| inline-block | 元素以内联块的方式展示。 |
| none | 隐藏元素。 |
1、block 属性值
block 属性值可以让行内元素以块级元素的方式显示在页面上。
其使用格式如下：
display: block;
2、inline 属性值
inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。
其使用格式如下：
display: inline;
3、inline-block 属性值
我们的块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。
其使用格式如下：
display: inline-block;
在哪些情况下可以用到这个属性呢？
比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。
3、none 属性值
none 属性值可以用来隐藏页面上的元素。
使用格式如下：
display: none;
十、浮动与定位
1、浮动
我们使用 float 属性指定元素沿其容器的左侧或右侧放置，浮动布局常见取值如下：
- left（左浮动）
- right（右浮动）
使用格式如下所示：
float: left|right;
2、定位
我们使用 position 属性来对元素的位置进行控制，定位布局可以分为以下四种：
- 静态定位（inherit）
- 相对定位（relative）
- 绝对定位（absolute）
- 固定定位（fixed）
其中，一般的标签元素不加任何定位属性时，默认都属于静态定位，静态定位在页面的最底层属于标准流（普通流），在页面中没有特殊的操作方式和显示效果。
固定定位
fixed 属性值用于固定定位，被固定的元素不会随着滚动条的拖动而改变位置。
使用格式如下：
position: fixed;
相对定位
相对定位是该元素的位置相对于它原始的位置来计算的。position 属性为我们提供了 relative 属性值来设置元素的相对属性。
position: relative;
绝对定位
绝对定位，能把元素精确地放在任意位置。position 属性为我们提供了 absolute 属性值来设置元素的相对属性。
语法格式为：
position: absolute;
（子绝父相）
十一、CSS3 新特性
1、CSS3 新增选择器
新增属性选择器
属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。
在 CSS3 中新增了三种属性选择器，如下所示：
| 选择器 | 描述 |
|---|---|
| E[attr^=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。 |
| E[attr$=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。 |
| E[attr*=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。 |
子元素伪类选择器
子元素伪类选择器就是选择某元素的子元素的一种选择器。
在 CSS3 中，有以下几种子元素伪类选择器：
| 选择器 | 描述 |
|---|---|
| E:first-child | 选择元素 E 的第一个子元素。 |
| E:last-child | 选择元素 E 的最后一个子元素。 |
| E:nth-child(n) | 选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。 |
| E:only-child | 选择元素 E 下唯一的子元素。 |
| E:first-of-type | 选择父元素下第一个 E 类型的子元素。 |
| E:last-of-type | 选择父元素下最后一个 E 类型的子元素。 |
| E:nth-of-type(n) | 选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。 |
| E:only-of-type | 选择父元素唯一的 E 类型的子元素。 |
| E:nth-last-child(n) | 选择所有 E 元素倒数的第 n 个子元素。 |
| E:nth-last-of-type(n) | 选择所有 E 元素倒数的第 n 个为 E 的子元素。 |
UI 伪类选择器
UI 伪类选择器是通过元素的状态来选择的一种选择器。
在 CSS3 中有以下几种 UI 伪类选择器。
| 选择器 | 描述 |
|---|---|
| :focus | 给获取焦点的元素设置样式。 |
| ::selection | 给页面中被选中的文本内容设置样式。 |
| :checked | 给被选中的单选框或者复选框设置样式。 |
| :enabled | 给可用的表单设置样式。 |
| :disabled | 给不可用的表单设置样式。 |
| :read-only | 给只读表单设置样式。 |
| :read-write | 给可读写的表单元素设置样式。 |
| :valid | 验证有效。 |
| :invalid | 验证无效。 |
例子（页面上有一个姓名输入框和一个密码输入框，当聚焦输入框时，输入框的背景颜色会发生改变）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
input:focus {
background-color: rgb(255, 153, 0);
}
</style>
</head>
<body>
姓名：<input type="text" /><br />
密码：<input type="password" />
</body>
</html>
2、文本阴影
在 CSS3 中，我们使用 text-shadow 属性来给文本内容添加阴影的效果。
文本阴影的语法格式如下：
text-shadow: x-offset y-offset blur color;
- x-offset 是沿 x 轴方向的偏移距离，允许负值，必须参数。
- y-offset 是沿 y 轴方向的偏移距离，允许负值，必须参数。
- blur 是阴影的模糊程度，可选参数。
- color 是阴影的颜色，可选参数。
3、文本溢出
text-overflow 属性可以设置超长文本省略显示，其语法如下所示：
text-overflow: clip|ellipsis;
其属性值的含义如下所示：
| 属性值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
4、圆角边框
在 CSS3 中，使用 border-radius 属性来设置圆角边框。
border-radius 属性的值表示圆角的直径，可以设置四个值，其值的顺序为：左上角，右上角，右下角，左下角。
其语法格式为：
border-radius: 取值;
我们也可以分开设置四个角的属性值，语法如下所示：
border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;
5、盒子阴影
box-shadow 属性可以用来设置一个或多个下拉阴影的框，视觉效果就像是盒子有了阴影一样。
其语法格式为：
box-shadow: h-shadow v-shadow blur spread color inset;
其属性值的意义如下所示：
| 值 | 说明 |
|---|---|
| h-shadow | 必选，水平阴影的位置，允许负值。 |
| v-shadow | 必选，垂直阴影的位置，允许负值。 |
| blur | 可选，模糊距离。 |
| spread | 可选，阴影的大小。 |
| color | 可选，阴影的颜色。 |
| inset | 可选，将外部阴影改为内部阴影。 |
6、背景新属性
背景图像尺寸
background-size 属性可以用来控制背景图像的显示大小。语法如下：
background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为 auto（自动）。 |
| percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为"auto（自动）" 。 |
| cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
| contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
多图背景
在 CSS3 中，background-image 属性的属性值可以包含多个图片的地址。语法如下：
/*图片地址*/
background-image: url(), url(), ..., url();
若想让图片放在我们想要的位置，可以使用 background-position 属性设置图片显示的位置。语法如下：
/*图片显示的位置*/
background-position: position1, position2, ..., positionN;
若想要设置图片是否重复显示在页面上，我们可以添加 background-repeat 属性。语法如下：
/*图片是否重复*/
background-repeat: repeat1, repeat2, ..., repeatN;
7、渐变属性
线性渐变
线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。
其语法格式为：
background-image: linear-gradient(side-or-corner|angle, linear-color-stop);
参数说明如下：
- side-or-corner 是描述渐变线的起始位置，它包含两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置
top or bottom。 - angle 是用角度值来指定渐变的方向。
- linear-color-stop 是设置渐变的颜色值。
重复性线性渐变
重复性线性渐变是用重复的线性渐变组成的 <image>，它与线性渐变的区别在于，它会在所有方向上重复渐变来覆盖整个元素。
其语法格式为：
background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);
参数说明如下：
- side-or-corner 是描述渐变线的起始位置，它包含 to 和两个关键词：第一个指出水平位置 left or
right，第二个指出垂直位置 top or bottom。 - angle 是用角度值来指定渐变的方向。
- color-stop 是由一个 <color> 组成，并且跟随一个可选的终点位置。
径向渐变
径向渐变是由元素中间定义的渐变。
其语法格式为：
background-image: radial-gradient(shape, color-stop);
参数说明如下：
- shape 设置渐变的形状，其取值有 circle（圆形） 和 ellipse（椭圆）。
- color-stop 设置某个确定位置的颜色值。
重复性径向渐变
重复性径向渐变是用重复性的径向渐变组成的图像。它与径向渐变的区别在于，它会从原点开始重复径向渐变来覆盖整个元素。
其语法格式为：
background: repeating-radial-gradient(extent-keyword, color-stop);
参数说明如下：
- extent-keyword 是描述边缘轮廓的具体位置，关键字常量如下所示：
- color-stop 是某个确定位置的固定颜色值。
8、元素转换
transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。
旋转函数
在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕原点旋转，主要在二维空间内进行操作。
其语法格式如下所示：
transform: rotate(角度); /*元素按照指定角度旋转*/
这里的角度可以是正值也可以是负值。正负值意味着不同的旋转方向，规定参数为正时，顺时针旋转；参数为负时，逆时针旋转。
rotateX 和 rotateY 的使用
除了使用 rotate 函数绕原点来旋转指定元素外，我们还可以围绕指定轴来旋转元素。
rotateX 函数可以让指定元素围绕横坐标（X 轴）旋转。其使用格式如下所示：
transform: rotateX(角度);
rotateY 函数可以让指定元素围绕纵坐标（Y 轴）旋转。其使用格式如下所示：
transform: rotateY(角度);
移动函数
translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。
其语法格式为：
transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/
缩放函数
scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。
其语法格式为：
transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/
9、过渡
CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。
其语法如下所示：
transition: 指定属性 持续时间 速度曲线 开始时间;
它是一个复合属性，我们也可以如下分开使用这几个属性。
transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/
transition-timing-function 属性
transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。
| 属性值 | 说明 |
|---|---|
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,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)）。 |
| steps(int,start 或者 end) | steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。 |
| step-start | 相当于 steps(1, start)。 |
| step-end | 相当于 steps(1, end)。 |
| cubic-bezier(n,n,n,n) | 规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
| initial | 规定使用默认值。 |
| inherit | 规定从父元素继承该属性值。 |
10、动画
@keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示：
@keyframes 动画名
{
0% {样式属性：属性值;}
25% {样式属性：属性值;}
50% {样式属性：属性值;}
100% {样式属性：属性值;}
}
这里的百分比是用来规定动画发生变化的时间的，0% 代表动画的开始，100% 代表动画的结束，中间的可以自定义。
将 @keyframes 创建的动画绑定到选择器上，通过 animation 属性就能实现动画效果了，其语法格式为：
animation: 动画名 完成动画的周期 是否重复;
animation 属性是一个复合属性，它的子属性如下所示。
| 属性 | 描述 |
|---|---|
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 |
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.circle {
width: 60px;
height: 60px;
border-radius: 100%;
background-color: #ffd8a6;
animation-name: action;
animation-duration: 9s;
animation-iteration-count: 10;
}
@keyframes action {
0% {
margin-left: 400px;
}
25% {
background-color: #dd7631;
}
50% {
border-radius: 10%;
}
100% {
margin: 100px;
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
十二、CSS3 弹性盒子
弹性盒子就是按照行或者列来布局元素的一种方式，让元素更好地适应不同父容器的大小。
1、flex
在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。
flex 主要由两个轴来控制布局，如下图所示。
上图说明如下：
- main axis 是主轴，该轴的开始为 main start，结束为 main end。
- cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
- flex item 是 flex 容器中的元素。
2、flex-direction 属性
flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。
其语法格式为：
flex-direction: row | row-reverse | column | column-reverse;
其属性值的意义如下所示：
| 属性值 | 描述 |
|---|---|
| row | 横向从左到右排列（左对齐），默认的排列方式。 |
| row-reverse | 反转横向排列（右对齐），从后往前排，最后一项排在最前面。 |
| column | 纵向排列 |
| column-reverse | 反转纵向排列，从后往前排，最后一项排在最上面。 |
3、flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
其语法格式为：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
其属性值的意义如下所示：
| 属性值 | 描述 |
|---|---|
| nowrap | 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。 |
| wrap | 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。 |
| wrap-reverse | 反转 wrap 排列。 |
4、align-items 属性
align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
其语法格式为：
align-items: flex-start | flex-end | center | baseline | stretch;
其属性值的意义如下所示：
| 属性值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。 |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。 |
| stretch | 如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。 |
5、align-content 属性的使用
align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用。
其语法格式为：
align-content: flex-start | flex-end | center | space-between | space-around |
stretch;
其属性值的意义为：
| 属性值 | 描述 |
|---|---|
| stretch | 默认。各行将会伸展以占用剩余的空间。 |
| flex-start | 各行向弹性盒容器的起始位置堆叠。 |
| flex-end | 各行向弹性盒容器的结束位置堆叠。 |
| center | 各行向弹性盒容器的中间位置堆叠。 |
| space-between | 各行在弹性盒容器中平均分布。 |
| space-around | 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 |
十三、媒体查询
CSS3 加入的 @media 媒体查询使得无需修改内容，便可以使样式应用于某些特定的设备范围。媒体查询就像是样式表中的 if 语句，通过判断表达式的真假来执行特定的分支 （加载特定的样式）。
@media 语法
@media 可以直接写在 CSS 样式中，或者可以针对不同的媒体设备，从外部链入不同的 stylesheets（外部样式表）。接下来，一起看下两种情况的使用语法：
直接写在 CSS 样式中
定义语法如下：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
一个完整的媒体查询由以下五部分组成：
- 必须是以 @media 开头 。
- 使用 mediatype 指定媒体（设备）类型 。
- 使用 and | not | only 逻辑操作符构建复杂的媒体查询 。
- 使用 media feature 指定媒体特性 。
- CSS-Code 位置是要设置的 CSS 样式。
mediatype （媒体类型）取值范围如下：
| 值 | 描述 |
|---|---|
| all | 适用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
| speech | 用于屏幕阅读器等发声设备 |
逻辑操作符取值范围如下：
| 值 | 描述 |
|---|---|
| and | 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真 |
| not | 用来排除某种设备 |
| only | 用以指定某特定媒体设备 |
media feature （媒体特性）常用取值如下：
| 值 | 描述 |
|---|---|
| max-width | 定义输出设备中的页面最大可见区域宽度 |
| max-height | 定义输出设备中的页面最大可见区域高度 |
| min-width | 定义输出设备中的页面最小可见区域宽度 |
| min-height | 定义输出设备中的页面最小可见区域高度 |
| orientation | 视口（viewport）的旋转方向。portrait ：表示 viewport 处于纵向，即高度大于等于宽度 ； landscape ：表示 viewport 处于横向，即宽度大于高度 |
针对不同的媒体设备，从外部链入不同的 stylesheets（外部样式表）
用 media 属性为 <link> 指定特定的媒体类型。定义语法如下：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystyle.css">
其中，mediatype、逻辑操作符、media feature 的取值与第一种直接写在 CSS 样式中的取值相同。
二者区别在于，第一种写在 CSS 样式中是当条件成立后，执行 CSS Code , 第二种则是条件成立后，加载对应的外部样式表。
例子（使用 @media 实现网页变色龙）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@media screen and (max-width: 500px) {
body {
background-color: red;
}
}
@media screen and (min-width: 800px) {
body {
background-color: green;
}
}
@media screen and (min-width: 1024px) {
body {
background-color: blue;
}
}
</style>
</head>
<body></body>
</html>
- 定义媒体查询规则，当设备类型为 screen 并且设备中的页面最大可见区域宽度为 500px 的时候，页面背景颜色为红色。
- 定义媒体查询规则，当设备类型为 screen 并且设备中的页面最小可见区域宽度为 800px 的时候，页面背景颜色为绿色。
- 定义媒体查询规则，当设备类型为 screen 并且设备中的页面最小可见区域宽度为 1024px 的时候，页面背景颜色为蓝色。
2101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
