目录
1.基础知识点
1.编码：将字符转换为二进制过程。
2.字符集：编码和解码采用的规则 其中utf-8是万国码。
3.乱码问题：如果编码和解码采用的字符集不同，就会出现乱码。
4.<html lang="en">是英文网站，<html lang="zh">是中文网站。
5.特殊符号要用html中实体，例如空格用 ,大于号用> ,小于号用< 。从W3school网站或菜鸟教程里找。
6.meta标签
7.将页面重新定向到另一个网站<meta http-equiv="refresh" content='3;url=https://blog.csdn.net/m0_58381610?type=blog'> 3是三秒后跳转到url的网址里。
8.独占一行的叫做块元素(block element)。不会独占一行的叫行内元素。
9.em标签语气强调，strong强调内容，blockquote长引用
显示结果：
<p></p>短引用标签，/br标签表示换行。
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素。
span行内元素，没有任何的语义，一般用于在网页中选中文字。
10.background-coor不能被继承。
11.em是根据元素的字体大小来计算的，1em=1font-size，em根据字体大小改变而改变。
rem是根据根元素html字体大小来计算。用html{ }改变根元素大小。
2.列表
有序列表：ol 无序列表：ul
定义列表：dl标签 dt表示定义内容 dd对内容进行解释说明 。
列表之间可互相嵌套。
3.target属性
用来指定超链接打开的位置。
可选值：_self 默认值 在当前页面中打开超链接。
_blank在一个新的页面中打开超链接。
4.超链接占位符
5.图片标签
例如：<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
6.内联框架
<iframe src=' '></iframe>
向当前页面引入一个其他页面
7.音视频播放
8.css外部样式表导入css:<link rel="stylesheet" href= >
9.span,div,p标签区别
在默认情况下，<span>元素不会导致换行，而<div>元素会导致换行，<p>元素则会产生一个段落，所以段落与段落之间默认有更大的间距。
部分代码：
<body>
<span>Tomcat</span><span>Jetty</span><span>Resin</span>
<br/>
<div>Tomcat</div><div>Jetty</div><div>Resin</div>
<p>Tomcat</p><p>Jetty</p><p>Resin</p>
</body>
结果显示：
10.选择器
元素选择器：元素{}
id选择器：#id属性值{} 不允许重复
类选择器：.class属性值{} 可以重复
伪类选择器： ：nth-child() 选中第n个子元素 是根据所有子元素进行排序
超链接的伪类：
伪元素：
CSS餐厅选择器练习题：
CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)
https://flukeout.github.io/#
11.选择器的权重
12.颜色单位：
1，rgb值 rgb（红色0-255，绿色0-255，蓝色0-255）
2，rgba 前三个值跟rgb一样，后一个值是不透明度，1是完全不透明，0是完全透明，.5是半透明。
3.十六进制的rgb值 如果两位重复可以简写 如#bbffaa -->#bfa
4.hsl（色相0-360，饱和度0%-100%，亮度0%-100%）
13.文档流
14.盒子模型：
内容区（content）:元素中所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height决定
width设置内容区宽度；
height设置内容区的高度。
边框（border）:
边框的宽度：border-width
使用边框但省略宽度的情况下默认值一般都是3个像素，border可以指定四个方向的边框宽度情况：
四个值：上 右 下 左
三个值：上 右左 下
一个值：上下左右
border-xxx-width 其中xxx可以是top rigth bottom left用来指定某一个边的宽度。
边框的颜色：border-color
border-color也可以用来指定四个边的边框，规则和border-width一样。
也可以省略不写，若省略则自动使用color的颜色值。
边框的样式：border-style
solid表示实线
dotted点状虚线
dashed虚线
double双线
border-style的默认值是none，表示没有边框
border简写属性，可以同时设置边框的所有相关样式，并且没有顺序要求。例如border:solid 10px orange;
除了border外还有四个border-xxx
border-top
border-right
border-bottom
border-left
内边距：
外边距：
水平方向的布局：
水平居中： margin:auto; 因为上下外边距默认为0 或者写为margin:0 auto;
垂直方向 使用overflow属性来设置父元素如何处理溢出的子元素
可选值：visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示
scroll生成两个滚动条，通过滚动条来查看完整的内容
auto根据需要生成滚动条 例如overflow:auto
overflow-x设置水平方向的滚动条，overflow-y设置垂直方向的滚动条。
垂直外边距的重叠（上下外边距才有塌陷，左右没有）
行内元素的盒模型：
行内元素不支持设置宽度和高度；
行内元素可以设置padding,border,margin，但垂直方向不会影响布局
display用来设置元素显示的类型
可选值：inline将元素设置为行内元素。
block将元素设置为块元素。
inline-block将元素设置为行内块元素，行内块既可以设置宽度和高度，又不会独占一行。
table将元素设置为一个表格。
none元素不在页面中显示。
visibility用来设置元素的显示状态
可选值：visible默认值，元素在页面中正常显示。
hidden元素在页面中隐藏不显示，但是依然占据页面位置。
15.重置样式表:
reset.css直接去除了浏览器的默认样式 在html里用<link rel="stylesheet" href="./css/normalize.css">
具体源代码在https://blog.csdn.net/m0_58381610/article/details/125364546?spm=1001.2014.3001.5502
16.盒子大小
17.轮廓阴影和圆角
轮廓：outline，用来设置元素的轮廓线，轮廓不会影响到可见框大小，用法和border一样。
阴影：box-shadow，用来设置元素的阴影效果，阴影不会影响页面布局
第一个值 水平偏移量 正值向右移动 负值向左移动
第二个值 垂直偏移量 正值向下移动 负值向上移动
第三个值 阴影的模糊半径 数值越大模糊效果越好
第四个值 阴影的颜色
圆角：border-radius，用来设置圆角 圆角设置的圆的半径的大小
可以分别指定四个角的圆角
四个值 左上 右上 右下 左下
三个值 左上 右上/左下 右下
两个值 左上/右下 右上/左下
也可border-top-left-radius,border-bottom-right-radius单独设置
18.浮动 半脱离文档流
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。
浮动元素不会盖住文字，所以可以用来设置文字环绕图片的效果。
行内元素脱离文档后会变成块元素。脱离文档后不需要再区分快和行内了。
clear清除浮动元素对当前元素的影响
19.简单布局
<head>设置头部</head>
<main>设置主体</main>
<footer>设置底部</footer>
20.高度塌陷和BFC
BFC：
解决方法：
常用方式为overflow:hidden开启其BFC（以使其可以包含浮动元素）并不是最完美的方法
21.clearfix解决高度塌陷和外边距重叠
（最完美）遇到这两个问题直接使用
.clearfix::before,
.clearfix::after{
content="";
display:table;
clear:both;
}
22.定位
定位是一种更加高级的布局手段，通过定位可以将定位摆放到页面的任意位置。
使用position属性来设置定位
可选值：
static:默认值，元素是静止的没有开启定位。
relative:开启元素的相对定位。
absolute:开启元素的绝对定位。
fixed：开启元素的固定定位。
sticky：开启元素的粘滞定位。
相对定位：
偏移量（offset） 当元素开启定位后，可以通过偏移量来设置元素的位置
top:定位元素和定位位置上边的距离
bottom
定位垂直方向通常二选一
left
right
定位水平方向的位置通常二选一
例：position:relative;
left:xxpx;
top:xxpx;
绝对定位： 会脱离文档流 并相对于其包含块进行定位（子绝父相）
包含块概念：就是元素用来计算和定位的一个框。
绝对定位的包含块：
当我们开启绝对定位后：
水平方向的布局等式需要添加left和bottom两个值，当发生过度约束时，如果九个值中没有auto则自动调整right的值以使等式满足
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
固定定位：类似于小广告
粘滞定位：
23.元素的层级 z-index
24.字体
字体族（字体的格式）
font-famlily 可以同时指定多个字体用","隔开，第一个无法使用使用第二个，以此类推。
问题：1.加载速度 2.版权
图标字体
在网页中经常使用一些图标，可以通过图片来引入图标，在使用图表时，我们可以通过将图标设置为字体，然后通过font-face的形式来使用图标，通过字体的形式使用图标。
font-awesome使用：下载解压后，将css和webfonts移动到项目中，将all.css引入到网页中，通过类名来使用图标字体
class="fas "
class="fab "
如果乱码，换fas或fab
通过伪元素来设置图标字体
例如
字体的简写属性
font可以设置字体相关的所有属性
语法:
font:字体大小/行高 字体族
行高可以省略不写 如果不写使用默认值
font-weight 字重 字体的加粗
可选值:
normal 默认值 不加粗
bold 加粗
100-900九个级别（没什么用）
font-style 字体的风格
normal正常的
italic斜体
25.行高line-height
可以将行高设置为和高度一样的值，使单行文字垂直居中。
行高经常还用来设置文字的行间距，行间距=行高-字体大小
26.文本样式
.文本的水平对齐和垂直对齐
text-align 文本的水平对齐
可选值：
left左侧对齐
right右侧对齐
center居中对齐
justify两端对齐
vertical-align设置元素垂直对齐的方式（图片对齐也可用这种方法）
可选值：
baseline默认值 基线对齐
top 顶部对齐
bottom底部对齐
middle 居中对齐
其他文本样式
text-decoration设置文本修饰
可选值：
none 什么都没有
underline 下划线
line-through 删除线
overline上划线
溢出的内容显示为省略号
27.背景
background-image ：url（）设置背景图片
background-repeat 用来设置背景的重复方式
可选值：repeat默认值，背景会沿x,y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
background-position:用来设置背景图片的位置
设置方式：通过top left right bottom center几个表示方向的词来设置
使用方位词时必须同时指定两个值，如果只写一个，另一个默认center
background-position:center center； 正中间
通过偏移量来指定图片的位置
水平方向和垂直方向
background-size 设置图片大小
第一个值表示宽度，第二个值表示高度
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
28.雪碧图
一次性地将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。
29.线性渐变和径向渐变
渐变可以同时制定多个颜色，多个颜色默认情况下平均分布。也可以手动指定简便的分布情况。
repeating-linear-gradient()可以平铺的线性渐变
30.表格
<table>标签，tr表示表格中的一行，有几个tr就有几行，在tr中使用td表示一个单元格，有几个td就有几个单元格。rowspan纵向的合并单元格，colspan横向的合并单元格。
长表格：
border-spacing:指定边框之间的距离
border-collapse：设置边框的合并
body子元素是thead,tbody,tfoot，而不是tr
默认情况下元素在td中居中垂直，可以通过vertical-align改变
表格布局：display:table-cell 不会独占一行但其他元素也上不去，但同样为表格布局的就可并列一行。
31.表单
表单：用来将本地的数据提交给远程的服务器
用form标签创建一个表单 部分格式如下：
<!-- form的属性：action 表单要提交的服务器地址 -->
<form action="target.html">
<!--
文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性
-->
文本框<input type="text" name="username">
<br><br>
<!--
密码框
-->
密码框<input type="password" name="password">
<br><br>
<!--
单选按钮
-像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
-checked可以将单选按钮设置为默认选中
-->
单选按钮<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b">
<br><br>
<!--
多选框
-->
多选框<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3">
<br><br>
<!-- 下拉列表
selected默认选中 -->
<select name="haha">
<option value="i">选项一</option>
<option value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
</form>
autocomplete="off"关闭自动补全 即无痕模式；
readonly 将表单项设置为只读，数据会提交；
disabled 将表单项设置为禁用，数据不会提交；
autofocus 设置表单项自动获取光标
32.过渡（transition）
transition可以同时设置所有属性，只有一个要求，如果写延迟，那么第一个时间是持续时间，第二个时间是延迟时间。
33.动画
设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行每一个步骤
@keyframes Xxx{
/*from表示动画的开始位置，也可以使用0% */
from{
/*例如用雪碧图制作动画*/
background-position: 0 0
}
/*添加一个进行到一半的关键帧*/
50%{
}
/*to动画的结束位置，也可以用100% */
to{
}
同时要在元素上加animation属性：
animation-name:要对当前元素生效的关键字的名字。
animation-duration:动画的执行时间。
animation-delay:动画的延时。
animation-iteration-count:动画的执行次数
可选值：
次数
infinite无限执行。
同样animation可以同时设置所有属性，只有一个要求，如果写延迟，那么第一个时间是持续时间，第二个时间是延迟时间。
34.变形transform
视距设置:body{
perspective:800px
}
旋转
要设置视距才有透视的效果
例如：transform:rotateX(45deg ) rotateZ(.5turn );
单位deg度数，turn
是否显示元素的背面：backface-visibility:hidden;
设置3D变形效果：transform-style:preserve-3d;
35.less
vscode中安装easy-less
变量的用法：
&表示外层的父元素
36.弹性盒
flex-direction:
flex-grow
flex-shrink:
flex-wrap:
justify-content
align-content:
align-items:
align-self:
用来覆盖当前属性的align-items值，单独设置个别元素样式
order:
决定弹性元素的排列顺序