11 KiB
11 KiB
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;
}