HTML，全称叫超文本标记语言
1.HTML注释和字符实体
<!-- 注释的快捷键：ctrl+斜杠(带？号的) -->
描述 实体名称
空格  ；
< <
> >
& &
注意：(分号分号不能丢)
2.HTML常用标签
（1）HTML头部：
<head>
<!-- meta元素可以使用属性charset来设置当前HTML文档使用的字符集 -->
<meta charset="UTF-8">
<!-- meta元素也可以使用刷新功能，实现几秒后刷新或者跳转功能 -->
<!-- <meta http-equiv="refresh" content="5"> -->
<meta http-equiv="refresh" content="5;url=http://www.runoob.com">
<title>meta元素的学习</title> <!--该标签定义了不同文档的标题,是必不可少的。-->
<style>
/* style元素用来设置HTML的各种样式 */
</style>
<!-- 当样式的代码过多时，可以将样式代码放入一个独立的CSS文件中，使用link标签引入即可 -->
<link rel="stylesheet" href="CSS文件的地址">
<script src="js文件的地址">
// script标记用于书写交互代码的，如果交互代码过多，可以放入一个独立的js文件中，
// 也是使用script标签里的属性src引入过来即可
</script>
<!--<base>标签规定文档中所有相对 URL 的基准 URL(即父路径)。一个HTML文档中只能有一个 `<base>` 元素-->
<base href="">
<noscript>
Your browser does not support JavaScript!
</noscript>
</head>（2）HTML基础标签
<body>
<!---->
<!--标题标签-->
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<!--段落标签-->
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<!--换行标签-->
<br>
<!--水平线标签-->
<hr>
<!--图片标签-->
语法：<img src="" alt="" width="" height="">
<!-- 图片标签： img, 单标记. 不是块级元素，是内联元素(行内元素)。
作用：在网页上插入一张图片。
属性：
src: 用于书写图片的具体位置，即路径(网络上的一张图片，也可以是本地磁盘上的一张图片)
路径的写法： 有两种，相对路径和绝对路径
相对路径： 相对的是当前文件所在的文件夹。 当前文件夹，当前文件夹的表示方式 ./
注意：./可以省略
../ 返回上一层文件夹
绝对路径： 一般指的就是项目的根或者是磁盘的盘符开始写。
alt: 给搜索引擎使用的。图片的替代文字
width: 图片的宽
height： 图片的高
注意事项：如果只设置宽或高中的一个属性，图片会照比原图等比例的缩放-->
<!-- 注意：
如果使用了live server插件，那么绝对路径的根就不是磁盘盘符，而是当前VSCODE的工作空间
如果没有使用，就是盘符开始写。 -->
<!--超链接标签-->
语法：<a href="">内容或图片</a>
<!-- 超链接：a标记，双标记，超链接指的就是点击后跳往到另一个页面或者本页面的其他位置
属性：
href: 与图片的src相似， 就是书写目的地的路径
title: 鼠标悬停在超链接上时显示的内容
target: 去往目的地时，是使用新标签页，还是本页面
值1：_blank 新标签页打开
值2：_self 本标签页打开 默认值-->
<!-- 另外锚点链接的href的值，必须是#开头， 如果只有#表示跳转到当前页面的最顶端
如果是#配合id值，则是跳转到id值所在位置
因此目标位置，应该设置id值-->
<!--按钮标签-->
语法示范：<button type="button" onclick="alert('你好!')">点我提示你好（或者是图片）</button>
<!--
基本按钮标签： button， 双标记。 内容体里可以放入文字或者图片
建议： 添加type属性，指定属性值为button。-->
<!--文本格式化标签-->
一些常用的文本格式化标签：
1. <strong>加重语气的的文本
2. <b>加粗,bold的意思
3. <em>斜体效果，强调作用
4. <i>斜体效果itatic
5. <pre>预格式化文本，即内容保留空格和换行符
6. <small>更小的文本
7. <code>用于存放计算机代码
8. <bdo>改变文字显示的方向
9. <blockquote> 引用标签
10. <q> 双引号标签
11. <del> 删除文本
12. <ins>插入文本
13. <sub>下标文本
14. <sup>上标文本
<!--无序列表-->
语法：无序列表使用<ul>标签，列表项使用<li>标签
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
<!--有序列表-->
语法：有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ol>
<!--自定义列表-->
语法：自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以 <dd>
开始。
<dl>
<dt>长春</dt>
<dd>-- 吉林省的省会城市</dd>
<dt>哈尔滨</dt>
<dd>-- 黑龙江省的省会城市</dd>
</dl>
<!--注意事项：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
还可进行嵌套-->
<!--表格-->
<table border="1px" cellspacing="0px" cellpadding="5px" width="50%" align="center">
<!-- 表格：一般用于标记结构化的数据，有行，有列。每一列都有标题。
过去也用表格做页面的整体布局，但是现在不用了，使用div代替。
border: 边框的宽度，单位是像素
cellspacing :单元格之间的距离
cellpadding: 内容区距离单元格边框的距离
align: 表格整体的位置 center left right
width: 表格整体的宽度 可以是具体像素，也可以是屏幕的百分比-->
<caption></caption>
<!-- <caption>为整个表格定义主题 -->
<thead><!--表格头部部分(也称表格页眉)。-->
<tr> <!-- 一般只有一行表头 -->
<th></th> <!-- 定义每一列的标题，有加粗效果，与普通单元格区分开来，表头独有的。有几列就有几个th标签。 -->
</tr>
</thead>
<tbody><!--表格主体部分 -->
<tr><!-- 定义行 ，除了表头身体有几行就有几个tr标签-->
<td></td><!-- 定义单元格数据，有几列就有几个td标签 -->
</tr>
</tbody>
<tfoot><!-- 可用于在表格的底部定义摘要、统计信息等内容 -->
<tr>
<td></td>
</tr>
</tfoot>
</table>
<!--rowspan: 跨行属性，跨几行就写数字几，要根据情况删除多余的单元数据（竖着看）
colspan: 跨列属性，跨几列就写数字几，要根据情况删除多余的单元数据（横着看）-->
<!--表单-->
<form action="">
<fieldset> <!-- fieldset: 表单的整个边框
<legend>《!--边框上使用表单标题 --> </legend>
<label for="">（内容）</label> <!-- 用于设置文字标签,扩大点击域。 for属性用于关联某一个input，使用id值关联 -->
<input type="text" id="" name="" value=""><br><!-- 输入框元素，可以根据type属性的不同值，来定义不同的输入类型，比如
type属性：
text: 文本框， 该值为默认值，可以不写。
password: 密码框， 特点是使用*或者.来替换真实的密码
radio: 单选框 name的值需要相同，才能算作一组，具有单选效果 checked 默认选中
checkbox：复选框，name的值必须相同，才能算作一组。 checked 默认选中
file: 文件上传。
hidden: 隐藏域。 该类型可以用于隐藏一些不需要展示或者修改的信息
submit: 提交类型 ，提交整个表单里输入的所有数据，提交到服务器
id属性：
1. 为了关联label便签
2. id具有唯一标识的特点，不能重复。
name属性：用于定义向服务器提交的数据KeyValue对中的Key的名字
value属性：接受用户输入的内容（需要手动输入内容时不需要写出来） -->
<select name="" id="">
<option value="" selected></option><!--有几个选项就有几个option标签 -->
</select><!-- select: 下拉菜单元素
name属性: 用于定义提交到服务器的name的具体值。
option子元素： 用于定义下拉菜单的选项
option元素里的属性：
value属性: 用于定义提交到服务器的选项的具体值。
selected属性： 默认选中-->
<textarea name="" id="" rows="30" cols="50"></textarea> <!-- textarea: 文本域， 注意y与input的type="text"的区别
可以设置行数与列数。-->
</fieldset>
</form>
</body>3.<div>元素
<!--
div: 该元素，是块级元素，通常用于做页面的整体布局。 没有其他的特殊含义。
该元素可以作为其他任何元素的容器。
-->
4.<span>元素
<!--- HTML <span>元素是内联元素，可用作文本的容器，也就是用来包括
- <span>元素也没有特定的含义-->5.浏览器的自动纠正功能
- 标签写在了根元素的外面
- p元素中嵌套了块元素
- 根元素中出现了除了head和body以外的子元素（浏览器都会自动纠正）
6.音频标签
<!-- 音频标签：
audio： 用于加载音频文件，支持的格式mp3， wav， ogg
属性：
src: 用于书写音频文件的路径
controls: 提供用户可以操作的控件，比如播放，暂停
autoplay: 自动播放
loop: 循环播放
-->
语法：<audio src="" controls autoplay loop></audio>
<!-- 考虑浏览器的兼容性。有些音频格式不支持。
可以使用source子元素，让浏览器自上而下的寻找可以播放的音频文件，找到一个能播放的就不会再向下寻找。
-->
<audio controls>
<source src="./resource/audio.mp3">
<source src="./resource/audio.ogg">
</audio>7.视频标签
<!--
视频标签video： html5提供的新元素
属性：
src: 用于书写视频的路径
controls: 提供用户控件
autoplay: 自动播放
loop: 循环播放
width: 宽
height: 高
注意： 宽与高，只设置了其中一个，会等比例的缩放。
-->
语法：<video src="" controls loop autoplay loop width="" height=""></video>
<!-- 考虑浏览器兼容问题，有些格式不支持，那就可以使用source子元素，
让浏览器自上而下寻找可用视频文件 -->
<video controls width="400px">
<source src="./resource/flower.mp4">
<source src="./resource/flower.webm">
</video>8.iframe标签
<!-- iframe标签：用于将另外一个网页，嵌入当前网页中
属性：frameborder 表示是否显示边框，0表示不显示，1表示显示
可以使用width和height属性调整窗口的宽与高
-->
语法：<iframe src="" frameborder="0" width="" height="">不支持iframe标签</iframe>9.CSS
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
10.样式分类
（1）内联样式
就是在标签的style属性里直接写样式。
<!-- 内联样式： 就是将样式写在元素的开始标签里的style属性中
div:
宽度： 默认是撑满父元素的内容区宽度
高度： 默认自己的内容区的文字撑起来的高度
当然，可以自定义div的宽与高： width,height
扩展： 插件 live server的使用， 一个简易的服务器插件，端口号默认是5500
该插件可以使用浏览器打开HTML等文件，并且自动的实时刷新。
-->
例子：<div style="border:5px dotted red ;width: 500px; height: 300px; ">我是div1234567</div>（2）内部样式表
就是把样式写在head标签下的子元素style里，进行规整，给要写样式的每个元素取个名字。
<!-- 内部样式表： 是将样式写在head的子元素style里。
此时需要使用选择器来定位你要设置样式的元素
语法：
选择器{
属性:值;
......
}
-->
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表的写法</title>
<style>
#d1 {
background-color: blueviolet;
width: 500px;
height: 400px;
}
#d2 {
border: 2px double orange;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1">我是div1</div>
<div id="d2">我是div2</div>
</body>
</html>
（3）.外部样式
把样式统一写在一个.css文件里，在head标签下用它的子元素link标签引入。
<!--
外部样式表： 将样式单独封装到一个文件中，文件的扩展名是.css.
然后使用link标签，将样式文件引入到该HTML页面中
-->
<link rel="stylesheet" href="./css/my.css"> <!-- rel指定文件类型，href指定所需的css文件的位置 -->11.选择器
（1）标签选择器
注意：写样式时，直接写标签的名字{}。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
/* 标签选择器：也称元素选择*/
p {
font-size: 20px;
color: blue;
}
div {
/* border-inline-xxx: xxx可以是width,color,style. 设置左右边框的大小，颜色，线条
border-block-xxx: 设置上下边框的大小，颜色，线条。
常用的线条：
solid : 实线
dotted: 点虚线
double: 双线条 */
border-inline-width: 10px;
border-inline-color: red;
border-inline-style: double;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<p>段落1</p>
<div>div1</div>
<p>段落2</p>
<div>div2</div>
</body>
</html>
（2）类选择器
用.开始，即
.取的元素的名字{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器的学习</title>
<style>
/* 类选择器是以小圆点开头的样式选择器，小圆点后面是具体的class名称
*/
.c1 {
font-size: 20px;
color: orange;
}
.c2 {
font-size: 30px;
color: blue;
}
.c3 {
font-style: italic;
}
.c4 {
font-family: Arial, Helvetica, sans-serif;//字体家族
color: pink;
font-size: 50px;
}
</style>
</head>
<body>
<!-- 每个元素都有class属性。 不同的元素的class的值可以相同，表示同一类的元素
class的值可以有多个，使用空格隔开。
-->
<div class="c1">div1</div>
<p class="c1 c3">段落1</p>
<h1 class="c1">标题1</h1>
<p class="c4">段落2</p>
</body>
</html>
（3）id选择器
注意：是#开头
即：#取的元素的名字{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器的学习</title>
<style>
/* id选择器： 必须使用#作为开始符号，紧跟着id的具体值
id：相当于身份证号，因此id的值是不可以重复的，具有唯一性。
与class的区别:
1. 在属性上的区别：class的值可以重复。id的值不能重复
2. 在选择器上的区别：class选择器以.开头，id选择器以#开头
*/
#d1{
font-size: 50px;
}
#d2 {
border: 1px dotted red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<p id="d3">段落1</p>
</body>
</html>
（4）通配符选择器
*{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器的学习</title>
<style>
/* 通配符选择器，就是*选择器， 表示所有的元素都被选中，若有其他选择器，则其他选择器优先 */
#d1 {
width: 300px;
height: 100px;
background-color: aquamarine;
}
.c1 {
color: blue;
}
* {
font-size: 50px;
color: aquamarine;//如果有其他选择器，会优先选择其他选择器
}
</style>
</head>
<body>
<div id="d1" class="c1">div1</div>
<p class="c1">段落1</p>
<h1 class="c1">标题1</h1>
<p>我是</p>
</body>
</html>
（5）复合选择器
交集选择器：每个选择器互相挨着
并集选择器：每个选择器之间用逗号隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器的学习</title>
<style>
/* 交集选择器：
选择器1选择器2选择器3{.....}
上述多个选择器中共同选中的标签进行设置样式
注意：选择器之间没有任何东西隔开，紧挨着的，
交集选择器中如果有标签选择器，标签选择器必须放在前面
*/
.c1#p1 {
color: blue;
}
p.c1 {
font-size: 50px;
}
/* 并集选择器： 多个选择器的名字使用逗号隔开。 */
#s1,
.c4,
#d3 {
color: red;
}
</style>
</head>
<body>
<h1>交集选择器的测试</h1>
<div class="c1">div1</div>
<div class="c1">div</div>
<p class="c1" id="p1">段落1</p>
<p class="c2">段落2</p>
<hr>
<h1>并集选择器的测试</h1>
<span id="s1">用户名已经存在</span> <br>
<span class="c3">密码不正确</span>
<p class="c4">段落3</p>
<div id="d3">div3</div>
</body>
</html>
（6）关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器的学习</title>
<style>
/*
父子选择器： 通过父亲选中儿子。
语法：父>子 {}
后代选择器： 通过祖先选中后代
语法：祖先 后代{}
兄+弟选择器： 通过兄长选中紧邻的弟弟
语法：兄+弟{}
兄~弟选择器： 通过兄长选中符合条件的所有弟弟
语法：兄~弟{}
*/
/* 1.父子选择器的演示 */
div>span {
font-size: 40px;
color: blue;
}
/* 2.后代选择器的演示 */
/* div span{
color: orange;
} */
div p span {
color: orange;
}
/* 3.兄+弟选择器的演示 */
p+div {
background-color: aqua;
}
span+span {
font-style: italic;
}
/* 4.兄~弟选择器的演示 */
div~span {
color: pink;
}
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p
<span>我是p中的span</span>
</p>
<div>我是div中的div</div>
<span>我是div中的span1</span>
<span>我是div中的span2</span>
</div>
<span>我是div之外的span1</span>
<span>我是div之外的span2</span>
</body>
</html>1.父子选择器的演示
2.后代选择器的演示
3.兄+弟选择器的演示
4.兄~弟选择器的演示
（7）属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器的学习</title>
<style>
/* 属性选择器有五种：
[属性名]： 选中具有指定属性名的元素
[属性名=属性值]: 选中指定属性名等于某属性值的元素
[属性名^=指定值]: 选中指定属性名的属性值是以指定值开头的元素
[属性名$=指定值]: 选中指定属性名的属性值是以指定值结尾的元素
[属性名*=指定值]: 选中指定属性名的属性值包含指定值的元素
*/
[title] {
color: blue;
}
[title=a] {
color: orangered;
}
[title^=a] {
color: pink;
}
[title$=c] {
color: blueviolet;
}
[title*=b] {
color: teal;
}
</style>
</head>
<body>
<h1 title="a">《出塞》</h1>
<h2 title="ab">唐·王昌龄</h2>
<p title="abc">秦时明月汉时关，</p>
<p title="abab">万里长征人未还。</p>
<p title="c">但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</body>
</html>1.[属性名]
2.[属性名=属性值]
3. [属性名^=指定值]
4. [属性名$=指定值]
5.[属性名*=指定值]
最常见的是p::selection 对段落中被鼠标选中的文字设置样式（记住）
（8）伪类选择器
-
元素选择伪类选择器
常用的伪类选择器：
<body>
<div>
<p>段落1 </p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<div>
<p>端落落</p>
</div>
</div>
<div>
<p>段落5</p>
<p>段落6</p>
</div>
<div>
<p>段落7</p>
</div>
</body>
:first-child 第一个子元素被选中
/* 选择div的孩子中的第一个 */
div :first-child { //冒号前面尽量用空格
color: orange;
} 
:last-child 分支中的最后一个子元素被选中
/* 选择div的孩子中的最后一个 */
div :last-child {
color: red;
}
:nth-child(n) 第n个子元素被选中。 n的值可以从1到正无穷
2n表示偶数位的元素被选中，也可以使用单词even
2n+1表示奇数位的元素被选中，也可以使用单词odd
/* 选择div的孩子中的偶数位 2n或者even*/
div :nth-child(even) {
color: blue;
}
/* 选择div的孩子中的奇数位 2n+1或者odd */
div :nth-child(2n+1) {
font-size: 40px;
} 1.第偶数个子元素被选中
2.第奇数个子元素被选中
注意： 使用伪类选择器时，注意空格的问题。优先使用带空格的形式。
:first-of-type: 同类型中的第一个元素
/* 选中每个层级中的p段落的第一个元素。（ 注意，是不同层级的第一个） */
p:first-of-type {
color: red;
} 
:last-of-type： 同类型中的最后一个元素
/* 选中每个层级中的p段落的最后一个元素 （ 注意，是不同层级的最后一个）*/
p:last-of-type {
color: orange;
} 
:nth-of-type(n) 同类型中的第n个元素 可以使用2n/even表示偶数位，使用2n+1/odd表示奇数位
/* 选中每个层级中的p段落的奇数位元素 （注意，是不同层级的奇数位） */
p:nth-of-type(2n+1) {
color: blue;
}
偶数位同理
注意： 上述三个伪类选择器冒号前面，不要带空格。
-
否定伪类选择器
:not(其他选择器)： 注意，括号里不能传入复合选择器。
<body>
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
</body>
作用： 将其他选择器选中的元素排除。
<style>
/* 将所有的p里的文字都红，除了第一个和最后一个
注意： 如果带child关键字的伪类选择器，与其他的伪类选择器共同使用，冒号前面的空格不需要写。
*/
p:not(p:first-child):not(p:last-child) { // p的后面不能带空格，带空格不生效
color: red;
}
/*p:not(p:first-of-type):not(p:last-of-type) {
color: red;
}*/
</style>
-
a链接的伪类选择器
:link 超链接独有的选择器， 表示未访问前的状态
:visited 超链接独有的选择器， 表示访问过的状态
:hover 所有元素都可以使用的选择器，表示鼠标进入该元素时的状态（常见）
:active 所有元素都可以使用的选择器，表示鼠标左键点中该元素时的状态
<style>
/* 1.超链接访问前的颜色设置 */
a:link {
color: orangered; //没有访问时时橘色的
}
/* 2.超链接访问后的颜色设置，注意：网址必须真实存在，访问后才算真正的访问过 */
a:visited {
color: green; //访问成功后是绿色的
}
/* 3.鼠标进入后的状态设置 */
p:hover {
background-color: aqua;
}
/* 4.鼠标左键点击的状态设置 */
p:active {
font-size: 40px;
color: violet;
}
</style>1.
（9）伪元素选择器
伪元素：就是虚假的元素，并不存在，只是CSS为了对段落标记进行设置，提供的内置的选择器
<body>
<p>hello</p>
<p>world,我们要相信明天会更好。</p>
</body>
p::first-letter 对段落的首字符设置样式
p::first-letter {
font-size: 30px;
color: blue;
}
p::first-line 对段落的首行设置样式
/* p的紧邻着的弟弟p的首行 */
p+p::first-line {
background-color: pink;
}p::selection 对段落中被鼠标选中的文字设置样式
p::selection {
color: red;
background-color: teal;
}需要鼠标选中
p::before 对段落中的第一个字符的前面设置样式, 可以理解为向段落的第一个字符之前插入内容
p::before {
content: "你好";
color: red;
}
p::after 对段落中的最后一个字符的后面设置样式，可以理解为向段落的最后一个字符之后插入内容
p::after {
content: "$";
background-color: chartreuse;
}
before和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)
（10）选择器的权重
内联样式 >id选择器>类和伪类选择器>元素选择器>默认状态
（11）样式继承
CSS针对于样式继承的设计，是为了减少开发过程中的代码量，使子元素具有父元素的一些样式
父元素设计好的样式，子元素不需要再重复设置。
比如字体风格，大小，颜色等。 但是某些样式继承不了，比如背景，布局相关的样式。
（12）em单位
像素： - 屏幕（显示器）实际上是由一个一个的小点点构成的 - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰 - 所以同样的200px在不同的设备下显示效果不一样像素
百分比
- 也可以将属性值设置为相对于其父元素属性的百分比 - 设置百分比可以使子元素跟随父元素的改变而改变
- 是一个相对单位。 - em是相对于当前元素内的字体大小来计算的 - 1em = 1font-size - em会根据字体大小的改变而改变 - 如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px
rem
- rem是相对于根元素的字体大小来计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单位的讲解</title>
<style>
html {
font-size: 20px;
}
.outer {
width: 800px;
height: 400px;
background-color: orange;
/* 设置字体大小为16px */
/* font-size: 32px; */
/* 你好 原来设计的是32像素， 现在使用rem单位，因此相对的是根元素的20px来说的
所以，2rem=40px 那么长春相对的就是80px
*/
font-size: 2rem;
}
.inner {
width: 50%;
height: 50%;
background-color: rgb(0, 38, 255);
/* 设置字体大小为32px */
font-size: 32px;
}
div div:last-child {
/* 由于默认是32px,因为样式的继承。 2em=2个32px 因此是64px */
font-size: 2em;
/* 因为本元素里的字体大小是2em，真实像素是64px.
当设计边框的宽度时，使用了1em,相对的是本元素的字体大小，因此1em=64px */
/* border: 1em solid red; */
/* 颜色的单位 rgb*/
border: 1em solid rgba(25, 173, 149, .5);
}
</style>
</head>
<body>
高圆圆
<div class="outer"> 你好
<div class="inner">中国</div>
<div>长春</div>
</div>
</body>
</html>12.盒子模型
（1）盒子模型 ，各个部分以及它的属性设置。
常用的属性：
对于内容区（content）：width，height，background-color
对于内边距（padding）：给padding添加一个值，即上下左右都一样。
对于边框（border）： border：（宽度）（样式） （颜色)；
常用边框样式：- dotted: 点虚线
- solid: 实线
- double 双线条
- dashed 虚线
对于外边距(margin）： 即 margin：0 auto；
（2）水平和垂直方向布局
在水平方向上，元素设置的左右边框的宽，左右内边距的宽，左右外边距的宽和它内容去的宽要和父元素的内容区的宽相等。
在垂直方向上，如果有溢出（就是子元素的高比父元素的高要大），可以在父元素里使用overflow属性，来设置以下值。
overflow:
visible: 可见，默认值
hidden: 隐藏(溢出部分)
scroll: 添加滚动条（有上下和左右的滚动条）
auto: 根据是否溢出选择性的自动添加滚动条（溢出自动添加）
（3）外边距的折叠
兄弟元素的折叠可按情况自行自行设定。
父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理 （只需要父元素添加border属性）
父元素没有设置边时（父元素的父元素设置了边框），子元素添加上面的外边距时，父元素会随着子元素变动。
1.给父元素添加上border后，父元素就上去了。即问题解决。
代码参考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#outer {
border: 1px solid red;
width: 800px;
height: 500px;
margin: 0 auto;
}
#d1 {
border: 1px solid red;
width: 300px;
height: 300px;
background-color: aqua;
}
#d2 {
border: 5px solid blue;
width: 200px;
height: 200px;
}
#d2 {
margin-top: 50px;
}
</style>
</head>
<body>
<div id="outer">
<div id="d1">
<div id="d2">
1
</div>
</div>
</div>
</body>
</html>2. 还有一种解决办法：
就是给父元素加一个伪元素，即在上述代码中加入如下代码
/*table值，会将外边距隔开*/
#d1::before {
content: "";
display: table;
} 3.还有一种方式：就是在父元素的class属性上添加clearfix
注意： clearfix是css中内置的class的值, 不能随便起名，必须用这个词。
.clearfix{
content: "";
display: table;
clear: both;
}(4)行内元素盒模型
行内元素不支持设置宽度和高度， 宽和高是被内容数据撑起来的。
但是可以设置左右的padding，border，margin
如果想要行内元素的宽，高或者垂直方向上的样式生效，可以使用display属性将行内元素的样式转为块元素的样式进行显示设置。
display属性的可选值如下：
-
none 隐藏， 不再占用原有的空间。
-
block 变成块元素的样式显示。（注意，并不是内联元素变成了块元素）
-
inline 变成行内元素的样式显示
-
inline-block 变成行内的块元素，同时具有了内联和块元素的样式特点
（5）默认样式
body里的元素并不是紧贴左侧和顶部，因为body的margin有个默认值8px。再比如，p元素的上下外边距默认是1em等。
可以借助第三方的css样表，进行重置样式。比如
-
reset.css： 该文件的作用，是取消几乎所有元素的默认样式
-
normalize.css: 该文件的作用，是设置一些通常的尺寸。
13.元素的浮动
（1）文档流层
所有的元素，默认都是布局在文档流层的。
文档流层里的元素
- 块元素
1. 块元素是垂直排列，自上而下。单占一行
2. 块元素的宽，默认状态下是要撑满父元素的，也就是由父元素决定
3. 块元素的高，默认状态下是内容区的数据所占大小
- 行内元素
1. 行内元素的宽和高是由内部的文字或元素决定的。
2. 行内元素的排列，从左到右，当在一行装不下时，会自动换行，继续从左到右(与书写顺序一致)
（2）浮动的简介
通过浮动可以使一个元素向其父元素的左侧或右侧飘起来
使用 float 属性来设置于元素的浮动
可选值：
none 默认值 ，元素不浮动
left 元素向左浮动
right 元素向右浮动
注意：1.元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
2.浮动元素默认不会从父元素中移出
3.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
4.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移（即哥哥元素没有设置浮动，那么弟弟设置浮动也不会向上移动）
简单总结：
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局 5.浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
（3）浮动的其他特点
1. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
比如： 哥哥元素设置浮动
弟弟元素里的文字会自动环绕哥哥，而不会被哥哥元素覆盖
2.也可以说：脱离文档流以后，不需要再区分块和行内了
14.网格的简单布局
（1）高度塌陷问题
高度塌陷的问题：
当父元素没有指定高度，而是由子元素撑起来的。当我们有这种需求时，如果子元素设置了浮动，那么就会出现父元素高度塌陷的问题。
子元素设置了浮动后
解决办法： 使用父元素的伪元素来设置相关属性，然后解决高度塌陷的问题。
该方式是最优的解决方式。
/* 使用第四种方式，解决高度坍塌问题 */
#outer::after {
/* 在父元素的内容区的最后插入一个空字符串，因为有文字，应该会在环绕浮动的子元素周围 */
content: "";
/* 将不存在的这个伪元素设置成具有块元素的样式 */
display: block;
/* 清除伪元素两侧的浮动效果 */
clear: both;
}
问题解决：
还有一种解决办法，就是在父元素的class属性上添加clearfix
注意： clearfix是css中内置的class的值, 不能随便起名，必须用这个词。
.clearfix{
content: "";
display: table;
clear: both;
}（2） clearfix
clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
在父元素的class属性上，添加clearfix.
在style中设置
.clearfix{
content:"";
display: table;
clear: both;
}
注意： clearfix是css中内置的class的值, 不能随便起名，必须用这个词。
15.元素定位
（1）定位的简介
定位（position）
- 定位是一种更加高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 使用position属性来设置定位
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
（2）相对定位
- 相对定位：
- 当元素的position属性值设置为relative时则开启了元素的相对定位
- 相对定位的特点：
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块，行内还是行内
偏移量： - top值越大，定位元素越向下移动
- bottom值越大，定位元素越向上移动 （两者通常只选其一）
-left 定位元素和定位位置的左侧距离
- right定位元素和定位位置的右侧距离（两者通常只选其一）
（3）绝对定位
绝对定位： 当属性position的值为absolute时，就开启的绝对定位
1. 如果设置了绝对定位，不改变偏移量，则该元素不会移动
2. 设置了绝对定位的元素会脱离文档流，如果下面的兄弟没有设置浮动或者定位则向上移动
3. 设置了绝对定位的元素的位置是相对于所在的包含块。
4. 设置了绝对定位的元素的性质会发生改变。 行内元素变成块元素， 此时所有的元素宽和高默认都是内容撑开的。
5. 设置了绝对定位的元素提高了层级。
包含块：
如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。
如果所有的祖先块元素都没有设置定位，那么就是相对html这个根元素来说的。
建议：包含块尽量设置相对定位，因为相对定位不会脱离文档流。
简而言之：最近的设置了相对定位的祖先块称之为包含块。
HTML：是所有元素的初始包含块。
(4)固定定位
固定定位：
当position的值设置为fixed时，就是开启了该元素的固定定位
固定定位的特点：
1. 固定定位也是一种绝对定位，特点和普通的绝对定位差不多
2. 固定定位的位置是相对于当前浏览器的视口(viewport)来说的
因此，固定定位的元素不会随着滚动条去滚动。
比较适合广告位的设置。
（5）粘滞定位
粘滞定位：
当position的值为sticky时，则开启的元素的粘滞定位
粘滞定位的特点：
1. 粘滞定位的特点和相对定位的特点差不多。
2. 粘滞定位的不同之处，在于当到达某一个固定位置时，粘住不动。
注意：1.当和它紧紧相邻的弟弟元素的width的值过大时，粘滞定位就不生效了
2.当它相邻的弟弟元素开启了浮动，那么它的粘滞定位效果失效
3. 注意：粘滞定位的位置不能超出父元素的范围，否则粘滞效果消失。
设置偏移量： 偏移量是相对视口的设置，当元素到达指定位置时，就黏住不动了
（6）元素的层级：z-index属性
对于开启了定位元素，可以通过z-index属性来指定元素的层级
兄弟元素：
z-index的值越大，层级越高
1.如果开启了定位后，相邻的兄弟元素发生了重叠，那么层级大的会覆盖住层级小的，如果层级相同的话，则是弟弟元素优先显示。
2.如果哥哥元素没有开启定位，弟弟元素开启了定位，那么哥哥元素的层级再大也不会覆盖住弟弟元素。
总之层级是对于开启了定位元素来说的
父子元素：
父元素的z-index的值再大，也不会覆盖子元素(也不会高过子元素的层级)
没有添加任何定位：
为2、3开启定位：1没有开启定位，1的层级再大都不会发生变化
为1开启定位，并且把1的层级调大，比2的大，显示如下效果。
16.动画
（1）过度： transition属性
动画的过度是鼠标进入后改变大小
/* 设置过渡 */
div:hover {
width: 400px;
height: 400px;
/* transition-property: width, height;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 2s; */
/* */
transition: width, height, linear, 3s 2s;
}动画的过渡：
transition-property: 指定要过渡的属性名称，多个属性使用逗号隔开
transition-duration: 整个过渡过程所需要的时间，单位s/ms
transition-timing-function: 过渡函数，即如何运动，可选值
ease : 先加速再减速
linear： 匀速
ease-in： 加速
ease-out： 减速
ease-in-out： 先加速再减速
可以使用transition 属性来设置多个属性的值，减少代码量，提高可读性
语法：transition: 属性,属性,运动方式, 持续时间 延迟时间;
该设置是当鼠标进入后宽变成400px，高也变成400px，迅速过度，持续3s ，延迟2s。
/* 设置过渡 */
div:hover {
width: 400px;
height: 400px;
/* transition-property: width, height;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 2s; */
/* */
transition: width, height, linear, 3s 2s;
}（2）动画：animation属性
由于动画设置的是偏移量的改变，因此需要开启该元素的相对定位
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
@keyframes test{
/* from表示动画的开始位置 也可以使用 0% */
from{
margin-left: 0;
background-color: orange;
}
/* to动画的结束位置 也可以使用100%*/
to{
background-color: red;
margin-left: 700px;
}
}
只用一个属性书写时的语法：
animation: name duration timing-function delay iteration-count direction fill-mode;
对要进行动画的元素惊醒设置
#inner {
width: 100px;
height: 100px;
background-color: orange;
/* 由于动画设置的是偏移量的改变，因此需要开启该元素的相对定位 */
position: relative;
/* 设置动画的各个属性 */
animation-name: run;
/* 用于指定要使用的关键字的名字*/
animation-duration: 3s;
/* 动画执行的整个过程需要的时间*/
animation-timing-function: ease-in;
/* 动画如何运行*/
animation-delay: 2s;
/* 动画的延迟时间*/
animation-iteration-count: 2;
/* 动画从初始位置到结束为止执行的次数*/
animation-direction: normal;
/* 动画的执行方向 normal正向运动（from到to） reverser反向运动（to到from）
alternate来回运动（执行多次）（from到to，to到from）
alternate-reverse反向来回运动（执行多次）（to到from，from到to）*/
animation-fill-mode: forwards;
/* 动画的填充(结束后停止的位置) forwards（停在结束位置）,backwards（停在开始位置）
,both none（结合了forwards 和 backwards）*/
/* 使用一个属性animation，来设置上述多个属性的值 */
/* 关键帧 运动需要的时间 运动速度曲线 延迟 次数 运行方向 运动的结束位置 */
/* animation: run 10s linear 2s infinite normal forwards; */
animation: name duration timing-function delay iteration-count direction fill-mode;
}
/* 设置关键帧 0%相当于from 100%相当于to 百分比可以是任意0~100之间任意的整数*/
@keyframes run {
/* from表示动画的开始位置 也可以使用 0% */
from {
margin-left: 0;
background-color: rgb(0, 145, 255);
}
/* to动画的结束位置 也可以使用100%*/
to {
background-color: red;
margin-left: 700px;
}
/*用百分比来规定运动的方向*/
/* 0% {
left: 0px;
top: 0px;
}
25% {
left: 700px;
top: 0px;
}
50% {
left: 700px;
top: 400px;
}
75% {
left: 0px;
top: 400px;
}
100% {
left: 0px;
top: 0px;
} */
}
（3）动画的变形
是鼠标进入后平移或者旋转，缩放（整体的缩放，与过度不同是，缩放是改变人脸到屏幕的距离，过度是鼠标进入后改变了设置的相应属性）
动画的变形:即3D转换, 属性是transform
对应的属性值有三类：
第一类： 平移
translateX(像素)： 即沿着X轴平移，正值向右平移，负值向左平移
translateY(像素)： 即沿着Y轴平移，正值向下平移，负值向上平移
translateZ(像素)： 即沿着Z轴平移，正值突脸，负值远离脸，需要开启视距(脸与屏幕的距离)
第二类: 旋转
rotateX(度数): 以X轴为轴心，进行旋转
rotateY(度数): 以Y轴为轴心，进行旋转
rotateZ(度数): 以Z轴为轴心，进行旋转
第三类： 缩放
scaleX(倍数): 水平方向(即X轴方向)缩放
scaleY(倍数): 垂直方向缩放
scaleZ(倍数): Z轴方向缩放
scale(倍数) 相当于scaleX和scaleY的合并。
设置的是鼠标进入后的效果：
#d1:hover {
transition: 2s;
/* 沿着X轴平移，如果不设置过渡，则是瞬间完成，想要看效果，可以设置过渡时间，即执行这个过程需要的时间 */
/* transform: translateX(100px) translateY(200px); */
/* 沿着Z轴平移，需要使用 perspective(像素) 函数，先开启视距 ，否则没有效果*/
/* transform: perspective(500px) translateZ(200px); */
/* transform: translateX(100px) translateY(200px) perspective(500px) translateZ(200px); */
/* 测试旋转 */
/* transform: rotateX(90deg); */
/* transform: rotateY(180deg); */
/* transform: rotateZ(90deg); */
/* transform: rotateX(-90deg) rotateY(0.5turn) rotateZ(180deg); */
/* 测试缩放 */
/* transform: scaleX(2); */
/* transform: scaleY(2); */
/* 上下都拉长，在设置Y轴方向的缩放可以看的更清晰 */
transform: scaleX(2) scaleY(0.5) scaleZ(2);
/* transform: scale(2); */
}
扫一扫
2744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
