学习了一些通用的基础知识之后，我们对HTML5 CSS3的补充内容加以学习。这里新增的内容大大简化了一些代码的书写。是十分有意义的。
一、 HTML5 新增的语义化标签
我们在书写html文件时的时候大多都是div去做，虽然可以解决问题，但是div没有语义。所以为了更有语义，增加了语义化标签，让编程更易理解，结构更加清晰。
比如为了更有语义：新增了 header头部 nav导航栏 articel内容 section文档某个区域 aside侧边栏 footer尾部。注意：新增的存在兼容性问题，IE9以上才支持。
<style>
header {
height: 120px;
width: 800px;
background-color: aquamarine;
border-radius: 10px;
margin: 15px auto;
}
nav {
height: 120px;
width: 800px;
background-color: aquamarine;
border-radius: 10px;
margin: 15px auto;
}
</style>二、 HTML5新增的视频标签
2.1 视频标签的属性
1、autoplay 自动播放（谷歌禁用了，但是增加muted就可以使用了）。
2、controls 显示播放控件。
3、width 播放器宽度。
4、height 播放器高度。
5、loop 是否循环播放。
6、preload 是否预加载（有了autoplay 就不用设置了）。
7、src 路径。
8、poster 等待加载时显示的图片。
9、muted 静音播放。
2.2 视频标签的使用
1、<video src="" 属性 属性 属性 >；当前 <video> 元素支持三种视频格式：MP4 WEBM Ogg。 尽量使用 mp4格式，因为都兼容。
2、 设置一个video大的盒子，再标签内对video直接设置属性，然后在大盒子内部添加资源，依次执行找到可以执行的文件格式，如果没找到，添加提示语。
<video width="1400" height="500" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg">
<source src="media/mi.mp4" type="video/mp4">
<source src="media/mi.ogg" type="video/ogg">
您的浏览器暂不支持video标签
</video>三、 HTML5新增的音频标签
.1 音频标签的属性
1、autoplay 自动播放(谷歌禁用了)
2、controls 显示播放控件
3、loop 是否循环播放
4、src 路径
3.2 音频标签的使用
1、<audio src="" 属性 属性 属性 >；当前 <audio> 元素支持三种视频格式：MP3 Wav Ogg。 尽量使用 mp3格式，因为都兼容。
2、 设置一个audio大的盒子，再标签内对audio直接设置属性，然后在大盒子内部添加资源，依次执行找到可以执行的文件格式，如果没找到，添加提示语。
<!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>HTML5新增音频标签</title>
</head>
<body>
<h1>HTML5新增视频标签</h1>
<ul>
<li>1、音频 audio</li>
<li>2、视频 video</li>
<li>3、当前 <audio> 元素支持三种视频格式：MP3 Wav Ogg。 尽量使用 mp3格式，因为都兼容。</li>
</ul>
<h1>音频标签使用 </h1>
<audio controls="controls" autoplay="autoplay">
<source src="media/music.mp3" type="audio/mp3">
<source src="media/music.ogg" type="audio/ogg">
您的浏览器暂不支持video标签
</audio>
<h1>音频标签的属性</h1>
<ul>
<li>1、autoplay 自动播放(谷歌禁用了)</li>
<li>2、controls 显示播放控件</li>
<li>3、loop 是否循环播放</li>
<li>4、src 路径</li>
</ul>
</body>
</html>四、 HTML5新增的input标签
如果要验证，将input所有的内容添加到form表单域，在点击提交以后就会自动验证。
1、<input type="search" name="" id="">search 搜索框，代替以前的text，语义更强。
2、<input type="email" name="" id="">email 邮箱。
3、<input type="url" name="" id="">url 。
4、<input type="date" name="" id="">date 日期。
5、<input type="time" name="" id="">time 时间。
6、<input type="month" name="" id="">month 月份。
7、<input type="week" name="" id="">week 周。
8、<input type="number" name="" id="">number 数字。
9、<input type="tel" name="" id="">tel 电话。
10、<input type="color" name="" id="">color 颜色选择菜单。
<!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>
</head>
<body>
<h1>HTML5新增input标签</h1>
如果要验证，必须添加form表单域，在点击提交以后就会自动验证
<form action="">
<ul>
<li>1、<input type="search" name="" id="">search 搜索框，代替以前的text，语义更强</li>
<li>2、<input type="email" name="" id="">email 邮箱</li>
<li>3、<input type="url" name="" id="">url </li>
<li>4、<input type="date" name="" id="">date 日期</li>
<li>5、<input type="time" name="" id="">time 时间</li>
<li>6、<input type="month" name="" id="">month 月份</li>
<li>7、<input type="week" name="" id="">week 周</li>
<li>8、<input type="number" name="" id="">number 数字</li>
<li>9、<input type="tel" name="" id="">tel 电话</li>
<li>10、<input type="color" name="" id="">color 颜色选择菜单</li>
<!-- 在点击提交以后就会自动验证 -->
<li><input type="submit"></li>
</ul>
</form>
</body>
</html>五、 HTML5新增的表单属性
何为表单属性，就是表单类型标签在使用时，可以设置的属性。我们以前学习<input>一般使用的只有 name id type value。现在新增了如下内容：
1、required 必填。
2、placeholder 提示文本。
3、autofocus 自动聚焦，页面加载后光标自动定位到指定位置。
4、autocomplete 用户正确提交过有些内容后时，基于输入过的值，显示可填写的内容.前提，这个input必须有name，且成功提交过。默认是on。
5、multiple 多文件提交，一般和type="file"一起使用。
<!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>HTML5新增表单属性</title>
<style>
/* ::叫做伪元素 */
input::placeholder {
color: red;
}
</style>
</head>
<body>
<h1>HTML5新增表单属性</h1>
<ul>
<li>1、required 必填</li>
<li>2、placeholder 提示文本</li>
<li>3、autofocus 自动聚焦，页面加载后光标自动定位到指定位置</li>
<li>4、autocomplete 用户正确提交过有些内容后时，基于输入过的值，显示可填写的内容.前提，这个input必须有name，且成功提交过。默认是on11</li>
<li>5、multiple 多文件提交</li>
</ul>
<h1>HTML5新增表单属性测试</h1>
<form action="">
<input name="box1" type="search" required="required" placeholder="用户输入了，这里不显示了" autofocus autocomplete>*必填<br>
<input type="file" name="" id="" multiple><br>
<input type="submit" name="" id="">
</form>
</body>
</html>六、 CSS3新增的选择器--属性选择器
6.1 什么是属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
一般是多个同种类的标签在一起，按照某个属性的内容，进行某些标签的选择。
注意：类选择器、属性选择器、伪类选择器，权重为 10
6.2 如何使用
1、 想要挑选的指定标签类型[ 属性 = ”指定内容“] 这样选择的是：属性的值完全是指定内容的指定标签类型。
2、 想要挑选的指定标签类型[ 属性 ^= ”指定内容“] 这样选择的是：属性的值以指定内容开头的指定标签类型。
3、 想要挑选的指定标签类型[ 属性 $= ”指定内容“] 这样选择的是：属性的值以指定内容结尾的指定标签类型。
4、 想要挑选的指定标签类型[ 属性 *= ”指定内容“] 这样选择的是：属性的值只要包含指定内容的指定标签类型。
为了更好的理解写了如下的代码：
<!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>CSS3新增属性选择器</title>
<style>
input[value] {
color: blue;
}
input[type=password] {
border-color: blue;
}
div[class^="cl"] {
color: blueviolet;
font-weight: 700;
font-size: xx-large;
}
div[class$="ss"] {
color: aqua;
font-weight: 700;
font-size: xx-large;
}
/* 此时的权重是10+1 */
div[class*="bb"] {
color: red;
font-weight: 700;
font-size: xx-large;
}
</style>
</head>
<body>
<h1>CSS3现状介绍</h1>
<ul>
<li>1、新增的CSS3特性有兼容性问题，ie9+才支持
</li>
<li>2、移动端支持优于 PC 端</li>
<li>3、不断改进中</li>
<li>4、应用相对广泛</li>
<li>5、后续主要学习：新增选择器和盒子模型以及其他特性
</li>
</ul>
<h1>CSS3 新增选择器</h1>
<ul>
<li>1、属性选择器</li>
<li>2、结构伪类选择器</li>
<li>3、伪元素选择器</li>
</ul>
<h1>CSS3 属性选择器</h1>
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
<div>选择某一类标签下含有某个属性的部分标签</div>
<div>注意：类选择器、属性选择器、伪类选择器，权重为 10。</div>
<h1>CSS3 属性选择器测试</h1>
<!-- 1、利用属性选择器:选择某一类标签下含有某个属性的部分标签 -->
<input type="text">
<input type="text" value="你好哈哈哈哈呵呵"><br>
<!-- 2、利用属性选择器:选择属性=特定值的元素-->
<input type="time" name="" id="">
<input type="password" name="" id="">
<!-- 3、利用属性选择器:选择类名以某些值开头（^=）的元素-->
<div class="cl class1">1</div>
<div class="cl class2">2</div>
<div class="cl class3">3</div>
<div class="cl class4">4</div>
<!-- 4、利用属性选择器:选择类名以某些值结尾($=)的元素 -->
<div class="cl class1 ss">1</div>
<div class="cl class2 ss">2</div>
<div class="cl class3 ss">3</div>
<div class="cl class4 ss">4</div>
<!-- 5、利用属性选择器: 选取属性中含有某个内容的标签 -->
<div class="xxx aaa bbb">1</div>
<div class="xxx aaa bbb">2</div>
<div class="xxx aaa bbb">3</div>
<div class="xxx aaa bbb">4</div>
</body>
</html>七、 CSS3新增的选择器--结构伪类选择器
7.1 结构伪类选择器使用情况
根据父级选择器里面的子元素，一个父级有多个子元素，不用起太多名字了，直接使用这个方法，可以针对性选取。选取某一个，某几个，或者按照某个规律选取。
7.2 如何使用结构伪类选择器
父亲 想要选取的子标签类型：挑选规则
1、父亲 想要选取的子标签类型：first-child 选取第一个子标签
2、父亲 想要选取的子标签类型：last-child 选取最后一个子标签
3、父亲 想要选取的子标签类型：nth-child（数值 或者 n的表达式 或者 关键字） 选取某个子标签、或者以n的表达式和关键字选取某些子标签
1、2 使用起来很简单，第三个使用起来比较灵活后面主要讨论。
7.3 如何使用nth-child（n）
1、n 可以是数字，关键字和公式
2、n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
3、 n 可以是关键字：even 偶数，odd 奇数
4、n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
注意：这里的n是从开始迭代的！但是第一个标签是从1开始增加的。
5、2n 偶数；2n+1 奇数；5n 5的倍数；n+5 从第五个开始（包含第5个）；-n+5 取前五个（包含第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>CSS3新增结构伪类选择器</title>
<style>
/* 结构伪类选择器选取第一个子标签 */
.box1 li:first-child {
color: aquamarine;
}
.box2 li:nth-child(5) {
color: aquamarine;
}
.box3 li:nth-child(odd) {
background-color: blue;
}
.box3 li:nth-child(even) {
background-color: red;
}
.box4 li:nth-child(-n+4) {
/* n从0开始，每次加1 */
background-color: red;
}
.box4 li:nth-child(n+5) {
/* n从0开始，每次加1 */
background-color: green;
}
</style>
</head>
<body>
<h1>结构伪类选择器场景</h1>
<div>根据父级选择器里面的子元素，一个父级有多个子元素，不用起太多名字了，直接使用这个方法，可以针对性选取。</div>
<h1>结构伪类选择器场景</h1>
<div>父类 想要选取的子标签类型：第几个{}</div>
<h1>结构伪类选择器选取第一个子标签</h1>
<ul class="box1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<h1>结构伪类选择器选取任意一个子标签</h1>
<ul class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<h1>结构伪类选择器选取任意多个子标签</h1>
<ul class="box3">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<h1>结构伪类选择器nth，可以跟公式</h1>
<ol class="box4">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
<ol class="box5">
<li>2n 偶数</li>
<li>2n+1 奇数</li>
<li>5n 5的倍数</li>
<li>n+5 从第五个开始（包含第5个）</li>
<li>-n+5 取前五个（包含第5个）</li>
</ol>
</body>
</html>八、 CSS3新增的选择器--伪元素选择器
7.1 如何使用
父亲 想要选取的子标签类型：挑选规则
1、父亲 想要选取的子标签类型：first-of-type 选取第一个子标签
2、父亲 想要选取的子标签类型：last-of-type 选取最后一个子标签
3、父亲 想要选取的子标签类型：nth-of-type（数值 或者 n的表达式 或者 关键字） 选取某个子标签、或者以n的表达式和关键字选取某些子标签
注意：这里的n是从开始迭代的！但是第一个标签是从1开始增加的。
7.2 nth-of-type 和 nth-child 的区别
通关观看使用方法，我们发现nth-of-type 和 nth-child几乎没有任何区别。但是两者其实有很大不同，体现在我们看不到的地方。体现在处理方式不同上。
1、nth-child 会把所有的盒子（不论子标签的类型）都排列序号。执行的时候先看1、：nth-child（n）挑选第几个，2、再看：挑选出来的标签和想要选取的子标签类型是否一致。如果不一致则不执行内容。
2、nth-of-type 只对我们指定的属性的标签进行排序，再去挑选。
针对性的设计了一个测试案例---在多种标签下选择第二个div标签例子
<!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>CSS3新增选择器nth-type-of</title>
<style>
.box2 div:nth-of-type(2) {
background-color: red;
}
</style>
</head>
<body>
<h1>在多种标签下选择第二个div标签例子</h1>
<section class="box2">
<p>我是p标签</p>
<div>我是第一个div标签</div>
<h1>我是h标签</h1>
<div>我是第二个div标签</div>
</section>
</html>
九、 CSS3盒子模型
9.1 伪元素选择器before和after
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。
9.2 伪类选择器的特点
1、before 和 after 创建一个元素，但是属于行内元素。
2、新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
3、语法： element::before {}。
4、before 和 after 必须有 content 属性。否则不执行！！
5、before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。
6、伪元素选择器和标签选择器一样，权重为 1。
可以使用CSS创建一个新的HTML标签元素，简化html结构。
9.3 伪类选择器的使用1-实现左右浮动效果
以前我们想要实现大盒子里左右 各一个小盒子的情况，是使用float浮动制作的，但是这样需要我们对盒子进行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>伪元素选择器before和after</title>
<style>
/* 这个的权重为 1 */
.box1 {
border: 1px solid red;
width: 600px;
height: 300px;
}
/* 这个的权重为1+1 */
.box1::before {
/* 必须包含content属性 */
/* 可以转换属性，就可以设置长宽了 */
content: "我是before";
border: 1px solid red;
}
.box1::after {
/* 必须包含content属性 */
content: "我是after";
border: 1px solid red;
/* float: right; */
}
</style>
</head>
<body>
<h1>使用场景</h1>
可以使用CSS创建一个新的HTML标签元素，简化html结构。
<div>注意：创建的是行内元素</div>
<h1>注意</h1>
<ul>
<li>1、before 和 after 创建一个元素，但是属于行内元素</li>
<li>2、新创建的这个元素在文档树中是找不到的，所以我们称为伪元素</li>
<li>3、语法： element::before {}</li>
<li>4、before 和 after 必须有 content 属性</li>
<li>5、before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素</li>
<li>6、伪元素选择器和标签选择器一样，权重为 1</li>
</ul>
<h1>使用测试</h1>
<div class="box1">
我是box原本的内容，我被伪元素包围了！！！！！！！！！！
</div>
</body>
</html>9.4 伪类选择器的使用2-字体图标
比如我们设计一个下拉框，可以用到这个。
这里分析一下怎么做：1、需要一个大盒子。2、使用标签：：after的方法使用字体图标。3、两者子绝父相。
<!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>伪元素选择器使用场景-字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1lv3na');
src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?1lv3na') format('truetype'),
url('fonts/icomoon.woff?1lv3na') format('woff'),
url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.box {
position: relative;
margin: 100px auto;
width: 300px;
height: 30px;
border: 1px solid red;
border-radius: 5px;
}
.box::after {
font-family: 'icomoon';
/* content: ""; */
/* 字体图标的新的使用 */
content: "\e91e";
position: absolute;
right: 10px;
top: 8px;
color: red;
}
</style>
</head>
<body>
<h1>伪元素选择器使用场景-字体图标</h1>
<div>不需要设置新的盒子，就可以简化代码</div>
<div class="box">
</div>
</body>
</html>这里需要我们回顾一下如何使用字体图片：1、在CSS中申明（直接粘贴即可）。2、在使用的标签下，同样申明。3、从demo中找到想用的图标复制过来即可。
注意因为图标复制过来都一样，设计者看不出来，所以可以使用前面的专属代码。
9.5 伪类选择器的使用3-设置遮罩层
首先强调一点，如何设置鼠标经过对伪元素的影响，明确效果是对伪元素的父亲做的，所以使用方法是：父亲:hover::before/after{}
明确了使用方法，我们做一个以前的案例
思路分析：1、需要一个大盒子承装图片和标题，还需要一个伪元素作为遮罩层。2、大盒子和遮罩层的关系依旧是子绝父相。3、伪元素必须含有content属性，设置隐藏display: none;。4、设置经过效果（注意写法），设置显示：.box:hover::before{display: block;}
<!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>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 100px auto;
width: 400px;
height: 280px;
border: 1px solid red;
}
.box::before {
content: "";
position: absolute;
width: 400px;
height: 225px;
display: none;
background: rgba(0, 0, 0, 0.5) url(images/arr.png) no-repeat center;
}
/* 注意写法 */
.box:hover::before {
display: block;
}
.box img {
width: 100%;
}
h1 {
display: inline-block;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>使用伪元素，设置遮罩层</h1>
<div class="box">
<img src="images/tudou.jpg" alt="">
<h1>【预告】 今晚张柏芝做客</h6>
</div>
</body>
</html>9.6 伪元素的清除
谈及清除这个操作，是因为一个父盒子，如果没内容，子元素都是浮动，那么父盒子没有高度。可以通过添加添加为伪元素避免。
9.6.1 单边法
单边法是使用after，转化为块级元素，堵住父盒子的尾部。
.box2::after {
content: "必须是块级元素";
display: block;
height: 0;
visibility: hidden;
clear: both;
}9.6.2 双边法
双边法是使用after，before，转化为块级元素，堵住父盒子的头部和尾部。
这里注意为什么不是block，而是table？因为两个伪元素，需要转化为block后放在同一行，所以使用table。
.box3::after,
.box3::before {
content: "";
/* 因为是两个，所以使用table，块级元素，一行显示 */
display: table;
}
.box3::after {
clear: both;
}9.6.3 案例测试 
<!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>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 100px auto;
width: 400px;
height: 280px;
border: 1px solid red;
}
.box::before {
content: "";
position: absolute;
width: 400px;
height: 225px;
display: none;
background: rgba(0, 0, 0, 0.5) url(images/arr.png) no-repeat center;
}
/* 注意写法 */
.box:hover::before {
display: block;
}
.box img {
width: 100%;
}
h1 {
display: inline-block;
border: 1px solid red;
}
.box2 {
border: 1px solid red;
width: 300px;
margin: 100PX auto;
}
.box2::after {
content: "必须是块级元素";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.box2 .left1 {
float: left;
height: 30px;
width: 30px;
border: 1px solid red;
}
.box2 .right1 {
float: right;
height: 30px;
width: 30px;
border: 1px solid red;
}
.box3 {
border: 1px solid red;
width: 300px;
margin: 100PX auto;
}
.box3 .left2 {
float: left;
height: 30px;
width: 30px;
border: 1px solid red;
}
.box3 .right2 {
float: right;
height: 30px;
width: 30px;
border: 1px solid red;
}
.box3::after,
.box3::before {
content: "";
/* 因为是两个，所以使用table，块级元素，一行显示 */
display: table;
}
.box3::after {
clear: both;
}
</style>
</head>
<body>
<h1>使用伪元素，设置遮罩层</h1>
<div class="box">
<img src="images/tudou.jpg" alt="">
<h1>【预告】 今晚张柏芝做客</h6>
</div>
<h1>单边伪元素的清除</h1>
<ul>
<li>1、额外标签法也称为隔墙法，是 W3C 推荐的做法。</li>
<li>2、父级添加 overflow 属性</li>
<li>3、父级添加after伪元素</li>
<li>4、父级添加双伪元素</li>
</ul>
<h1>单边伪元素的清除的例子</h1>
<div>我是父盒子，如果没内容，子元素都是浮动，那么我没有高度。可以添加为伪元素避免。</div>
<div class="box2">
<span class="left1"></span>
<span class="right1"></span>
</div>
<h1>双边伪元素的清除的例子</h1>
<div>我是父盒子，如果没内容，子元素都是浮动，那么我没有高度。可以添加为伪元素避免。</div>
<div class="box3">
<span class="left2"></span>
<span class="right2"></span>
</div>
</body>
</html>
十、图片模糊处理
给图片添加一个filter: blur( px);就可以实现模糊效果。
<!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>图片模糊处理filter</title>
<style>
img {
filter: blur(15px);
}
img:hover {
filter: blur(0px);
}
</style>
</head>
<body>
<h1>filter滤镜</h1>
<div>filter: 函数(); 例如： filter: blur(5px); blur模糊处理 数值越大越模糊</div>
<img src="images/tudou.jpg" alt="">
</body>
</html>十一、宽度计算函数clac（）
我们可以借助这个方法，自动设置宽度。
比如我们可以让子标签始终比父标签小30px。
<!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>CSS3属性calc函数</title>
<style>
.box1 {
width: 200px;
height: 100px;
margin: 100px auto;
background-color: aquamarine;
border: 1px solid red;
}
.box1 .son1 {
width: calc(100% - 30px);
height: 20px;
background-color: red;
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>calc() 此CSS函数让你在声明CSS属性值时执行一些计算。</h1>
<div> 使用如下： width: calc(100% - 80px); </div>
<h1>子标签始终比父标签小30px</h1>
<div class="box1">
<div class="son1"></div>
</div>
</body>
</html>
十二、CSS3的盒子模型
12.1 属性对盒子的影响
以前学习的盒子的大小：border+padding+长宽。
一旦改变border 和 padding ，盒子会被撑大。
12.2 盒子模型的设置
通过box-sizing设置盒子的模式。
1、content-box 就是默认的，以前我们使用的。
2、border-box 盒子大小只由长宽决定,即使border占了大小，盒子的总大小不变
注意：padding+border 不要超过宽度！！！！（否则也会撑大）
12.3测试案例
我们设置两个盒子的初始大小都一样100px 100px。但是盒子的属性不同，一个是content-box，一个是border-box。我们来观察padding和border对大小的影响。
<!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>CSS3盒子模型</title>
<style>
.box1 {
width: 100px;
height: 100px;
border: 10px solid red;
background-color: hotpink;
padding: 40px;
}
.box2 {
/* 可以通过*直接设置 */
box-sizing: border-box;
width: 100px;
height: 100px;
border: 10px solid red;
background-color: hotpink;
padding: 5px;
}
</style>
</head>
<body>
<h1>属性对盒子的影响</h1>
<div>以前盒子的大小：border+padding+长宽</div>
<div>border 和 padding 对盒子大小会变化</div>
<div>CSS3盒子模型可以使用 box-sizing 指定，这样计算盒子大小的方式就发生改变了。</div>
<div>1、content-box 就是默认的，以前我们使用的。2、border-box 盒子大小只由长宽决定,即使border占了大小，盒子的总大小不变</div>
<div>注意：padding+border 不要超过宽度</div>
</body>
<div class="box1"></div>
<div class="box2"></div>
</html>
十三、 CSS3过渡效果
这个方法最牛的点是可以不使用JS，直接使用CSS就可以完成过渡动画效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态。
11.1 如何使用
注意：谁做过渡给谁加！！！加给需要变化的标签！！！
注意一个写法：1、hover决定哪一个标签开始效果变化。2、son是变化后的值
/* 注意这个写法 */
.box:hover .son {
width: 200px;
height: 10px;
border-radius: 5px;
background-color: red;
}transition: 要过渡的属性 花费时间 运动曲线 何时开始; 后两个一般直接省略。
11.2 测试案例-进度条
思路分析：1、一个大盒子充当外边框，一个小盒子充当进度条。2、设置小盒子的初始大小。3、设置鼠标hover后的属性变化。4、对小盒子添加过渡效果代码。
<!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>CSS3过渡练习-进度条</title>
<style>
.box {
width: 200px;
height: 10px;
padding: 1px;
border: 1px solid red;
border-radius: 5px;
transition: all 10s;
}
.box .son {
width: 100px;
height: 10px;
border-radius: 5px;
background-color: red;
transition: all 3s;
}
/* 注意这个写法 */
.box:hover .son {
width: 200px;
height: 10px;
border-radius: 5px;
background-color: red;
}
</style>
</head>
<body>
<h1>进度条案例</h1>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>