（说明：该文档中的内容为平常积累与其他博客和视频中积累的内容，如果有错误，还请指出，看到后会进行修改）
html5支持标签快速查询
www.html5star.com/manual/html…
CSS属性兼容性查询
vscode快速生成代码：
（按下鼠标中键拖动可批量选中代码）
格式：
(h"]*5>{$个内容})*2
相当于
1个内容
2个内容
3个内容
4个内容
5个内容
1个内容
2个内容
3个内容
4个内容
5个内容
乱数假文(vscode)
快捷用法：Lorem单词数
例如：
Lorem20
结果：
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus vitae repudiandae commodi blanditiis ad ut fugiat sequi eius neque soluta!
取消缩进
shift+Tab
html实体字符
1) &单词
例如：
小于: <
大于：>
空格：
版权：©
&符号：&
2) &#数字（不常用）
map元素
www.w3school.com.cn/tags/tag\_m…
左上角为原点，水平方向为x，垂直方向为y
(可以理解为：类似于canvas的使用方法)
figure元素
figure元素是一种元素的组合，可带有标题（可选）。figure标签用来表示 网站制作 页面上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。
例如：
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
音视频格式兼容：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
列表元素:
有序列表：
ol>li
无序列表：
ul>li
定义列表：
dl>dt (dt:标题)
dl>dd (dd:术语描述）
容器元素
header：页头
footer：页脚
article：通常表示整篇文章
section：文章章节
aside：侧边栏
nav：导航
元素包含关系
块级元素可以包含行级元素，行级元素不可包含块级元素
例如：
h元素（标签）中不可包含p元素（标签）
h元素（标签）中不可包含div元素（标签）
字体
字体分为衬线字体和非衬线字体
选择器
元素选择器：直接是元素（标签）的名字
（PS：一般情况下不建议常用，因为后期如果界面改动较大时，改起来会不太方便）
id选择器：#id
类选择器：.class
通配符选择器：*
属性选择器：[属性值=值]
伪类选择器：例如： :hover, :link
ps:{
一般顺序为：
1) link（未访问状态），
2) visited (访问过后的状态)
3) hover (鼠标悬停状态)
4) active (激活状态,鼠标按下但未松开时的状态)
}
伪元素选择器：例如： ::before，::after
选择器组合：
1) 包含选择器： 空格 (例如：#header p (id为header下p元素))
2) 子元素选择器：> (例如：div > span)
3) 相邻选择器：+（例如：.red+li (class为red且下一个为li的元素)）
4) 兄弟元素选择器：~ (例如：.red+li (class为red且下一个为li的元素的兄弟元素(该元素之后)))
5) 并列：逗号（例如：.red, .content）
层叠
1. 重要性：（从高到低）
1）!important (尽量不用)
2) style中的普通样式（包含CSS文件与style属性中的样式）
3) 浏览器默认样式
2. 特殊性：
看选择器：选择器选中越窄，越特殊
具体规则：通过选择器，计算一个四位数（256进制，每255进1,从0开始）
1) 第一位：如果样式为 内联样式 ，计数器+1 (例如：html文件中的
2) 第二位：所有id选择器数量 (例如：css文件中的 #content{background-color:red},则该background-color:red的计数器第二位为1)
3) 第三位：所有类选择器，属性选择器，伪类选择器数量(例如：.class、[]、:class)
4) 第四位：所有元素选择器，伪元素选择器的数量(例如：div、::after)
3.比较源次序
代码书写靠后的胜出（个人比较常用）
继承
css中的大部分字体属性、文字内容属性会从父元素继承到子元素中
所以：一般设置某html页字体，选中body，然后，在body中设置字体信息即可
属性值得计算过程
1） 确定声明值
没有冲突的声明，直接作为css属性
2）层叠冲突
对样式表存在冲突的声明，使用层叠规则，确定css的属性值
3）使用继承
如果仍然还没有值，则对可以使用继承的值使用继承，继承父元素的值
4) 使用默认值
如果还没有值，则使用默认值
两个特殊的css值
值为父元素的值： inherit （例如：color:inherit）
初始值：initial (例如：color:initial)
行盒和块盒
1) 行盒： disaplay:inline
- 块盒：display:block
3) 行内块：display:inline-block
行盒的盒模型
显著特点
1）盒子沿着内容延伸
2) 行盒不能设置宽高
3) 内边距（padding）水平方向有效，垂直方向仅会影响背景，不会实际占据空间
4) 边框（border）水平方向有效，垂直方向不会实际占据空间
5) 填充 (margin) 水平方向有效，垂直方向不会实际占据空间
行内块的盒模型
1） 不独占一行
2）盒模型中的所有尺寸都有效
常规流布局
又名：常规流，文档流，普通文档流，常规文档流
上下边距的合并
两个常规流块盒，上下外边距相邻，会进行合并
详情请见：（BFC原理）zhuanlan.zhihu.com/p/25321647·
浮动（float:兼容性高）(float的大部分功能flex可以替代)
排列
1）left:左浮动，元素靠上靠左
2）right:右浮动，元素靠上靠右
3）默认：none
4）浮动盒子在包含快中排列时，会避开常规流盒子
5）常规流盒子在排列式，无视浮动盒子
- 外边距合并不会发生
基本特点
1) 当一个元素浮动后，元素必定为块盒
2）浮动元素的包含快，盒常规流一样，为父元素的内容
盒子尺寸
1）宽度为auto时，表示适应内容宽度
2) 高度为auto是，与常规流一致，适应内容高度
3）margin为auto时，为0
4）行盒在排列时，会避开浮动盒子
5) 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字(该行叫做匿名行盒)
高度坍塌
1）高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动
2) 清除浮动：css属性：clear
- 默认：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除右浮动，该元素必须出现在前面所有浮动盒子的下方
3）不使用清除浮动，解决高度坍塌问题：
在浮动的父元素上添加属性：overflow: hidden;
