从使用的角度，快速过一遍HTML/CSS
HTML
基础知识
- 标签写法：单标签，双标签
常用标签
- 文本标签：
h1,p,strong,em,sup等等 - 超文本标签：
a,img,audio,video等等 - 结构标签：
html,head,body,title,meta等等 - 布局标签：列表
ul,ol,dl,li，表格table,tr,td，表单form,input,textarea,select,option - 语义化标签：
header,nav,main,section,article,aside,footer
CSS
基础知识
- 写法：选择器{声明}
- 引入方式：行内
style=''，内嵌<style></style>，外部导入<Link>,@import
选择器
- 基本选择器：通配符选择器，标签选择器，类名选择器，ID选择器，属性选择器
- 组合选择器：后代选择器
元素1 元素2{}，亲儿子选择器元素1>元素2{}，相邻兄弟选择器元素1+元素2{}，通用兄弟选择器元素1~元素2{} - 伪类选择器：
:link,:visited,:hover,:active,nth-child,nth-of-type - 伪元素选择器：
::before,::after,::first-line,::first-letter,::selection - 选择器优先级：ID > 类/伪类/属性 > 元素/伪元素，
!important最高优先级
CSS文本样式
- 字体：
font - 文本颜色：
color - 文本对齐：
text-align - 行高：
line-height
CSS背景样式
- 背景颜色：
background-color - 背景图片：
background-image
CSS盒模型
- 宽高设置：
box-sizing,content-box,border-box - 内外边距设置：
padding,margin - 边框设置：
border,border-radius
元素显示模式display
block：块级元素inline：行内元素inline-block：行内块元素
CSS布局
浮动float
- 基本使用
- 效果：脱离文档流，文字围绕效果
- 问题：子元素全部浮动，父元素高度塌陷
- 清除浮动：方法1-父元素加
overflow:hidden方法2-父元素伪元素::after清除content:''display: blockclear:both
定位position
static静态定位（默认）relative相对定位（相对自己原来位置偏移）absolute绝对定位（相对最近的已定位父级偏移）fixed固定定位（相对浏览器窗口固定）sticky粘性定位z-index定位层级（控制定位元素的上下覆盖关系）top/right/bottom/left定位偏移（非static才能用）- 子绝父相
弹性布局flex
- 父元素属性：
display:flex,flex-direction,flex-wrap,justify-content,align-items,align-content - 子元素属性：
flex,align-self,order
网格布局grid
- 父元素属性：
display:grid,grid-template-columns,grid-template-rows,gap,grid-template-areas,place-content,place-items - 子元素属性：
grid-column,grid-row,grid-area
多列布局column
column-count：分成几列column-gap：列之间的间距column-rule：列中间的分割线
CSS高级样式
- 透明度
opacity - 光标样式
cursor - 精灵图
sprites - 字体图标
iconfont
CSS变形transform
- 移动
translate - 旋转
rotate - 缩放
scale
CSS过渡transition
transition: all 0.3s
CSS动画animation
@keyframes：关键帧animation: 动画名 2s linear infinite
响应式布局
- 视口设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 媒体查询：
@media (max-width:768px){} - 相对单位：
百分比%,rem,vw,vh
CSS其他知识
- CSS变量：
--变量名，var(--变量名) - 浏览器前缀
- BEM类名命名规范
