# HTML手册
## 标题标签
```
h1~h6
文字加粗
字号逐渐减小
独占一行
```
## 段落标签
```
p
独占一行
段落之间存在间隙
```
## 换行标签
```
br
```
## 水平线标签
```
hr
```
## 文本格式化标签
```
strong 加粗
em 倾斜
ins 下划线
del 删除线
```
## 图像标签
```
img
属性：
src 图片url
alt 替换文本
title 鼠标悬浮在图片上提示文本
width 图片高度
height 图片高度
```
## 超链接
```
a
属性：
href 跳转地址
target="_blank" 新窗口打开页面
```
## 音频标签
```
audio
属性：
src 音频URL
controls 显示视频控制面板
loop 循环播放
autoplay 自动播放
```
## 视频标签
```
video
属性：
src 视频url
controls 显示视频控制面板
muted 静音播放
loop 循环播放
autoplay 自动播放
```
## 列表标签
```
ul 无序列表
ol 有序列表
li 列表项 能放任何东西
dl 定义列表
dt 列表标题
dd 列表项
```
## 表格标签
```
table 表格
tr 行
th 头
td 列
```
## 合并表格
```
rowspan 行跨几行
colspan 列跨几行
```
## 表单
```
form
```
## 输入标签
```
input
属性：
type
text 文本框
password 密码框
radio 单选框
name 同组中只能选一个
checked 默认选中
checkbox 多选框
file 上传文件
multiple 多选文件
placeholder 提示信息
```
## 下拉菜单
```
select 下拉菜单整体
option 每一项
selected 默认选中
```
## 文本域
```
textarea
```
## 标签标签
```
label
for id 绑定id增大选中范围
```
## 按钮标签
```
button
type
submit 提交按钮提交数据到后台
reset 重置按钮
button 普通按钮没有功能
```
## 语义标签
```
div 块级标签
span 行内标签
```
# CSS手册
## 标签选择器
```
标签名 {
}
```
## 类选择器
```
.类名 {
}
```
## id选择器
```
#id名 {
}
```
## 通配符选择器
```
* {
}
```
## 后代选择器
```
div span {
选择所有后代
}
```
## 子代选择器
```
div > span {
只选择一个子代
}
```
## 交集选择器
```
p.box {
选择带有类名为box的p标签
}
```
## 鼠标悬停选择器
```
a:hover {
鼠标悬停
}
```
## 超链接访问前选择器
```
a:link {
超链接访问前
}
```
## 超链接访问后选择器
```
a:visited {
超链接访问后
}
```
## 超链接点击时选择器
```
a:active {
超链接点击时
}
```
## 查找第一个元素选择器
```
标签:first-child
```
## 查找最后一个元素选择器
```
标签:last-child
```
## 查找第N个元素选择器
```
标签:nth-child(N) n从0开始
2n 偶数
2n+1 奇数
```
## 添加内容选择器
```
标签::before {
content : "内容"
}
```
```
标签::after {
content : "内容"
}
```
## 继承性
```
子级默认继承父级的文字控制属性
```
## 层叠性
```
相同的属性后面覆盖前面的
不同的属性会叠加
```
## 优先级
```
直接看vscode 前面的越大越优先（id、类、标签）
```
## 盒子宽度
```
width 宽度
```
## 盒子高度
```
height 高度
```
## 内边距
```
padding 内边距
```
## 外边距
```
margin
```
## 边框线
```
border 宽度 线类型 颜色
solid 实线
dashed 虚线
dotted 点线
```
## 盒子尺寸
```
box-sizing
border-box 内减，不会撑大盒子尺寸
```
## 盒子溢出
```
overflow
hidden 溢出隐藏
scroll 溢出滚动，无论溢出与否都显示滚动条
auto 溢出才滚动
```
## 外边距合并
```
垂直排列的兄弟，上下margin会合并，取最大的值生效
```
## 外边距塌陷
```
父子级标签，子级添加外边距会被父亲抢走
解决方式：
1、取消子级margin，设置父亲padding
2、父级设置overflow: hidden
3、父级设置border-top
```
## 行内元素内外边距
```
行内元素添加margin、padding 无法改变元素垂直
解决方式：
1、给行内元素添加line-height 改变垂直位置
```
## 圆角盒子
```
border-radius
数字+px
```
## 阴影盒子
```
box-shadow
```
## 文字大小
```
font-size 文字大小px，默认16px
```
## 文字粗细
```
font-weight
400 正常
700 加粗
```
## 字体倾斜
```
font-style
normal 正常
italic 倾斜
```
## 文本行高
```
line-height
等于盒子高度的时候单行文字会在盒子里垂直居中
```
## 字体族
```
font-family
字体名 设置字体样式
```
## 文本缩进
```
text-indent
?em 缩进几个字符
```
## 文本水平对齐
```
text-align
left 左对齐
center 居中对齐
right 右对齐
```
## 文本修饰线
```
text-decoration
none 无效果
underline 下划线
line-through 删除线
overline 上划线
```
## 文字颜色
```
color
rgba（r,g,b,a）
```
## 背景色
```
background-color
```
## 背景图
```
background-image url()
```
## 背景图平铺方式
```
background-repeat
no-repeat 不平铺
repeat 平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
```
## 背景图位置
```
background-position
left 左侧
right 右侧
center 居中
top 顶部
bottom 底部
```
## 背景图缩放
```
background-size
cover 等比例缩放背景图完全覆盖背景区、可能背景图片部分看不见
contain 等比例缩放背景图片以完全装入背景区，可能部分区域空白
```
## 背景图固定
```
background-attachment
fixed 固定
```
## 显示模式
```
display
block
独占一行
宽度默认是父级的100%
添加宽高属性生效
lnline-block
一行可显示多个
设置宽高属性不生效
宽高尺寸由内容撑开
inline
一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开
```
## 浮动
```
float 让块元素水平排列
left 左对齐
right 右对齐
浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占标准流位置
如果父级没有高度，子级无法撑开父亲高度
```
## 清除浮动
```
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
```
## Flex组成
```
设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸
组成部分：
弹性容器
弹性盒子
主轴：默认在水平方向
侧州：默认在垂直方向
```
## 创建flex容器
```
display: flex；
```
## flex主轴对齐方式
```
justify-content
属性：
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子之间
space-around 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子两侧
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
```
## flex侧轴对齐方式
```
align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式
align-self 单独控制某个弹性盒子的侧轴对齐方式
属性：
stretch 弹性盒子沿测轴线被拉伸至铺满容器
center 弹性盒子沿测轴居中排列
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
```
## flex主轴方向
```
flex-direction 主轴默认在水平方向，侧轴默认在垂直方向
属性：
row 水平方向，从左向右
column 垂直方向，从上到下
row-reverse 水平方向，从右向左
column-reverse 垂直方向，从下向上
```
## flex弹性伸缩比
```
flex 控制弹性盒子的主轴方向的尺寸 整数数字，占用父级剩余尺寸份数
```
## flex弹性盒子换行
```
flex-wrap 弹性盒子可以自动挤压或拉伸，默认情况在，所有弹性盒子都在一行显示
属性：
wrap 换行
nowrap 不换行
```
## flex行对齐方式
```
align-content
属性：
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子之间
space-around 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子两侧
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
```
## 相对定位
```
position: relative 设置盒子的位置
不脱标，占用自己原来的位置
left
right
top
bottom
值可以写50%
需要加transform:translate(-50%,-50%)
```
## 绝对定位
```
position: absolute
脱标，不占位
显示模式具备行内块特点
设置偏移则相对最近的已经定位的祖先元素改变位置，所以子绝父相
```
## 挪动自己大小的一半
```
transform:translate(-50%,-50%)
```
## 固定定位
```
position：fixed 元素的位置在网页滚动时不会改变
脱标，不占位
显示模式具备行内块特点
```
## 堆叠层级
```
z-index 按照标签书写位置，后来者居上，属性值为数字，取值越大，层级越高
```
## 行内块垂直对齐方式
```
vertical-align
bottom
top
middle
```
## 过渡
```
transition给一个元素在不同状态之间切换的时候增加过渡效果
加到原属性
属性值：
过渡的属性（可以是all） 花费的时间
```
## 透明度
```
opacity 设置整个元素的透明度
```
## 光标类型
```
cursor 鼠标悬停在元素上时显示样式
pointer 小手效果
text 工字型
move 十字光标
```
## 平面转换（2D转换）
```
transform为元素添加动态效果，改变盒子在平面的形态（位移、旋转、缩放、倾斜），通常卸载hover里
属性值：
translate(x轴，y轴) 左/上都为负，值为像素和百分比
rotate(旋转角度) 单位deg 取正顺时针旋转，取负逆时针旋转
transform-origin 水平原点位置 垂直原点位置 。转换原点位置 取值left、top、right、bottom
scale(缩放倍数/x轴/y轴缩放倍数)
skew(倾斜度数)
多重转换：先平移再旋转
```
## 渐变色
```
linear-gradient(
渐变方向（默认从上到下,可以to right/left/top/角度度数)
颜色1 终点位置(百分比),
颜色2 终点位置
)
```
## 径向渐变
```
radial-gradient(
半径（可以是2条） at 圆心位置（像素单位数值/百分比/方位名词），
颜色 终点位置，
颜色 终点位置，
)
```
## 空间平移（3D）
```
transform: translate3d(x,y,z)
translateX()
translateY()
translateZ()
perspective：视距（人眼和屏幕之间的距离，建议800-1200px），给父级元素添加，子级的translateZ就生效了
```
## 空间旋转（3D）
```
transform: 沿着哪个轴旋转
rotateX()
rotateY()
rotateZ()
```
## 动画
```
animation 动画名字 动画花费时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
定义动画
@keyframes 动画名 {
from {}
to {}
}
@keyframes 动画名 {
0% {}
20% {}
100% {}
}
速度曲线：
linear：匀速
steps(步骤) 分步动画
重复次数：infinite 无限循环
反向：alternate
结束状态：forwards 结束状态 backwards 开始状态
animation-play-state 暂停动画 paused 为暂停
```
## rem适配
```
rem 相对于HTML标签的字号计算结果
```
## 媒体查询
```
@media (媒体特性[width:375px]) {
#差异化CSS样式
选择器 {
}
}
```
## flexible.js
```
flexible.js是淘宝开发的一个用来适配移动端的js库，根据不同的视口宽度设置不同的fontsize
```
## less
```
less是一个CSS预处理器，Less后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
```
## 页面丝滑滚动
```
html {
scroll-behavior: smooth;
}
```