CSS基础（HTML5+CSS3）

1. HTML5

1.1 HTML5 提高-新增语义化标签

HTML5 新特性有兼容性问题吗？IE 多少版本以上的浏览器才能支持？

HTML5 的新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持；
如果不考虑兼容性问题，可以大量使用这些新特性。

HTML5 新增的语义化标签有什么好处？

有利于搜索引擎搜索和网站的 SEO（Search Engine Optimization，搜索引擎优化）。

有哪些 HTML5 的语义化标签？分别可以用在布局的什么位置？

序号	标签	描述
1	header	头部标签，通常包含一组介绍性的或是辅助导航的实用元素
2	nav	导航标签，在当前文档或其他文档中提供导航链接
3	article	内容标签，表示文档、页面、应用或网站中的独立结构
4	section	定义文档的某个区域，没有更具体的语义
5	aside	侧边栏标签，表示一个和其余页面内容几乎无关的部分
6	footer	尾部标签，表示页脚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1. HTML5 提高-新增语义化标签</title>
    <style>
        body {
            position: relative;
            width: 500px;
            height: 400px;
        }
        header,
        nav,
        footer{
            width: 500px;
            height: 50px;
            background-color: aqua;
            margin-top: 10px;
            border-radius: 10px;
            text-align: center;
            line-height: 50px;
        }
        article {
            position: absolute;
            top: 110px;
            width: 245px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: aqua;
            margin-top: 10px;
            border-radius: 10px;
        }
        section {
            position: absolute;
            top: 140px;
            right: 45px;
            width: 150px;
            height: 50px;
            line-height: 50px;
            background-color: rgb(255, 255, 255);
            border-radius: 10px;
        }
        aside {
            position: absolute;
            top: 120px;
            right: 0px;
            width: 245px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: aqua;
            border-radius: 10px;
        }
        footer {
            position: absolute;
            bottom: 20px;          
        }
    </style>
</head>
<body>
    <header>头部标签</header>
    <nav>导航标签</nav>
    <article>内容标签
        <section>定义文档的某个区域</section>
    </article>
    <aside>侧边栏标签</aside>
    <footer>尾部标签</footer>
</body>
</html>

1.2 HTML5 新增视频标签

HTML5 主要新增了哪两个多媒体标签？

video 视频标签
audio 音频标签

`video` 标签支持几种视频格式？推荐使用哪一种格式？

推荐使用 mp4 格式的视频

`video` 标签是单标签还是双标签？`img` 标签呢？

video 是双标签，可以针对不同浏览器提供不同格式的视频；
img 是单标签，指定 src 既可以显示图像，不存在浏览器兼容问题。

   <video width="320" height="240" controls>
       <source src="movie.mp4" type="video/mp4" />
       <source src="movie.ogg" type="video/ogg" />
          您的浏览器不支持 video 标签。
   </video>

`video` 标签提供了哪些控制播放的属性？

属性	值	描述
src	url	要播放的视频的 URL。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。（谷歌浏览器需要添加 `muted` 属性来解决自动播放问题）
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放(循环播放)。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用，"autoplay"，则忽略该属性。
width	pixels	设置视频播放器的宽度。
height	pixels	设置视频播放器的高度。

`video` 标签的宽高属性可以通过 CSS 控制吗？

可以

1.3 HTML5 新增音频标签

`audio` 标签支持几种音频格式？推荐使用哪一种格式？

推荐使用 mp3 格式的音频

`audio` 标签是单标签还是双标签？`img` 标签呢？

audio 是双标签，可以针对不同浏览器提供不同格式的音频；
img 是单标签，指定 src 既可以显示图像，不存在浏览器兼容问题。

     <audio controls>
        <source src="horse.ogg" type="audio/ogg" />
        <source src="horse.mp3" type="audio/mpeg" />
          您的浏览器不支持 audio 元素。
     </audio>

`audio` 标签提供了哪些控制播放的属性？

属性	值	描述
src	url	规定音频文件的 URL。
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放（谷歌浏览器禁止自动播放）。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto / none	规定当网页加载时，音频是否默认被加载以及如何被加载。

`audio` 标签的使用和 `video` 标签的使用有什么共同点？应该如何记忆和使用？

音频标签和视频标签使用方式基本一致
浏览器支持情况不同

视频使用 mp4 格式
音频使用 mp3 格式

谷歌浏览器禁用了音频和视频的自动播放

视频标签添加 muted 属性来静音播放视频
音频不可以（可以通过 JavaScript 解决）

视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2. HTML5 新增音频/视频标签</title>
    <style>

    </style>
</head>

<body>
    <video src="./media/mi.mp4" autoplay controls loop muted poster="./media/mi9.jpg" width="500px" height="100%"></video>
    <audio controls>
        <source src="./media/music.mp3" type="audio/mpeg">
    </audio>
</body>

</html>

1.4 HTML5 新增 input 表单

HTML5 为什么新增很多的表单 `input` 类型？

方便程序员的开发，与表单域联用，不同的 input 类型能够自动添加校验功能；
方便移动端的开发，不同的 input 类型，键盘的弹出方式不同。

需要重点记忆那三个 `input` 类型？

需要重点记忆：number、tel、search 三个 input 类型；
常用输入类型：text、password、radio、checkbox、button、file、hidden、submit、reset。类型 | 属性值 | 描述 | | -- | ------ | ------------------ | | 输入 | number | 限制用户必须输入数字类型 | | 输入 | tel | 手机号码 | | 输入 | search | 搜索框 | | 输入 | email | 限制用户必须输入电子邮件类型 | | 输入 | url | 限制用户必须输入网址类型 | | 选择 | date | 限制用户必须输入日期类型 | | 选择 | time | 限制用户必须输入时间类型 | | 选择 | month | 限制用户必须输入月类型 | | 选择 | week | 限制用户必须输入星期类型 | | 选择 | color | 弹出窗口选择颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.HTML5 新增 input 表单</title>
    <style>
        form {
            width: 300px;
            height: 500px;
            background-color: rgb(66, 198, 216);
        }
        li {
            list-style: none;
            margin-top: 10px;
        }
        .div {
            text-align: center;
        }
    </style>
</head>
<body>
    <form action="#">
        <ul>
            <li>数量: <input type="number" /></li>
            <li>号码: <input type="tel" /></li>
            <li>搜索: <input type="search" /></li>
            <li>邮箱: <input type="email" /></li>
            <li>网址: <input type="url" /></li>
            <li>日期: <input type="date" /></li>
            <li>时间: <input type="time" /></li>
            <li>月份: <input type="month" /></li>
            <li>星期: <input type="week" /></li>
            <li>颜色: <input type="color" /></li>
          </ul>
          <div class="div">
            <input type="submit" value="提交" />
          </div> 
        </ul>
    </form>
</body>
</html>

效果图：

1.5 HTML5 新增表单属性

HTML5 新增了哪几个表单属性？分别有什么用处？

属性	值	描述
required	required	表单拥有该属性表示内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在内容将不显示
autofocus	autofocus	自动聚焦属性
autocomplete	`on` / `off`	是否应该启用自动完成功能。默认已经打开，需要放在表单内，同时加上 `name` 属性，同时成功提交过
multiple	multiple	可以多选文件提交

HTML5 新增的表单属性哪些最常用？

placeholder、multiple、required

如何修改 `palceholder` 的样式？

    input::placeholder {
      color: pink;
    }

2. CSS3 选择器

2.1 CSS3 新增属性选择器（上）

新增的 CSS3 特性有兼容性问题吗？在开发中要使用吗？

CSS3 的新特性都有兼容性问题，IE9+ 以上版本的浏览器才支持；
在开发中要使用，这是因为移动端支持优于 PC 端。

选择器？

属性选择器
结构伪类选择器
伪元素选择器

属性选择器的作用是什么？一定要记住的语法是什么？

可以根据元素属性来选择元素。
属性选择器语法
可以根据元素属性来选择元素。

属性选择器语法

选择符	描述
`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 元素

2.2 CSS3 新增属性选择器（下）

选择器	权重
继承或 `*`	`0,0,0,0`
标签选择器	`0,0,0,1`
类选择器 / 属性选择器 / 伪类选择器	`0,0,1,0`
id 选择器	`0,1,0,0`
行内样式	`1,0,0,0`
`!important`	`∞`

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5. CSS3 新增属性选择器</title>
</head>
<style>
    h4 {
        color: rgb(43, 255, 0);
    }
    input[type] {
        border: 1px solid red;
    }
    input[type="password"] {
        background-color: cyan;
    }
    div[class^="i"] {
        color: darkgreen;
    }
    section[class$="a"] {
        color: red;
    }
    section[class*="3"] {
        color: deepskyblue;
    }
</style>
<body>
    <h4>1. 利用属性选择器就可以不用借助于类或者id选择器</h4>
    <input type="text" value="请输入用户名" />
    <input type="text" />
    <h4>2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的</h4>
    <input type="text" name="" id="" />
    <input type="password" name="" id="" />
    <h4>3. 属性选择器可以选择属性值开头的某些元素</h4>
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <h4>4. 属性选择器可以选择属性值结尾的某些元素</h4>
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>

</body>

</html>

效果图：

2.3 CSS3 新增结构伪类选择器-选择第 n 个元素

结构伪类选择器的作用是什么？

根据文档结构来选择器元素，常用于选择父级选择器里面的子元素。选择符 | 描述 | | ------------------ | ------------------- | | E:first-child | 匹配父元素中的第一个子元素 E | | E:last-child | 匹配父元素中的最后一个子元素 E | | E:nth-child(n) | 匹配父元素中的一个或特定多个子元素 E | | E:first-of-type | 匹配类型 E 的第一个 | | E:last-of-type | 匹配类型 E 的最后一个 | | E:nth-of-type(n) | 匹配类型 E 的第 n 个 n 可以是数字、关键字或公式

`nth-child` 的 `n` 是数字是从 0 开始还是从 1 开始？

从 1 开始，数字是几就选择第几个孩子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6. 体会选择第 n 个元素的基本使用</title>
    <style>
        li {
            list-style: none;
        }
        /* 匹配父元素中的第一个子元素 E */
        ul li:first-child {
            background-color: rgb(251, 255, 0);
        }
        /* 匹配父元素中的最后一个子元素 E */
        ul li:last-child {
            background-color: greenyellow;
        }
        /* 匹配父元素中的一个或特定多个子元素 E */
        ul li:nth-child(4) {
            background-color: grey;
        }
        /* 匹配类型 E 的第一个 */
        ul li:first-of-type {
            color: hotpink;
        }
        /* 匹配类型 E 的最后一个 */
        ul li:last-of-type {
            color: ivory;
        }
        /* 匹配类型 E 的第 n 个 */
        ul li:nth-of-type(3) {
            background-color: mediumspringgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li>体会选择第 1 个元素的基本使用</li>
        <li>体会选择第 2 个元素的基本使用</li>
        <li>体会选择第 3 个元素的基本使用</li>
        <li>体会选择第 4 个元素的基本使用</li>
        <li>体会选择第 5 个元素的基本使用</li>
    </ul>
</body>
</html>

效果图：

2.4 CSS3 新增 nth-child 选择器(上）

`nth-child` 的 `n` 的可以使用哪些关键字？分别代表什么含义？

even 偶数
odd 奇数

`nth-child` 中可以使用 `n` 吗？表示什么含义？能用其他字母吗？

直接使用 n 会选择所有孩子
n 表示从 0 开始，每次加 1，依次向后面计算，超出范围的元素会被忽略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7. 选择奇数元素和偶数元素的基本使用</title>
    <style>
        ul li:nth-child(even) {
            background-color: grey;
        }
        ul li:nth-child(odd) {
            color: springgreen;
            list-style: none;
        }
        ol li:nth-child(n) {
            color: red;
        }
    </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>
        <li>第8选择奇数元素和偶数元素的基本使用</li>
        <li>第9选择奇数元素和偶数元素的基本使用</li>
    </ul>
    <ol>
        <li>第1选择奇数元素和偶数元素的基本使用</li>
        <li>第2选择奇数元素和偶数元素的基本使用</li>
        <li>第3选择奇数元素和偶数元素的基本使用</li>
        <li>第4选择奇数元素和偶数元素的基本使用</li>
    </ol>
</body>
</html>

效果图：

2.5 CSS3 新增 nth-child 选择器(下）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8. 使用公式选择元素的基本使用</title>
    <style>
        ul li:nth-child(2n) {
            background-color: rgb(230, 191, 191);
        }
        ul li:nth-child(2n+1) {
            color: rgb(0, 153, 255);
            list-style: none;
        }
        ul li:nth-child(5n) {
            border: 3px dashed rgb(43, 255, 0);
        }
        ul li:nth-child(-n+3) {
            border: 2px dashed rgb(255, 0, 170);
            margin-top: -2px;
        }
    </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>
        <li>第8使用公式选择元素的基本使用</li>
        <li>第9使用公式选择元素的基本使用</li>
        <li>第10使用公式选择元素的基本使用</li>
        <li>第11使用公式选择元素的基本使用</li>
        <li>第12使用公式选择元素的基本使用</li>
    </ul>
</body>
</html>

效果图：

2.6 nth-child 和 nth-of-type 的区别

`nth-child` 和 `nth-of-type` 有什么区别？

E:nth-child(n)

会先把所有的盒子都排列序号
首先根据 :nth-child(n) 找到孩子，再去看前面的 E 是否匹配。 E:nth-of-type(n)
会把指定元素 E 的盒子排列序号
首先看 E 指定的元素，之后再去看 :nth-of-type 的第几个孩子。

`nth-child` 和 `nth-of-type` 哪一个用的多？为什么？

nth-child
开发时，结构伪类选择器大多用于无序列表 ul 或有序列表 ol

2.7 CSS3 新增伪元素选择器使用场景和由来

伪元素选择器的作用是什么？

伪元素选择器可以利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构。

伪元素是真正意义的元素吗？

伪元素不是真正意义的元素，是通过 CSS 创建的。

我们重点要学习哪两个伪元素？伪元素和伪类在语法上有什么区别？

::before 和 ::after

从语法结构上看

伪元素使用 :: 开头，关键字内容；
伪类使用 : 开头，关键字状态。

`::before` 和 `::after` 属于行内元素吗？

属于

`::before` 和 `::after` 属于行内元素吗？

2.8 CSS3 新增伪元素选择器基本使用

`::before` 和 `::after` 会在什么位置创建元素？

::before 在父元素内容的前面插入元素；
::after 在父元素内容的后面插入元素。

`::before` 和 `::after` 必须要指定什么属性？

content 属性

伪元素选择器的权重是多少？

伪元素选择器的权重是 1

选择器	权重
继承或 `*`	`0,0,0,0`
标签选择器 / 伪元素	`0,0,0,1`
类选择器 / 属性选择器 / 伪类选择器	`0,0,1,0`
id 选择器	`0,1,0,0`
行内样式	`1,0,0,0`
`!important`	`∞`

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9. CSS3 新增伪元素选择器基本使用</title>
    <style>
        div {
            width: 296px;
            height: 200px;
            background-color: rgb(51, 255, 0);
            text-align: center;
        }

        div::after {
            display: inline-block;
            content: "+基本使用";
            width: 100px;
            height: 50px;
            background-color: red;
        }

        div::before {
            display: inline-block;
            content: "CSS3 新增+";
            width: 100px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>伪元素选择器</div>
</body>

</html>

效果图：

2.9 伪元素选择器使用场景 1-配合字体图标

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10. 伪元素选择器使用场景 1-配合字体图标</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2824245_9x5s8cae03a.css">
    <style>
        div {
            position: relative;
            width: 400px;
            height: 50px;
            border: 1px solid red;
        }

        div::before {
            position: absolute;
            top: 15px;
            right: 10px;
            font-family: "iconfont";
            content: "\e665";
            color: red;
            font-size: 18px;

        }
    </style>
</head>

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

</html>

效果图：

2.10 伪元素选择器使用场景 2-仿土豆效果

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11. 土豆案例</title>
    <style>
        .tudou {
            position: relative;
            width: 440px;
            height: 320px;
            background-color: #ccc;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            display: none;
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4) url(images/arr.png) no-repeat center;
        }

        .tudou:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <!-- <div class="mask"></div> -->
        <img src="./images/tudou.jpg" alt="">
    </div>
</body>

</html>

效果图：

2.11 伪元素选择器使用场景 3-伪元素清除浮动本质

四种清除浮动的方式

额外标签法也称为隔墙法，是 W3C 推荐的做法；
父级添加 overflow 属性；
父级添加 after 伪元素；
父级添加双伪元素。清除浮动：在末尾添加一个块级元素，并增加 clear: both; 属性。

两种伪元素清除浮动的原理

两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

单伪元素

双伪元素清除浮动

3. CSS3 盒子模型

CSS3 中可以哪一个属性来指定盒子模型？

box-sizing

(重要)`box-sizing` 属性有几个值，设置了哪一个值之后，设置 `padding`、`border` 不会影响盒子的大小？

content-box：盒子大小为 width + padding + border（以前默认的）；
border-box：盒子大小为 width，设置 padding、border 不会影响盒子的大小。

使用 CSS3 盒子模型可以避免布局中导航跳的情况。

导航盒子和下方盒子挨在一起，鼠标经过 :hover 设置盒子的下边框。
padding 和 border 不要超过 width / height。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12. CSS3 盒子模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 400px;
            height: 400px;
            padding: 30px;
            background-color: seagreen;
            border: 4px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>CSS3 盒子模型</div>
</body>
</html>

效果图：

4. CSS3 其他特性

4.1 CSS3 图片模糊处理

CSS3 中给图片增加滤镜是哪一个属性？

filter 属性

这个属性的哪一个函数可以对图片做模糊处理？语法格式是什么？

blur 函数语法：filter: blur(5px);
数值越大越模糊
数值为 0 最清晰（不做模糊处理）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13. CSS3 图片模糊处理</title>
    <style>
        img {
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <img src="./images/pink.jpg" alt="">
</body>
</html>

效果图：

4.2 计算盒子宽度 calc 函数

CSS3 可以使用哪一个函数计算盒子的宽度？应用场景是什么？

calc 函数；

width: calc(100% - 80px); 可以让子盒子永远比父盒子的宽度小 80px；
类似京东商城的商品列表下方的水平滚动条的宽度，可以用这种方法处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14. 计算盒子宽度calc函数</title>
    <style>
        .f {
            width: 200px;
            height: 200px;
            border: 2px solid red;
            
        }
        .s {
            width: calc(100% - 50px);
            height: 30px;
            margin: 20px auto;
            border: 2px solid rgba(72, 255, 0, 0.301);
        }
    </style>
</head>
<body>
    <div class="f">
        <div class="s"></div>
    </div>
</body>
</html>

效果图：

4.3 CSS3 新增属性过渡（上 / 下）

CSS3 中可以通过哪一个属性实现过渡动画效果？

transition

过渡动画的应用场景是什么？经常和什么一起搭配使用？

是从一个状态渐渐的过渡到另外一个状态，从一个属性值，过渡到另外一个属性值；
经常和 :hover 一起搭配使用，让页面更好看，且动感十足。

过渡动画的语法是什么？初期最应该记住哪一个？

transition: 要过渡的属性 动画时间 运动曲线 何时开始;

要过渡的属性：想要变化的 css 属性，可以是：宽度、高度、背景颜色、内外边距等（all 可以让所有能动画的属性一起过渡变化）
动画时间：单位是秒（必须写单位），例如：0.5s
运动曲线：默认是 ease（可以省略）
何时开始：单位是秒（必须写单位），动画延迟触发时间，默认是 0s（可以省略）

使用过渡动画的口诀是什么？

谁做过渡给谁加。

4.4 CSS3 过渡练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15. CSS3 过渡练习.html</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: chartreuse;
            transition: background-color 1s ease 1s, width 0.5s, height ;
        }
        .box:hover {
            width: 500px;
            height: 500px;
            background-color:crimson;
        }
    </style>
</head>
<body>
    <div class="box">
       
    </div>
</body>
</html>

4.5 CSS3 课堂作业 —— 小米 Logo

广义的 H5(了解）

广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript。
这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5。
虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。

MDN 参考链接：developer.mozilla.org/zh-CN/docs/…。

CSS基础（HTML5,CSS3 选择器,CSS3 盒子模型,CSS3 其他特性）（HTML5+CSS3）

CSS基础（HTML5+CSS3）

1. HTML5

1.1 HTML5 提高-新增语义化标签

HTML5 新特性有兼容性问题吗？IE 多少版本以上的浏览器才能支持？

HTML5 新增的语义化标签有什么好处？

有哪些 HTML5 的语义化标签？分别可以用在布局的什么位置？

1.2 HTML5 新增视频标签

HTML5 主要新增了哪两个多媒体标签？

video 标签支持几种视频格式？推荐使用哪一种格式？

video 标签是单标签还是双标签？img 标签呢？

video 标签提供了哪些控制播放的属性？

video 标签的宽高属性可以通过 CSS 控制吗？

1.3 HTML5 新增音频标签

audio 标签支持几种音频格式？推荐使用哪一种格式？

audio 标签是单标签还是双标签？img 标签呢？

audio 标签提供了哪些控制播放的属性？

audio 标签的使用和 video 标签的使用有什么共同点？应该如何记忆和使用？

1.4 HTML5 新增 input 表单

HTML5 为什么新增很多的表单 input 类型？

需要重点记忆那三个 input 类型？

1.5 HTML5 新增表单属性

HTML5 新增了哪几个表单属性？分别有什么用处？

HTML5 新增的表单属性哪些最常用？

如何修改 palceholder 的样式？

2. CSS3 选择器

2.1 CSS3 新增属性选择器（上）

新增的 CSS3 特性有兼容性问题吗？在开发中要使用吗？

选择器？

属性选择器的作用是什么？一定要记住的语法是什么？

2.2 CSS3 新增属性选择器（下）

2.3 CSS3 新增结构伪类选择器-选择第 n 个元素

结构伪类选择器的作用是什么？

nth-child 的 n 是数字是从 0 开始还是从 1 开始？

2.4 CSS3 新增 nth-child 选择器(上）

nth-child 的 n 的可以使用哪些关键字？分别代表什么含义？

nth-child 中可以使用 n 吗？表示什么含义？能用其他字母吗？

2.5 CSS3 新增 nth-child 选择器(下）

2.6 nth-child 和 nth-of-type 的区别

nth-child 和 nth-of-type 有什么区别？

nth-child 和 nth-of-type 哪一个用的多？为什么？

2.7 CSS3 新增伪元素选择器使用场景和由来

伪元素选择器的作用是什么？

伪元素是真正意义的元素吗？

我们重点要学习哪两个伪元素？伪元素和伪类在语法上有什么区别？

::before 和 ::after 属于行内元素吗？

::before 和 ::after 属于行内元素吗？

2.8 CSS3 新增伪元素选择器基本使用

::before 和 ::after 会在什么位置创建元素？

::before 和 ::after 必须要指定什么属性？

伪元素选择器的权重是多少？

2.9 伪元素选择器使用场景 1-配合字体图标

2.10 伪元素选择器使用场景 2-仿土豆效果

2.11 伪元素选择器使用场景 3-伪元素清除浮动本质

四种清除浮动的方式

两种伪元素清除浮动的原理

3. CSS3 盒子模型

CSS3 中可以哪一个属性来指定盒子模型？

(重要)box-sizing 属性有几个值，设置了哪一个值之后，设置 padding、border 不会影响盒子的大小？

4. CSS3 其他特性

4.1 CSS3 图片模糊处理

CSS3 中给图片增加滤镜是哪一个属性？

这个属性的哪一个函数可以对图片做模糊处理？语法格式是什么？

4.2 计算盒子宽度 calc 函数

CSS3 可以使用哪一个函数计算盒子的宽度？应用场景是什么？

4.3 CSS3 新增属性过渡（上 / 下）

CSS3 中可以通过哪一个属性实现过渡动画效果？

过渡动画的应用场景是什么？经常和什么一起搭配使用？

过渡动画的语法是什么？初期最应该记住哪一个？

使用过渡动画的口诀是什么？

4.4 CSS3 过渡练习

4.5 CSS3 课堂作业 —— 小米 Logo

广义的 H5(了解）

`video` 标签支持几种视频格式？推荐使用哪一种格式？

`video` 标签是单标签还是双标签？`img` 标签呢？

`video` 标签提供了哪些控制播放的属性？

`video` 标签的宽高属性可以通过 CSS 控制吗？

`audio` 标签支持几种音频格式？推荐使用哪一种格式？

`audio` 标签是单标签还是双标签？`img` 标签呢？

`audio` 标签提供了哪些控制播放的属性？

`audio` 标签的使用和 `video` 标签的使用有什么共同点？应该如何记忆和使用？

HTML5 为什么新增很多的表单 `input` 类型？

需要重点记忆那三个 `input` 类型？

如何修改 `palceholder` 的样式？

`nth-child` 的 `n` 是数字是从 0 开始还是从 1 开始？

`nth-child` 的 `n` 的可以使用哪些关键字？分别代表什么含义？

`nth-child` 中可以使用 `n` 吗？表示什么含义？能用其他字母吗？

`nth-child` 和 `nth-of-type` 有什么区别？

`nth-child` 和 `nth-of-type` 哪一个用的多？为什么？

`::before` 和 `::after` 属于行内元素吗？

`::before` 和 `::after` 属于行内元素吗？

`::before` 和 `::after` 会在什么位置创建元素？

`::before` 和 `::after` 必须要指定什么属性？

(重要)`box-sizing` 属性有几个值，设置了哪一个值之后，设置 `padding`、`border` 不会影响盒子的大小？