outline: none 用于移除元素获得焦点时默认的轮廓线
broder:0 用于移除边框
font-size：0 用于设置字体不显示
list-style: none 消除<li> 标签默认样式
margin: xx auto 版心居中
width:100% 通栏
vertical-align 作用于行内元素 / 表格单元格，调整其垂直位置
text-align 作用于块级元素 调整其水平位置
line-height 设置与height相等 实现文字垂直居中
| 属性 | 布局模型 | 类型 | 作用轴 | 控制对象 | 生效条件 |
|---|---|---|---|---|---|
align-items |
Flex/Grid | 容器 | 交叉轴 | 所有子元素 | 容器高度 > 子元素总高度 |
align-content |
Flex/Grid | 容器 | 交叉轴 | 多行元素整体 | 多行且容器高度 > 子元素总高度 |
justify-content |
Flex/Grid | 容器 | 主轴 | 所有子元素 | 容器宽度 > 子元素总宽度 |
align-self |
Flex/Grid | 项目 | 交叉轴 | 单个元素 | 需父容器设置 align-items |
justify-self |
Grid | 项目 | 主轴 | 单个元素 | 单元格宽度 > 元素宽度 |
border-radius 设置圆角
标准盒子模型的padding和边框会撑大盒子
box-sizing: border-box 设置怪异盒子模型 padding和边框不撑大盒子 而是挤占内容区域
| 列表类型 | 标签 | 结构特点 | 典型场景 |
|---|---|---|---|
| 无序列表 | <ul>, <li> |
项目之间无顺序关系 | 菜单、待办事项 |
| 有序列表 | <ol>, <li> |
项目按数字或字母排序 | 步骤指南、排行榜 |
| 定义列表 | <dl>, <dt>, <dd> |
术语 - 定义的关联结构 | 词典、FAQ、元数据展示 |
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3) 设置边框阴影
边和内容一样高，找行内标签（例如a），高靠内容撑开
flex布局中想让元素一个在最左一个在最右: justify-conetnt: space-between
flex-wrap:wrap 弹性盒子换行
font-weight: normal 或 font-weight: 400 让h标签不加粗
font-style: normal 让i标签不倾斜