共计 33220 个字符，预计需要花费 84 分钟才能阅读完成。
一、根据 W3C 标准，一个网页主要由三部分组成: 结构、表现还有行为。
二、HTML (Hyper Text Markup Language 超文本标记语言)
- 它负责网页的三个要素中结构
- HTML 使用标签的形式来标识网页中的不同组成部分
- 所谓的超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另外一个页面
1、html 常规格式解释
<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html 的根标签 ( 元素)，网页中的所有内容都要写根元素的里边-->
<html lang="en">
<!--head 是网页的头部，head 中的内容不会在网页中直接出现，主要用于帮助浏览器或者搜索引擎来解析网页-->
<head>
<!--meta 标签用于设置网页的元数据，这里 meta 用于设置网页的字符集，避免乱码问题-->
<meta charset="UTF-8">
<!--title 中的内容会显示在浏览器的标题栏，搜索引擎会主要根据 title 中的内容来判断网页的主要内容-->
<title>网页的标题</title>
</head>
<!--boby 是 html 的子元素，表示网页的主体，网页中所有可见内容都应该写在 boby 里-->
<body>
<!--h1 网页的一级标题-->
<h1>网页的大标题</h1>
</body>
</html>
2、meta 标签
meta 主要用于设置网页中的一些元数据，元数据不是给用户看
-
charset 指定网页的字符集
-
name 指定的数据的名称
-
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开
description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中<meta name="description" content="京东 JD.COM- 专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/> <meta name="Keywords" content="网上购物, 网上商城, 家电, 手机, 电脑, 服装, 居家, 母婴, 美妆, 个护, 食品, 生鲜, 京东"/>
title 标签的内容会作为搜索结果的超链接上的文字显示<title>京东 (JD.COM)- 正品低价、品质保障、配送及时、轻松购物！</title><meta http-equiv="refresh" content="3;url=https://www.baidu.com"> <!--3秒后将页面重定向到另一个网站-->总结：
3、待补充的内容
4、图片标签
图片标签用于向当前页面中引入一个外部图片
使用 img 标签来引入外部图片，img 标签是一个自结束标签
img 这种元素属于替换元素(块和行内元素之间，具有两种元素的特点)
-
属性 :
○ src 属性 指定的是外部图片的路径(路径规则和超链接是一样的)
○ alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示 alt 的描述
○ width 图片的宽度 (单位是像素)
○ height 图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放注意:
一般情况在 pc 端，不建议修改图片的大小，需要多大的图片就裁多大但是在移动端，经常需要对图片进行缩放(大图缩小)
<img src="./img/ 动图 1.gif" alt="动态图">
<img src="https://thepaper-prod-oldimagefromnfs.oss-cn-shanghai.aliyuncs.com/image/24/389/918.gif" alt="动态图">
5、内联框架
内联框架，用于向当前页面中引入一个其他页面
-
src 指定要引入的网页的路径
-
frameborder 指定内联框架的边框
<iframe src="https://www.hutool.cn" width="800" height="600" frameborder = "10"></iframe>
6、音视频播放
⑴ audio 标签
audio 标签用来向页面中引入一个外部的音频文件的音视频文件引入时，默认情况下不允许用户自己控制播放停止
-
属性:
○controls是否允许用户控制播放
○autoplay音频文件是否自动播放
如果设置了 autoplay 则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放
○loop音乐是否循环播放<audio src="./sources/ 音乐.mp3" controls autoplay loop></audio>除了通过 src 来指定外部文件的路径以外，还可以通过 source 来指定文件路径
<audio controls> <!-- 对不起，您的浏览器不支持播放音频! 请升级浏览器! --> <source src="./sources/ 音乐.mp3"> <source src="./sources/aduio.ogg"> <embed src="./sources/ 音乐.mp3" type="audio/mp3" width="300"></embed> </audio>
⑵ video 标签
使用 video 标签来向网页中引入一个视频，使用方式和 audio 基本上是一样的
<video src="./sources/ 视频.mp4" controls autoplay loop></video>
7、超链接
⑴ 跳转到页面
⑵ 跳转到文件
⑶ 跳转到锚点
⑷ 唤起指定的应用
8、列表
⑴ 有序列表
⑵ 无序列表
⑶ 列表嵌套
⑷ 自定义列表
9、表格
⑴ 表格的基本机构
⑵ 表格常用属性
⑶ 表格的跨行与跨列
10、表单
⑴ 表单的基本机构
⑵ 常用的表单控件
⑶ 禁用表单控件
⑷ label 标签
⑸ fieldset 与 legend 的使用
⑹ 总结
11. HTML 实体
12. HTML 全局属性
三、CSS 介绍（层叠样式表）
1. CSS 简介
网页分成三个部分：
结构(HTML)
表现(css)
行为(JavaScript)
网页实际上是一个多层的结构，通过 css 可以分别为网页的每一个层来设置样式而最终我们能看到只是网页的最上边一层，总之一句话，CSS 用来设置网页中元素的样式
2. 使用 css 来修改元素的样式
⑴ 第一种方式(内联样式，行内样式)
在标签内部通过 style 属性来设置元素的样式
<p style="color: red; font-size: 60px;">柯基侦探微信公众号</p>
问题:
使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
注意: 开发时绝对不要使用内联样式
⑵ 第二种方式(内部样式表)
将样式编写到 head 中的 style 标签里，然后通过 CSS 的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。
内部样式表更加方便对样式进行复用
问题:
我们的内部样式表只能对一个网页起作用它里边的样式不能跨页面进行复用
<style>
p{
color:red;
size: 60px;
}
</style>
. . .
<p>柯基侦探微信公众号</p>
<p>一个带你有趣好玩的地方</p>
⑶ 第三种方式(外部样式表) 最佳实践
可以将 css 样式编写到一个外部的 css 文件中，然后通过 link 标签来引入外部的 CSS 文件。
外部样式表需要通过 link 标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式可以在不同页面之间进行复用
将样式编写到外部的 css 文件中，可以使用到浏览器的缓存机制从而加快网页的加载速度，提高用户的体验。
<link rel="stylesheet" href="./style.css">
. . .
<p>柯基侦探微信公众号</p>
<p>一个带你有趣好玩的地方</p>
3.CSS 基本语法
⑴ CSS 注释
CSS 中的注释，注释中的内容会自动被浏览器所忽略
⑵ 选择器 和 声明块
-
选择器，通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的 p 元素
-
声明块 ，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成，声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以:连接，以;结尾
⑶ 选择器的分类
1) 元素选择器
-
作用: 根据标签名来选中指定的元素
-
语法: 标签名{}
-
例子:
p{}h{}div{}p{ color: blue; font-size: 50px; }
2) id 选择器
-
作用: 根据元素的 id 属性值选中一个元素
-
语法:
#id 属性值{} -
例子:
#boxf{}#red{}#hehe{ color: aquamarine; } . . . <p id="hehe">柯基侦探微信公众号</p> <p>一个带你有趣好玩的地方</p>
3）类选择器
-
作用: 根据元素的 class 属性值选中一组元素
-
语法:
.class属性值.haha{ color: palevioletred; } . . . <p class="haha">柯基侦探微信公众号</p> <p class="haha">一个带你有趣好玩的地方</p>
同一个元素可以指定多个 class, 多个 class 之间用空格隔开
4) 通配选择器
- 作用: 选中页面中的所有元素
- 语法:
*{}
5）复合选择器
① 交集选择器
- 作用: 选中同时复合多个条件的元素
- 语法:
选择器 1 选择器 2 选择器 3 选择器 n{}
div.a.b.c{
font-size: 50px;
color: blueviolet;
}
p#haha{
color: green;
}
. . .
<p id="haha">柯基侦探微信公众号</p>
<div class="a b c">一个带你起飞的地方</div>
<span>快去关注吧</span>
注意点:
交集选择器中如果有元素选择器，必须使用元素选择器开头
② 选择器分组(并集选择器）
-
作用: 同时选择多个选择器对应的元素
-
语法:
选择器 1, 选择器 2, 选择器 3, 选择器 n{}
例如:#b1,.p1,h1,span,div.red{}span,#haha,.a.b.c{ font-size: 50px; color: rgb(129, 8, 99); } . . . <p id="haha">柯基侦探微信公众号</p> <div class="a b c">一个带你起飞的地方</div> <span>快去关注吧</span>
注意：
1. 并集选择器，我们一般竖着写
2. 任何形式的选择器，都可以作为并集选择器的一部分
3. 并集选择器，通常用于集体声明，可以缩小样式表体积
③ 后代选择器
-
作用: 选中指定元素中符合要求的后代元素
-
语法:
选择器 1 选择器 2 选择器 3 选择器 n{}
例如:#b1 .p1 h1 span div .red{}ul li{ color: blueviolet; } . . . <ul> <li> 抽烟 </li> <li>喝酒</li> <li>烫头</li></li> <div> <li>踢球</li> </div> </ul> <hr/> <ol> <li>张三</li> <li>李四</li> <li>王五</li> </ol><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0" > <title>Document</title> <style> ul li{ color: blueviolet; } </style> </head> <body> <ul> <li> 抽烟 </li> <li>喝酒</li> <li>烫头</li></li> <div> <li>踢球</li> </div> </ul> <hr/> <ol> <li>张三</li> <li>李四</li> <li>王五</li> </ol> </body> </html>注意 ：
1. 后代选择器最终选中的是后代，不选中祖先
2. 儿子、孙子、重孙都属于后代
3. 结构一定要符合之前讲的 html 嵌套要求，例如: 不能p元素中写h1~h6
④ 子代选择器
-
作用: 选中指定元素中符合要求的子元素(儿子元素)。(先写父，再写子)
-
语法:
选择器 1 >选择器 2 >选择器 3 >选择器 n{}
例如:#b1>.p1>h1>span>div>.red{}... div>a{ color: blue; } div>p>a{ color: blueviolet; } ... <div> <a href="#">张三</a> <a href="#">李四</a> <a href="#">王五</a> <p> <a href="#">葛二蛋</a> </p> </div>
注意：
1. 子代选择器最终选择的是子代，不是父级
2. 子、孙子、重孙子、重重孙子…统称为后代， 子就是指儿子。
6) 属性选择器
7) 伪类选择器
① 伪类选择器_动态伪类
-
:link超链接未被访问的状态 -
:visited超链接访问过的状态 -
:hover鼠标悬停在元素上的状态 -
:active 元素
激活的状态什么是激活状态?——按下鼠标不松开
注意：遵循LVHA的顺序，即:link,visited,hover,active。 -
:focus获取焦点的元素表单元素才能使用
:focus伪类
当用户: 点击元素、触摸元素（手机端时候）或通过键盘的 tab 键等方式，选择元素时就是获取焦点
例如：
. . .
<style>
a:link{
color: blue;
}
a:visited{
color:pink;
}
a:hover{
color:green;
}
a:active{
color:skyblue;
}
span:hover{
color:red;
}
span:active{
color:yellowgreen;
}
input:focus,select:focus{
color:yellow;
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
<a href="https://www.alibabagroup.com">阿里巴巴</a>
<a href="https://www.jd.com">去京东</a>
<span>柯基侦探</span>
<br>
<input type="text" />
<br>
<input type="text" />
<br>
<input type="text" />
<br>
<select>
<option>北京</option>
<option>上海</option>
</select>
</div>
</body>
. . .
② 伪类选择器_结构伪类
常用的：
:first-child所有兄弟元素中的第一个:last-child所有兄弟元素中的最后一个:nth-child(n)所有兄弟元素中的第 n 个:first-of-type所有同类型兄弟元素中的第一个:last-of-type所有同类型兄弟元素中的最后一个:nth-of-type(n)所有同类型兄弟元素中的第 n 个
关于 n 的值: 只能是
an+b的形式
0 或不写: 什么都不选中——几乎不用n: 选中所有的子元素——几乎不用1~ 正无穷的整数：选中对应序号的子元素2n 或者 even：选中序号为偶数的子元素2n+ 1 或者 odd: 选中序号为奇数的子元素-n+3：选中前三个子元素
例如：
. . .
<style>
div>p:first-child{
color:red;
}
div>p:last-child{
font-size:60px;
}
div>p:nth-child(2){
color: yellowgreen;
}
div>span:first-of-type{
font-size: 100px;
}
div>span:last-of-type{
font-size: 100px;
}
div>span:nth-of-type(2n){
color: gray;
}
</style>
</head>
<body>
<div>
<p>张三:100</p>
<span>王麻子</span>
<p>李四:73</p>
<span>朱老六</span>
<p>王五:62</p>
</div>
</body>
. . .
③ 伪类选择器_否定伪类
格式和作用：:not() 排除满足括号中条件的元素
例如：
. . .
<style>
div>p:not(.fail){
font-size: 30px;
}
div>p:not([title^="你要加油啊"]){
color: #379fdb;
}
div>p:not(:first-child){
background-color: blueviolet;
}
</style>
. . .
④ 伪类选择器_UI 伪类
格式和作用：
:checked被选中的复选框或单选按钮。:enable可用的表单元素 ( 没有 disabled 属性)。:disabled不可用的表单元素 ( 有 disabled 属性)。
例如：
. . .
<style>
input:checked{
width: 100px;
height: 100px;
}
input:disabled{
background-color: red;
}
input:enabled{
background-color: green;
}
</style>
. . .
⑤ 伪类选择器_目标伪类
格式和作用：
:target 选中锚点指向的元素
. . .
<style>
div{
background-color: darkgray;
height: 300px;
}
div:target{
background-color: green;
}
</style>
. . .
⑥ 伪类选择器_语言伪类
格式和作用：:lang()根据指定的语言选择元素(本质是看 lang 属性的值)。
. . .
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0" >
<title>Document</title>
<style>
div:lang(en){
color:red;
}
div:lang(zh-CN){
color:green;
}
</style>
</head>
. . .
8) 伪元素选择器
① 作用: 选中元素中的一些特殊位置。
② 格式
常用伪元素:
○ ::first-letter 选中元素中的 第一个文字 。
○ ::first-line 选中元素中的 第一行文字 。
○ ::selection 选中被 鼠标选中 的内容。
○::placeholder 选中输入框的 提示文字 。
○::before 在元素 最开始 的位置，创建一个子元素 (必须用 content 属性指定内容)。
○ ::after 在元素 最后的 位置，创建一个子元素(必须用 content 属性指定内容)。
. . .
<style>
/* 选中的是 div 中第一个文字 */
div::first-letter{
color: red;
font-size: 30px;
}
/* 选中的是 div 中第一行文字 */
div::first-line{
background-color: yellow;
}
/* 选中的是 div 中被鼠标选中的文字 */
div::selection{
background-color: pink;
color: orange;
}
/* 选中的是 input 中的提示文字 */
input::placeholder{
color: skyblue;
}
/* 选中的是 p 元素最开始的位置，随后创建一个子元素 */
p::before{
content: "￥";
}
/* 选中的是 p 元素最后的位置，随后创建一个子元素 */
p::after{
content: ".00";
}
</style>
. . .
⑷ 选择器的优先级
通过 不同的选择器 ，选中 相同的元素 ，并且为 相同的样式名 设置 不同的值 时，就发生了样式的冲突。选中相同的元素到底应用哪个样式此时就需要看 优先级 了。
简单描述：
行内样式>ID 选择器>类选择器>元素选择器>通配选择器
4. CSS 三大特性
⑴ 层叠性
- 概念
如果发生了样式冲突，就会根据一定的规则(选择器优先级)，进行样式的层叠(覆盖)。
什么是样式冲突? — 元素的 同一个样式名 ，被设置成了 不同的值，这就是冲突。
⑵ 继承性
-
概念: 元素会自动拥有 其父元素 、或 其祖先元素 上所设置的 某些样式。
-
规则: 优先继承 离得近 的。
-
常见的可继承属性:
text-??，font-??，line-??，color …
⑶ 优先级
!important>行内样式>ID 选择器>类选择器>元素选择器>*>继承的样式。·
5. CSS 颜色的三种表示方式
⑴ 表示方式一：颜色名
⑵ 表示方式二：rgb 或 rgba
⑶ 表示方式三：HEX 或 HEXA
⑷ 表示方式四：HSL 或 HSLA
6. CSS 常用的字体属性
⑴ 字体大小
⑵ 字体族
⑶ 字体风格
⑷ 字体粗细
⑸ 字体复合属性
7. CSS 常用的文本属性
⑴ 文本颜色
⑵ 文本间距
⑶ 文本修饰
⑷ 文本缩进
⑸ 文本水平对齐
⑹ 行高
⑺ 文本垂直对齐
⑻ vertical-align 对齐
8. CSS 列表相关的属性
⑴ 有序列表 ol 和无序列 ul 表相关的属性
⑵ 表格 table 相关的属性
1) 表格边框相关的属性(其他标签也能用)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
/* 边框的宽 */
/* border-width: 2px; */
/* 边框的颜色 */
/* border-color: red; */
/* 边框线条类型 */
/* border-style: solid; */
border: 2px green solid;
}
h1{
border: 2px purple double;
}
</style>
</head>
<body>
<h1>边框不仅仅是表格才能设置，很多标签都能设置</h1>
<table>
<caption>人员信息表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>19</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>11</td>
<td>女</td>
<td>群众</td>
</tr>
<tr>
<td>3</td>
<td>赵六</td>
<td>39</td>
<td>男</td></td>
<td>群众</td>
</tr>
<tr>
<td>4</td>
<td>柯基</td></td>
<td>19</td>
<td>女</td>
<td>少先队员</td>
</tr>
</tbody>
</table>
</body>
</html>
2) 表格独有的属性 (只有table 标签才能使用)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border: 2px green solid;
width: 500px;
/* 控制表格的宽度 */
table-layout: fixed;
/* 控制单元格间距 ( 生效的前提是：不能合并相邻单元格的边框) */
border-spacing: 10px;
/* 合并相邻单元格的边框 */
/* border-collapse: collapse; */
/* 隐藏没有内容的单元格 (生效的前提是：不能合并相邻单元格的边框) */
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;
}
td,th{
border: 2px orange solid;
}
</style>
</head>
<body>
<table>
<caption>人员信息表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>19</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>11</td>
<td>女</td>
<td>群众</td>
</tr>
<tr>
<td>3</td>
<td>赵六</td>
<td>39</td>
<td></td></td>
<td>群众</td>
</tr>
<tr>
<td>4</td>
<td>柯基</td></td>
<td>19</td>
<td>女</td>
<td>少先队员</td>
</tr>
</tbody>
</table>
</body>
</html>
9. CSS 背景相关的属性
. . .
<style>
body{
background-color: slategray;
}
div{
. . .
/* 设置背景颜色，默认是 transparent*/
/* background-color: skyblue; */
/* 设置背景图片 */
/* background-image: url(../img/ 美女.jpg); */
/* 设置背景图片的重复方式 */
/* background-repeat: no-repeat; */
/* 控制背景图片的位置———第一种写法：用关键词 */
/* background-position: center center; */
/* 控制背景图片的位置———第二种写法：用具体的像素值 */
/* background-position: 100px 100px; */
background:transparent url(../img/ 美女.jpg) no-repeat 100px 200px;
}
</style>
. . .
10. CSS 鼠标相关的属性
. . .
<style>
div{
width: 400px;
height: 400px;
background-color: skyblue;
cursor: url("../img/ 宠物.png"),pointer;
}
</style>
. . .
11. CSS 盒子模型
⑴ CSS 常用的长度单位
⑵ 元素的显示模式
⑶ 修改元素显示模式
⑷ 盒子模型的组成部分
1) 盒子内容区content
注意：
2) 盒子的内边距padding
3) 盒子的边框border
4) 盒子的外边距margin
① 子元素的 margin，是参考父元素的 content 计算的。(因为是父亲的 content 中承装着子元素)
可以理解为如下图:
② 上 margin、左 margin: 影响自己的位置; 下 margin、右margin: 影响后面兄弟元素的位置。
③ 块级元素、行内块元素，均可以完美地设置四个方向的 marqin ; 但行内元素，左右 marqin 可以完美设置，上下 margin 设置无效。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
margin: 10px;
background-color: yellow;
}
img{
width: 200px;
margin: 10px;
}
.one{
background-color: yellowgreen;
}
.two{
background-color: deeppink;
margin-left: 10px;
margin-right: 10px;
margin-top: 100px;
margin-bottom: 100px;
}
.three{
background-color: darkcyan;
}
</style>
</head>
<body>
<div>我是块元素 div1</div>
<div>我是块元素 div2</div>
<img src="../img/ 动图 1.gif">
<div>我是块元素 div3</div>
<hr/>
<span class="one">我是行内元素 span1</span><span class="two">我是行内元素 span2</span><span class="three">我是行内元素 span3</span>
</body>
</html>
④ margin 的值也可以是 auto，如果给一个块级元素设置左右margin 都为 auto，该块级元素会在父 A 元素中水平居中。
⑤ margin 的值可以是负值。
⑥ margin的两大问题
⑸ CSS 内容的溢出问题
⑹ CSS 隐藏元素的两种方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
}
.box1{
background-color: deeppink;
/* display: none; */
visibility: hidden;
}
.box2{
background-color: darkred;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
</html>
⑺ CSS 样式的继承
- 开发者工具中样式部分的解读：
⑻ CSS 元素的默认样式
⑼ 布局小技巧
1) 设计一个 div 水平居中，div 中的文字水平居中的方式 ( 块与块元素之间的垂直水平居中)
2) 设计一个 span 元素在 div 元素中水平和垂直居中（让行元素在块元素中垂直水平居中）
3) 设计一个 span 元素和 图片 img元素在 div 中垂直水平居中
⑽ CSS 行内元素之间的空白问题
行内元素不处理的样子：
处理之后的样子：
⑾ CSS 行内块幽灵空表问题
问题演示：
解决之后的样子：
12. CSS 浮动
⑴ CSS 浮动的简介
⑵ CSS 元素浮动后的特点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
height: 400px;
background: gray;
padding: 10px;
/* text-align: center; */
}
.box{
font-size: 20px;
padding: 10px;
padding: 10px;
}
.box1{
background-color: skyblue;
}
.box2{
background-color: orange;
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
.box3{
background-color: deeppink;
}
.box4{
background-color: darkgreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>
<div class="box box3">盒子3</div>
<div class="box box4">盒子4</div>
</div>
</html>
⑶ 浮动后的影响
解决方法：
13. CSS 元素的定位
⑴ CSS 相对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width: 500px;
background-color: gray;
padding: 10px;
border: 1px solid black;
}
.box{
height: 100px;
width: 100px;
}
.box1{
background-color: deeppink;
}
.box2{
background-color: dodgerblue;
position: relative;
left: 20px;
}
.box3{
background-color: darkred;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>
<div class="box box3">盒子3</div>
</div>
</html>
1）如何设置相对定位?
2）相对定位的参考点在哪里？
- 相对自己原来的位置
3）相对定位的定位
注意：绝大多数情况下，相对定位，会与绝对定位配合使用
⑵ CSS 绝对定位
1）如何设置绝对定位？
2）绝对定位的参考点在哪里？
3）绝对定位元素的特点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width: 500px;
background-color: gray;
padding: 10px;
border: 1px solid black;
/* position: relative; */
}
.box{
height: 100px;
width: 100px;
}
.box1{
background-color: deeppink;
}
.box2{
background-color: dodgerblue;
position: absolute;
left: 0px;
}
.box3{
background-color: darkred;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>
<div class="box box3">盒子3</div>
</div>
</html>
⑶ CSS 固定定位
1) 如何设置为固定定位？
2) 固定定位的参考点在哪里？
3) 固定定位元素的特点
⑷ CSS 粘性定位
1）如何设置为粘性定位？
2）粘性点位的参考点在哪里？
3）粘性定位元素的特点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height: 10000px;
}
* {
margin: 0px;
padding: 0px;
}
.page-header {
height: 100px;
background-color: yellow;
text-align: center;
line-height: 100px;
}
.first {
font-size: 40px;
background-color: skyblue;
position: sticky;
top: 0px;
}
h1 {
background-color: gray;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="page-header">头部</div>
<!-- 内容区 -->
<div class="content">
<!-- 每一项 -->
<div class="item">
<div class="first">A</div>
<h1>A1</h1>
<h1>A2</h1>
<h1>A2</h1>
<h1>A3</h1>
<h1>A4</h1>
<h1>A5</h1>
<h1>A6</h1>
</div>
<div class="item">
<div class="first">B</div>
<h1>B1</h1>
<h1>B2</h1>
<h1>B2</h1>
<h1>B3</h1>
<h1>B4</h1>
<h1>B5</h1>
<h1>B6</h1>
</div>
<div class="item">
<div class="first">C</div>
<h1>C1</h1>
<h1>C2</h1>
<h1>C2</h1>
<h1>C3</h1>
<h1>C4</h1>
<h1>C5</h1>
<h1>C6</h1>
</div>
<div class="item">
<div class="first">D</div>
<h1>D1</h1>
<h1>D2</h1>
<h1>D2</h1>
<h1>D3</h1>
<h1>D4</h1>
<h1>D5</h1>
<h1>D6</h1>
</div>
</div>
</html>
⑸ CSS 定位的层级
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width: 500px;
background-color: gray;
padding: 20px;
border: 1px solid black;
position: relative;
/* z-index: 2; */
}
.box{
height: 200px;
width: 200px;
}
.box1{
background-color: deeppink;
}
.box2{
background-color: dodgerblue;
position: relative;
top:-150px;
left: 50px;
}
.box3{
background-color: darkred;
position: absolute;
top:130px;
left: 130px;
}
.box4{
background-color: greenyellow;
position: fixed;
top: 200px;
left: 200px;
z-index: 20;
}
.box5{
background-color: purple;
position: fixed;
top: 300px;
left: 300px;
z-index: 10;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>
<div class="box box3">盒子3</div>
<div class="box box4">盒子4</div>
</div>
<div class="box box5">盒子5</div>
</html>
⑹ CSS 定位的特殊应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
height: 400px;
background-color: gray;
position: relative;
}
background-color: orange;
font-size: 20px;
padding: 20px;
border: 10px solid black;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">inner</div>
</div>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
width: 800px;
height: 400px;
background-color: gray;
position: relative;
}
width: 400px;
height: 100px;
background-color: orange;
position: absolute;
/* 方案一：*/
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* 方案二
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -50px;*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">inner</div>
</div>
</html>
14. 网页设计
⑴ CSS 布局_版心
⑵ CSS 布局_常用类名
⑶ CSS 布局_重置默认样式
四、HTML5(H5)介绍
1. HTML5 简介
⑴ 什么是 HTML5
⑵ HTML5 的优势
⑶ HTML5 支持的浏览器
2. H5 新增语义化标签
⑴ H5 新增布局标签
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5 新增标签</title>
</head>
<body>
<!-- 头部 -->
<header class="page-header">
<h1>柯基侦探</h1>
</header>
<hr>
<!-- 主导航 -->
<nav>
<a href="#">首页</a>
<a href="#">订单</a>
<a href="#">购物车</a>
</nav>
<!-- 主要内容 -->
<div class="page-content">
<aside style="float: right;">
<nav>
<ul>
<li><a href="#">秒杀专区</a></a></li>
<li><a href="#">会员专区</a></a></a></li>
<li><a href="#">领取优惠券</a></a></li>
<li><a href="#">品牌专区</a></a></li>
</ul>
</nav>
</aside>
<!-- 文章 -->
<article>
<h2>《如何一夜暴富》</h2>
<section>
<h3> 第一种方式：通过做梦</h3>
<p>你要这么做梦:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</section>
<section>
<h3> 第二种方式：通过买彩票</h3>
<p>你要买彩票:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</section>
<section>
<h3> 第三种方式：远离编程</h3>
<p>抓紧转行:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</section>
</article>
<!-- 侧边栏导航 -->
</div>
<hr>
<footer>
<nav>
<a href="#">友情链接1</a>
<a href="#">友情链接2</a>
<a href="#">友情链接3</a>
<a href="#">友情链接4</a>
<a href="#">友情链接5</a>
</nav>
</footer>
</body>
</html>
⑵ H5 新增状态标签
1）meter 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5 新增标签</title>
</head>
<body>
<span>手机电量:</span>
<meter max="100" min="0" value="90" low="10" high="20" optimum="90"></meter>
</body>
</html>
2）progress 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5 新增标签</title>
<style>
height: 40px;
}
</style>
</head>
<body>
<span>工作完成情况:</span>
<progress max="100" value="50" id="pss"></progress>
</body>
</html>
⑶ H5 新增列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5 新增列表标签</title>
</head>
<body>
<form action="#">
<input type="text" list="mydata"></input>
<button>搜索</button>
</form>
<datalist id="mydata">
<option value="周杰伦">周杰伦</option>
<option value="周冬雨">周冬雨</option>
<option value="马冬梅">马冬梅</option>
<option value="温兆伦">温兆伦</option>
</datalist>
<br>
<details>
<summary>如何成为 it 小能手？</summary>
<p>跟着柯基侦探一起混~</p>
</details>
</body>
</html>
⑷ H5 新增文本标签
1）文本拼音
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5 新增文本拼音标签</title>
</head>
<body>
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
</body>
</html>
汉字转拼音的网站:
https://www.aies.cn/pinyin2.htm
2）文本标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5 新增文本标记标签</title>
</head>
<body>
<p>Lorem ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Temporibus, porro at autem, nihil dicta omnis ex impedit aperiam quibusdam nobis, similique maiores sit voluptates error vel aliquam molestiae cupiditate ipsam?</p>
</body>
</html>
⑸ 新增表单控件属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增的表单控件属性</title>
</head>
<body>
<form action="">
账号:<input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="wP{6}">
<br>
密码:<input type="password" name="pwd" placeholder="请输入密码" required>
<br>
性别：<input type="radio" value="male" name="genner" required>男
<input type="radio" value="feemale" name="genner">女
<br>
爱好:
<input type="checkbox" value="smoke" name="hobby">抽烟
<input type="checkbox" value="drink" name="hobby" required>喝酒
<input type="checkbox" value="perm" name="hobby">烫头
<br>
其他：<textarea name="other" placeholder="请输入具体的内容" required></textarea>
<br>
<button>提交</button>
</form>
</body>
</html>
⑹ input 新增 type 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input 新增 type 属性值</title>
</head>
<body>
<!-- <form action="" novalidate> -->
<form action="">
邮箱:<input type="email" name="email">
<br>
url:<input type="url" name="url" required>
<br>
数值:<input type="number" name="number" step="2" max="80" min="20" required>
<br>
搜索:<input type="search" name="keyword" required>
<br>
电话:<input type="tel" name="phone" required>
<br>
光照强度:<input type="range" name="range" max="60" min="20" value="20">
<br>
颜色:<input type="color" name="color">
<br>
日期:<input type="date" name="date" required>
<br>
月份:<input type="month" name="month" required>
<br>
周:<input type="week" name="week" required>
<br>
时间:<input type="time" name="time" required>
<br>
日期 + 时间:<input type="datetime-local" name="time2" required>
<br>
<button>提交</button>
</form>
</body>
</html>
⑺ 新增视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增视频标签</title>
<style>
video{
width: 600px;
}
</style>
</head>
<body>
<video src="../videos/ 小视频.mp4" controls muted loop preload="auto" poster="./img/ 封面.jpg" ></video>
</body>
</html>
⑻ 新增音频标签
⑼ H5 新增的全局属性
3.HTML5 兼容性处理
五、CSS3 介绍
1. CSS3 概述
2. 为什么要私有前缀
3. 常用浏览器私有前缀
4. CSS3 新增长度单位
5.CSS3 新增颜色设置方式
6. CSS3 新增选择器
7. CSS3 新增盒子属性
⑴ box-sizing 怪异盒模型
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增视频标签</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: deepskyblue;
padding: 10px;
border: 10px solid black;
margin-bottom: 10px;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
padding: 10px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
⑵ resize 调整盒子大小
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增视频标签</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: deepskyblue;
padding: 10px;
border: 10px solid black;
margin-bottom: 10px;
resize: both;
overflow: hidden;
}
.box2{
width: 200px;
height: 500px;
background-color: yellow;
padding: 10px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
⑶ box-shadow 盒子阴影
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
box-shadow: 10px 10px 10px 10px inset blue;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
⑷ opacity 不透明度
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: orange;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box1">
柯基侦探
</div>
</body>
</html>
8. CSS3 新增背景属性
⑴ background-origin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
width: 400px;
height: 400px;
background-color: orange;
border: 50px dashed blue;
padding: 50px;
background-repeat: no-repeat;
background-image: url(../img/ 动图 1.gif);
background-origin: border-box;
}
</style>
</head>
<body>
<div class="box1">
柯基侦探
</div>
</body>
</html>
⑵ background-clip
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
width: 400px;
height: 400px;
background-color: orange;
border: 50px dashed blue;
padding: 50px;
background-repeat: no-repeat;
background-image: url(../img/ 动图 1.gif);
background-clip: content-box;
}
</style>
</head>
<body>
<div class="box1">
柯基侦探
</div>
</body>
</html>
⑶ background-size
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url(../img/ 动图 1.gif);
background-size: cover;
}
</style>
</head>
<body>
<div class="box1">
柯基侦探
</div>
</body>
</html>
⑷ background 复合属性
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background 复合属性</title>
<style>
.box1{
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 40px;
padding: 50px;
border: 50px dashed rgba(255, 0, 0,0.7);
background-image: url(../img/ 动图 1.gif);
/* 颜色 背景 url 是否重复 位置 / 大小 原点 裁切方式 */
background: orange url(../img/ 动图 1.gif) no-repeat 10px 10px / 500px 500px border-box;
}
</style>
</head>
<body>
<div class="box1">
柯基侦探
</div>
</body>
</html>
⑸ background 多背景图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background 复合属性</title>
<style>
.box1{
width: 400px;
height: 400px;
border: 1px solid black;
background: url('../img/ 宠物.png') no-repeat left top,
url('../img/ 宠物.png') no-repeat right top,
url('../img/ 宠物.png') no-repeat left bottom,
url('../img/ 宠物.png') no-repeat right bottom;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
9. CSS3 新增边框属性
⑴ 边框圆角
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框外轮廓</title>
<style>
.box1{
width: 400px;
height: 400px;
border: 1px solid black;
border-top-left-radius: 40px 20px;
border-top-right-radius: 40px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 20px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
⑵ 边框外轮廓
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框外轮廓</title>
<style>
.box1{
width: 400px;
height: 400px;
border: 20px solid black;
padding: 10px;
outline-width: 20px;
outline-color: yellow;
outline-style: solid;
outline-offset: 5px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
10. CSS3 新增文本属性
⑴ 文本阴影
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本阴影</title>
<style>
h1{
font-size: 40px;
text-shadow: 10px 10px 10px green;
}
</style>
</head>
<body>
<h1>柯基侦探</h1>
</body>
</html>
⑵ 文本换行
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本换行</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid black;
font-size: 20px;
white-space: pre;
}
</style>
</head>
<body>
<div>
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
</div>
</body>
</html>
⑶ 文本溢出
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本溢出</title></title>
<style>
ul{
width: 400px;
height: 400px;
border: 1px solid black;
font-size: 20px;
list-style: none;
padding-left: 0px;
}
li{
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>残疾女孩街头直播遭拍臀 警方通报</li>
<li>法院撤回被执行人 270 只避孕套拍卖</li>
<li>13日，有网友发布高速上警车截停私家车的视频引发关注，警车的行为被质疑存在报复性执法。</li>
<li>16日，欲冲闯中国黄岩岛周边 12 海里水域的菲所谓民间组织，声称成功完成预定任务。知情人士：不属实，离黄岩岛还有 50 海里</li>
<li>庆余年 2 广告好多</li>
</ul>
</body>
</html>
⑷ 文本修饰
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本修饰</title></title>
<style>
h1{
font-size: 100px;
text-decoration: overline dashed blue;
}
</style>
</head>
<body>
<h1>欢迎关注柯基侦探微信公众号！！！</h1>
</body>
</html>
⑸ 文本描边
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本描边</title></title>
<style>
h1{
font-size: 100px;
/* -webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: red; */
-webkit-text-stroke: red 2px;
}
</style>
</head>
<body>
<h1>欢迎关注柯基侦探微信公众号！！！</h1>
</body>
</html>
11. CSS3 新增渐变
⑴ 线性渐变
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title></title>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 20px;
}
.box1{
background-image: linear-gradient(red,yellow,green);
}
.box2{
background-image: linear-gradient(to right top,red,yellow,green);
}
.box3{
background-image: linear-gradient(20deg, red ,yellow ,green );
}
.box4{
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
}
</style>
</head>
<body>
<div class="box box1">默认情况 ( 从上到下)</div>
<div class="box box2">使用关键词设置线性渐变方向</div>
<div class="box box3">使用角度设置线性渐变方向</div>
<div class="box box4">调整开始渐变位置</div>
</body>
</html>
⑵ 径向渐变
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title></title>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 20px;
}
.box1{
background-image: radial-gradient(red,yellow,green);
}
.box2{
background-image: radial-gradient(at right top,red,yellow,green);
}
.box3{
background-image: radial-gradient(at 100px 50px, red ,yellow ,green );
}
.box4{
background-image: radial-gradient(circle,red,yellow,green);
}
.box5{
background-image: radial-gradient(200px 200px,red,yellow,green);
}
.box6{
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
}
</style>
</head>
<body>
<div class="box box1">默认情况</div>
<div class="box box2">使用关键词设置径向渐变圆的圆心</div>
<div class="box box3">使用像素值设置径向渐变圆的圆心</div>
<div class="box box4">调整关键字 circle 设置径向渐变圆为正圆</div>
<div class="box box5">调整像素值设置径向渐变圆为正圆</div>
<div class="box box6">调整径向渐变的区域</div>
</body>
</html>
⑶ 重复渐变
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重复渐变</title></title>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 20px;
}
.box1{
background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);
}
.box2{
background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
}
</style>
</head>
<body>
<div class="box box1">重复径向渐变</div>
<div class="box box2">重复线性渐变</div></div>
</body>
</html>
12. web 字体 & 字体图标
⑴ web 字体
1)基本用法
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> web 字体</title>
<style>
@font-face {
font-family: "像素字体";
src: url(./font1/ 像素字体.ttf);
}
@font-face {
font-family: 'kjzt';
font-display: swap;
src: url('./font2/webfont.eot'); /* IE9 */
src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./font2/webfont.woff2') format('woff2'),
url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
.f1{
font-size: 100px;
font-family: '像素字体';
}
.f2{
font-size: 100px;
font-family: 'kjzt';
}
</style>
</head>
<body>
<h1 class="f1">中国制造，惠及全球</h1>
<h1 class="f2">中国制造，惠及全球</h1>
</body>
</html>
2) 定制字体
https://www.iconfont.cn/webfont#!/webfont/index
⑵ 字体图标
https://www.iconfont.cn/
现在文件拷贝到项目中
1）本地使用阿里图标库
① Unicode 方式引用
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标字体</title>
<style>
/* 第一步：拷贝项目下面生成的 @font-face */
@font-face {
font-family: 'iconfont';
src: url('./font3/iconfont.woff2') format('woff2'),
url('./font3/iconfont.woff?t=1715919243786') format('woff'),
url('./font3/iconfont.ttf?t=1715919243786') format('truetype');
}
/* 第二步：定义使用 iconfont 的样式 */
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 100px;
}
</style>
</head>
<body>
<!-- 第三步：挑选相应图标并获取字体编码，应用于页面 -->
<span class="iconfont">&
<span class="iconfont">&
<span class="iconfont">&
<span class="iconfont">&
</body>
</html>
② Font class 方式引用
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<!-- 第一步：引入项目下面生成的 fontclass 代码：-->
<link rel="stylesheet" href="./font3/iconfont.css">
<style>
.iconfont{
font-size: 100px;
}
</style>
</head>
<body>
<!-- 第二步：挑选相应图标并获取类名，应用于页面：-->
<span class="iconfont icon-sousuo"></span>
<span class="iconfont icon-qianbi"></span>
<span class="iconfont icon-yumaobi"></span>
<span class="iconfont icon-redu"></span>
</body>
</html>
③ Symbol 方式引用
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<!-- 第一步：引入项目下面生成的 symbol 代码：-->
<script src="./font3/iconfont.js"></script>
<!-- 第二步：加入通用 CSS 代码（引入一次就行）：-->
<style>
.icon {
/* width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden; */
font-size: 100px;
}
</style>
</head>
<body>
<!-- 第三步：挑选相应图标并获取类名，应用于页面：-->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yumaobi"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-redu"></use>
</svg>
</body>
</html>
2）在线使用阿里图标库
① Unicode 方式引用
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标字体</title>
<style>
/* 第一步：在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。*/
@font-face {
font-family: 'iconfont'; /* project id 2112807 */
src: url('//at.alicdn.com/t/font_2112807_9dbztd01bd.eot');
src: url('//at.alicdn.com/t/font_2112807_9dbztd01bd.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2112807_9dbztd01bd.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2112807_9dbztd01bd.woff') format('woff'),
url('//at.alicdn.com/t/font_2112807_9dbztd01bd.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2112807_9dbztd01bd.svg#iconfont') format('svg');
}
/* 第二步：定义使用 iconfont 的样式 */
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 100px;
}
</style>
</head>
<body>
<!-- 第三步：挑选相应图标并获取字体编码，应用于页面 -->
<span class="iconfont">&
<span class="iconfont">&
<span class="iconfont">&
<span class="iconfont">&
</body>
</html>
② Font class 方式引用
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<!-- 第一步：引入项目下面生成的 fontclass 代码：-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_2112807_9dbztd01bd.css">
<style>
.iconfont{
font-size: 100px;
}
</style>
</head>
<body>
<!-- 第二步：挑选相应图标并获取类名，应用于页面：-->
<span class="iconfont icon-sousuo"></span>
<span class="iconfont icon-qianbi"></span>
<span class="iconfont icon-yumaobi"></span>
<span class="iconfont icon-redu"></span>
</body>
</html>
③ Symbol 方式引用
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<!-- 第一步：引入项目下面生成的 symbol 代码：-->
<script src="//at.alicdn.com/t/font_2112807_9dbztd01bd.js"></script>
<!-- 第二步：加入通用 CSS 代码（引入一次就行）：-->
<style>
.icon {
/* width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden; */
font-size: 100px;
}
</style>
</head>
<body>
<!-- 第三步：挑选相应图标并获取类名，应用于页面：-->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yumaobi"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-redu"></use>
</svg>
</body>
</html>
13.CSS3_2D 变换
⑴ 2D 位移
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
/* 向 x 轴方向移动 */
/* transform:translateX(50%); */
/* 向 y 轴方向移动 */
/* transform:translateY(50%); */
/* 向 x 轴 y 轴上各移动 50px */
transform:translate(50px,50px);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
⑵ 2D 缩放
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
/* x 轴上的缩放 */
/* transform: scaleX(1.5); */
/* y 轴上的缩放 */
/* transform: scaleY(1.5); */
/* x y 轴同时缩放 */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
⑶ 2D 旋转
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
/* transform: rotateZ(30deg); */
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
⑷ 2D 扭曲
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
transform: skewX(30deg);
transform: skewY(30deg);
transform: skewX(30deg,30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
⑸ 变换原点
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
/* 通过关键词调整变换原点 */
/* transform-origin: right bottom; */
/* 通过具体像素值调整变换远点 */
/* transform-origin: 50px 50px; */
/* 通过百分比调整变换原点 */
/* transform-origin: 90% 30%; */
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
14.CSS3_3D 变换
⑴ 3D 空间与景深
1) 开启 3D 空间
2) 设置景深
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>3D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启 3d 空间 */
transform-style: preserve-3d;
/* 设置景深 ( 有了透视效果，近大远小) */
perspective: 500px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
⑵ 透视点的位置
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>3D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启 3d 空间 */
transform-style: preserve-3d;
/* 设置景深 ( 有了透视效果，近大远小) */
perspective: 500px;
/* 设置透视点的位置 */
perspective-origin: 400px 300px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
⑶ 3D 位移
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启 3d 空间 */
transform-style: preserve-3d;
/* 设置景深 ( 有了透视效果，近大远小) */
perspective: 500px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
transform: translateZ(-100px);
/* transform: translate3d(0px,0px,-30px); */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
⑷ 3D 旋转
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启 3d 空间 */
transform-style: preserve-3d;
/* 设置景深 ( 有了透视效果，近大远小) */
perspective: 500px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
/* transform: rotateX(30deg); */
/* transform: rotateY(30deg); */
transform: rotate3d(1,1,1,30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
⑸ 3D 缩放
⑹ 背面可见性
设置背面是否可见
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2D 变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启 3d 空间 */
transform-style: preserve-3d;
/* 设置景深 ( 有了透视效果，近大远小) */
perspective: 500px;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
transform: rotateY(0deg);
/* 设置背面是否可见 */
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">柯基侦探</div>
</div>
</body>
</html>
15.CSS3_过渡
⑴ 过渡的基本使用
1）transition-property
2）transition-duration
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过渡</title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: orange;
opacity: 0.5;
/* 设置哪个属性需要过渡效果 */
/* transition-property: height,width,background-color; */
/* 分别设置过渡时间 */
/* transition-duration: 1s,5s,10s; */
/* 让所有能过渡的属性都过渡 */
transition-property: all;
/* 设置一个时间，所有人都能用 */
transition-duration: 5s;
}
.box:hover{
height: 400px;
width: 400px;
background-color:green;
transform: rotate(45deg);
box-shadow: 0px 0px 20px black;
opacity: 1;
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
3）transition-delay
- 作用 ：指定开始过渡的延迟时间，单位是
s或ms
4）transition-timing-function
https://cubic-bezier.com/
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过渡</title></title>
<style>
.outer{
width: 1300px;
height: 900px;
border: 1px solid black;
}
.box{
height: 100px;
width: 200px;
transition-property: all;
transition-duration: 5s;
}
.outer:hover .box{
width: 1300px;
}
.box1{
background-color: yellow;
transition-timing-function: ease;
}
.box2{
background-color: green;
transition-timing-function: linear;
}
.box3{
background-color: dimgrey;
transition-timing-function: ease-in;
}
.box4{
background-color: pink;
transition-timing-function: ease-out;
}
.box5{
background-color: deepskyblue;
transition-timing-function: ease-in-out;
}
.box6{
background-color: purple;
transition-timing-function: step-start;
}
.box7{
background-color: tomato;
transition-timing-function: step-end;
}
.box8{
background-color: chocolate;
transition-timing-function: steps(20,end);
}
.box9{
background-color: rebeccapurple;
transition-timing-function: cubic-bezier(1,.62,.37,1.86);
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">ease 平滑过渡 ( 慢 快 慢) </div>
<div class="box box2">linear（匀速）</div>
<div class="box box3"> ease-in(慢 快)</div>
<div class="box box4">ease-out(快 慢) </div>
<div class="box box5"> ease-in-out(慢 快 慢)</div>
<div class="box box6"> step-start 不考虑时间，直接到达终点</div>
<div class="box box7"> step-end 考虑过渡时间，但无过渡效果，过渡时间到了瞬间到达终点</div>
<div class="box box8"> steps 分步骤过渡</div>
<div class="box box9"> 贝塞尔曲线效果</div>
</div>
</body>
</html>
5）transition复合属性
16.CSS3_动画
⑴ 动画的基本使用
1）什么是帧
2）什么是关键帧
3）动画的设置
- 第一种方式：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>过渡</title></title> <style> .outer{ width: 1000px; height: 100px; border: 1px solid black; } /* 定义一个动画（定义一组关键帧）*/ @keyframes wangyoudong{ /* 第一帧 */ from{ } /* 最后一帧 */ to{ transform: translate(900px); background-color: red; } } .inner{ width: 100px; height: 100px; background-color: blue; /* 应用动画到元素 */ animation-name: wangyoudong; /* 动画持续时间 */ animation-duration: 3s; animation-delay: 0.5s; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html> - 第二种方式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>过渡</title></title> <style> .outer{ width: 1000px; height: 100px; border: 1px solid black; } /* 定义一个动画（定义一组关键帧）*/ @keyframes wangyoudong{ /* 第一帧 */ 0%{ } 50%{ background-color: yellow; } /* 最后一帧 */ 100%{ transform: translate(900px) rotate(360deg); background-color: red; border-radius: 50%; } } .inner{ width: 100px; height: 100px; background-color: blue; /* 应用动画到元素 */ animation-name: wangyoudong; /* 动画持续时间 */ animation-duration: 3s; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
⑵ 动画的其他属性
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动画</title></title>
<style>
.outer{
width: 1000px;
height: 100px;
border: 1px solid black;
}
/* 定义一个动画（定义一组关键帧）*/
@keyframes kejizhentan{
/* 第一帧 */
from{
}
/* 最后一帧 */
to{
transform: translate(900px) rotate(360deg);
background-color: red;
border-radius: 50%;
}
}
.inner{
width: 100px;
height: 100px;
background-color: blue;
/* 应用动画到元素 */
animation-name: kejizhentan;
/* 动画持续时间 */
animation-duration: 3s;
/* 动画延迟时间 */
animation-delay: 0.5s;
/* ********************************** 动画的其他属性——start ********************************** */
/* 设置动画的方式 */
animation-timing-function: linear;
/* 动画播放的次数 */
animation-iteration-count: infinite;
/* 设置动画的方向 */
animation-direction: alternate-reverse;
/* 动画以外的状态 ( 不发生动画的时候在哪里) */
/* animation-fill-mode: forwards; */
/* ********************************** 动画的其他属性——end ********************************** */
}
.outer:hover .inner{
/* 动画的播放的状态 */
animation-play-state: paused ;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
⑶ 动画复合属性
17. CSS3_多列布局
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
width: 1000px;
margin: 0 auto;
/* 直接指定列数 */
/* column-count: 5; */
/* 指定每一列的宽度，会自动计算列数 */
column-width: 250px;
/* 调整列间距 */
column-gap: 30px;
/* 设置每一列的边框宽度 */
/* column-rule-width: 2px; */
/* 设置每一列的边框风格 */
/* column-rule-style: dashed; */
/* 设置每一列的边框的颜色 */
/* column-rule-color: red; */
/* 边框相关的复合属性 */
column-rule: 2px dashed red;
}
h1{
column-span: all;
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<div id="outer">
<h1>《柯基侦探之猴王出世！！！！》</h1>
<p>【开始】海外有一国土，名日傲来国。国近大海，海中有一座名山，唤为花果山。那座山正当顶上，有一块仙石，其石有三丈六尺五寸高，有二丈四尺围圆 [2]。四面更无树木遮阴，左右倒有芝兰相衬。盖自开辟以来，每受天真地秀，日精月华，感之既久，遂(suigrave;) 有灵通 [3] 之意。内育仙胞，一日进裂，产一石卵，似圆球样大。因见风，化作一个石猴。那猴在山中，却会行走跳跃，食草木，饮涧泉，采山花，觅树果 ; 与狼虫为伴，虎豹为群，獐 (zhāng) 鹿为友，猕 (miacute;) 猿(yuaacute;n)为亲 ; 夜宿石崖之下，朝游峰洞之中。【结束】</p>
<p>【开始】一朝天气炎热，与群猴避暑，都在松阴之下顽 (waacute;n) 耍。一群猴子耍了一会儿，却去那山涧中洗澡。见那股涧水奔流，真个似滚瓜涌溅。古云:“禽有禽言，兽有兽语。”众猴都道:“这股水不知是哪里的水。我们今日赶闲无事，顺涧边往上溜头寻看源流，耍子 [4] 去耶 (yeacute;)!”喊一声，都拖男挈(qiegrave;) 女，唤弟呼兄，一齐跑来，顺涧爬山，直至源流之处，乃是一股瀑布飞泉。众猴拍手称扬道:“好水 ! 好水 ! 原来此处远通山脚之下，直接大海之波。”又道:“哪一个有本事的，钻进去寻个源头出来，不伤身体者，我等即拜他为王。”连呼了三声，忽见丛杂中跳出一个石猴，应声高叫道:“我进去 ! 我进去 !”他瞑(miacute;ng) 目[5]蹲身，将身一纵，径跳入瀑布泉中，忽睁睛抬头观看，那里边却无水无波，明明朗朗的一架桥梁。他住了身，定了神，仔细再看，原来是座铁板桥。桥下之水，冲贯于石窍 (qiagrave;o) 之间，倒挂流出去，遮闭了桥门。却又欠身上桥头，再走再看，却似有人家住处一般，真个好所在 [6]。石猴看罢多时，跳过桥中间，左右观看，只见正当中有一石碣(jieacute;)[7]。碣上有一行楷书大字，镌(juān) 着“花果山福地，水帘洞洞天”。【结束】</p>
<p>【开始】石猴喜不自胜，忽抽身往外便走，复瞑目蹲身，跳出水外，打了两个呵呵道:“大造化 [8]! 大造化 !”众猴把他围住，问道:“里面怎么样? 水有多深?”石猴道:“没水! 没水 ! 原来是一座铁板桥。桥那边是一座天造地设 [9] 的家当[10]。”众猴道:“怎见得是个家当?”石猴笑道:“这股水乃是桥下冲贯石窍，倒挂下来遮闭门户的。桥边有花有树，乃是一座石房。房内有石锅、石灶、石碗、石盆、石床、石凳。中间一块石碣上，镌着‘花果山福地，水帘洞洞天’。真个是我们安身之处。里面且是宽阔，容得千百口老小。我们都进去住，也省得受老天之气。”【结束】</p>
<p>【开始】众猴听得，个个欢喜。都道：“你还先走，带我们进去，进去 !”石猴却又瞑目蹲身，往里一跳，叫道：“都随我进来! 进来 !”那些猴有胆大的，都跳进去了; 胆小的，一个个伸头缩颈，抓耳挠 (n&aacute;o) 腮，大声叫喊，缠一会儿，也都进去了。跳过桥头，一个个抢盆夺碗，占灶争床，搬过来，移过去，正是猴性顽劣，再无一个宁时，只搬得力倦神疲方止。石猴端坐上面道：“列位呵，&lsquo;人而无信，不知其可&rsquo;。你们才说有本事进得来，出得去，不伤身体者，就拜他为王。我如今进来又出去，出去又进来，寻了这一个洞天与列位安眠稳睡，各享成家之福，何不拜我为王?”众猴听说，即拱伏无违。一个个序齿排班，朝上礼拜，都称“千岁大王”。自此，石猴高登王位，将“石”字隐了，遂称美猴王。【结束】</p>
</div>
</html>
18. 伸缩盒模型
⑴ 伸缩盒模型简介
⑵ 伸缩容器与伸缩项目
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color:
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
⑶ 主轴与侧轴
⑷ 主轴方向
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
/* flex-direction: row; */
/* 调整主轴方向：水平从右到左 */
/* flex-direction: row-reverse; */
/* 调整主轴方向：水平从上到下 */
/* flex-direction: column; */
/* 调整主轴方向：水平从下到上 */
flex-direction: column-reverse;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
⑸ 主轴换行方式
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 不换行 */
/* flex-wrap: nowrap; */
/* 主轴换行方式: 换行 */
/* flex-wrap: wrap; */
/* 主轴换行方式: 反向换行 */
flex-wrap: wrap-reverse;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
</div>
</body>
</html>
⑹ 主轴的对齐方式
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式：主轴的起始位置 */
/* justify-content: flex-start; */
/* 主轴的对齐方式：主轴的起始位置 */
/* justify-content: flex-end; */
/* 主轴的对齐方式：主轴的中间位置 */
/* justify-content: center; */
/* 主轴的对齐方式：项目均匀地分布在一行中，项目与项目之间的距离是项目距离边缘的二倍 */
/* justify-content: space-around; */
/* 主轴的对齐方式：项目均匀地分布在一行中，项目与项目之间的距离相等，项目距离边缘没有距离 */
/* justify-content: space-between; */
/* 主轴的对齐方式：项目均匀地分布在一行中 */
justify-content: space-evenly;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
⑺ 侧轴的对齐方式
1）单行的情况下
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式：主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式：侧轴的起始位置对齐 */
align-items: flex-start;
/* 侧轴的对齐方式：侧轴的结束位置对齐 */
/* align-items: flex-end; */
/* 侧轴的对齐方式：侧轴的中间位置对齐 */
/* align-items: center; */
/* 侧轴的对齐方式：侧轴的基线位置对齐 */
/* align-items: baseline; */
/* 侧轴的对齐方式：拉伸到整个父容器（前提：伸缩的项目不能给高度），默认 */
/* align-items: stretch; */
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
height: 300px;
font-size: 80px;
}
.inner3{
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1X</div>
<div class="inner inner2">2X</div>
<div class="inner inner3">3X</div>
</div>
</body>
</html>
2）多行的情况下
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 1000px;
height: 900px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式：主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式（多行）侧轴的起始位置对齐 */
align-content: flex-start;
/* 侧轴的对齐方式（多行）侧轴的结束位置对齐 */
/* align-content: flex-end; */
/* 侧轴的对齐方式（多行）侧轴的中间位置对齐 */
/* align-content: center; */
/* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的，且是边缘距离的 2 倍 */
/* align-content:space-around ; */
/* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的 */
/* align-content:space-evenly; */
/* 侧轴的对齐方式（多行）拉伸 默认 */
/* align-content:stretch ; */
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
height: 300px;
}
.inner3{
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
</div>
</body>
</html>
3）水平垂直居中的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 500px;
height: 500px;
background-color:
display: flex;
/* 方案一 */
/* justify-content: center;
align-items: center; */
}
.inner{
width: 100px;
height: 100px;
background-color: skyblue;
/* 方案二 */
margin: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
⑻ 伸缩盒模型_伸缩性
1）伸缩盒模型_伸
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式：主轴的起始位置 */
justify-content: flex-start;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
flex-grow: 1;
}
.inner2{
width: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
2）伸缩盒模型_缩
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 600px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 换行 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式：主轴的起始位置 */
justify-content: flex-start;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 1;
}
.inner2{
width: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
3）伸缩盒模型_flex 复合属性
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 600px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 换行 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式：主轴的起始位置 */
justify-content: flex-start;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/* 可以拉伸 */
/* flex-grow: 1; */
/* 可以压缩 */
/* flex-shrink: 1; */
/* 基准长度 */
/* flex-basis: 100px; */
/* 可以拉伸、可以压缩，不设置基准长度，可以简写为 flex:auto */
/* flex: 1 auto; */
/* flex: auto; */
/* 可以拉伸、可以压缩，设置基准长度为 0，可以简写为 flex:1 */
/* flex: 1 1 0; */
/* flex: 1; */
/* 不以拉伸、不可以压缩，不设置基准长度为 0，可以简写为 flex:none */
/* flex: 0 0 auto; */
/* flex: none; */
/* 不以拉伸、可以压缩，不设置基准长度为 0，可以简写为 flex:0 auto */
/* flex: 0 1 auto; */
flex: 0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
⑼ 伸缩盒模型_项目排序与单独对齐
1) 项目排序
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 600px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 换行 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式：主轴的起始位置 */
justify-content: flex-start;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/* 可以拉伸、可以压缩，设置基准长度为 0，可以简写为 flex:1 */
flex: 1 1 0;
}
.inner2{
order: -1;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>
2) 单独对齐
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
.outer{
width: 600px;
height: 600px;
background-color:
margin: 0 auto;
/* 伸缩盒模型相关属性 -- start */
/* 将该容器变成了伸缩容器 ( 开启了 flex 布局) */
display: flex;
/* 调整主轴方向：水平从左到右，默认 */
flex-direction: row;
/* 主轴换行方式: 换行 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式：主轴的起始位置 */
justify-content: flex-start;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/* 可以拉伸、可以压缩，设置基准长度为 0，可以简写为 flex:1 */
flex: 1 1 0;
}
.inner2{
align-self: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>
19.CSS3 响应式布局
⑴ 媒体查询
1) 媒体类型
https://developer.mozilla.org/zh-CN/docs/Web/css/@media
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style>
h1{
width: 600px;
height: 400px;
line-height: 400px;
margin: 0 auto;
background-image: linear-gradient(30deg,red,yellow,green);
text-align: center;
font-size: 60px;
color: white;
text-shadow: 0 0 10px black ;
}
/* 只有在打印机或者打印预览才应用的样式 */
@media print{
h1{
background: transparent;
}
}
/* 只有在屏幕上显示才应用的样式 */
@media screen {
h1{
font-family: '华文行楷';
}
}
/* 所有场合都应用的样式 */
@media all{
h1{
color: red;
}
}
</style>
</head>
<body>
<h1>柯基侦探微信公众号</h1>
</body>
</html>
2) 媒体特性
https://developer.mozilla.org/zh-CN/docs/Web/css/@media
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询</title>
<style>
*{
margin: 0;
padding: 0;
}
h1{
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
font-size: 100px;
}
/* 检测到视口的宽度为 800px 时，应用如下样式 */
@media (width:800px){
h1{
background-color: green;
}
}
/* 检测到视口的宽度小于等于 700px 时，应用如下样式 */
@media (max-width:700px){
h1{
background-color: skyblue;
}
}
/* 检测到视口的宽度大于等于 900px 时，应用如下样式 */
@media (min-width:900px){
h1{
background-color: skyblue;
}
}
</style>
</head>
<body>
<h1>柯基侦探微信公众号</h1>
</body>
</html>
3) 媒体运算符
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体运算符</title>
<style>
*{
margin: 0;
padding: 0;
}
h1{
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
font-size: 100px;
}
/* 且运算符 */
/* @media (min-width:700px) and (max-width:800px){
h1{
background-color: deeppink;
}
} */
/* 或运算符 */
/* @media (max-width:700px) or (min-width:800px){
h1{
background-color: deeppink;
}
} */
/* 非运算符 */
@media not (max-width:700px){
h1{
background-color: deeppink;
}
}
</style>
</head>
<body>
<h1>柯基侦探微信公众号</h1>
</body>
</html>
4) 常用阈值
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体运算符</title>
<style>
*{
margin: 0;
padding: 0;
}
h1{
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
font-size: 100px;
}
/* 超小屏幕 */
@media screen and (max-width:768px){
h1{
background-color: deeppink;
}
}
/* 中等屏幕 */
@media screen and (min-width:768px) and (max-width:992px){
h1{
background-color: deepskyblue;
}
}
/* 大屏幕 */
@media screen and (min-width:992px) and (max-width:1200px){
h1{
background-color: darkred;
}
}
/* 超大屏幕 */
@media screen and (min-width:1200px){
h1{
background-color: yellow;
}
}
</style>
</head>
<body>
<h1>柯基侦探微信公众号</h1>
</body>
</html>
20.BFC
⑴ 什么是 BFC
⑵ 开启了 BFC 能解决的问题
⑶ 如何开启 BCF
正文完
