3.CSS案例

标准起手动作

1. 间隙清空

因为每个标签, p, h1…都是有padding和margin的, 而每个浏览器又不一样, 所以清空先

*{padding:0; margin:0;}

2.flex布局

2.flex布局

类型	属性	取值示例（含注释）	中文说明
容器属性 (作用于父元素)	display	flex ——启用弹性盒布局	将元素设为Flex容器，子元素变为Flex项目
	flex-direction	row（水平从左到右，默认） row-reverse（水平从右到左） column（垂直从上到下） column-reverse（垂直从下到上）	定义主轴方向（即项目的排列方向）
	flex-wrap	nowrap（不换行，默认） wrap（换行，新行在下方） wrap-reverse（换行，新行在上方）	控制项目是否换行及换行堆叠方向
	justify-content	flex-start（主轴起点对齐，默认） flex-end（主轴终点对齐） center（主轴居中对齐） space-between（剩余空间平均分配） space-around（类似between,但是不会贴边, 两端会显得更窄） space-evenly（等距对齐）	定义项目在主轴上的对齐与分布方式
	align-items	stretch（拉伸填充，默认） flex-start（交叉轴起点对齐） flex-end（交叉轴终点对齐） center（交叉轴居中对齐） baseline（基线对齐）	定义单行项目在交叉轴上的对齐方式
	align-content	stretch（行间填充） flex-start（多行起点对齐） flex-end（多行终点对齐） center（多行居中对齐） space-between（多行间距均匀） space-around（多行环绕）	定义多行在交叉轴上的分布方式（需配合flex-wrap: wrap生效）
项目属性 (作用于子元素)	flex-grow	0（不放大，默认） 1, 2…（按比例放大，如两个项目均为1则平分剩余空间）	空间有剩余时，项目的放大比例
	flex-shrink	1（可缩小，默认） 0（禁止缩小） 2（缩小比例更高）	空间不足时，项目的缩小比例
	flex-basis	auto（根据内容自适应，默认） 100px（固定宽度） 20%（百分比宽度）	分配多余空间前，项目在主轴上的基准尺寸
	flex	0 auto（不放大可缩小，默认值） 1（等比放大） none（不缩放）	flex-grow/flex-shrink/flex-basis的简写形式
	align-self	auto（继承父容器align-items属性，默认） flex-start / center / stretch（单独设置对齐方式）	单个项目在交叉轴上的对齐方式（可覆盖容器设置）
	order	0（默认顺序） -1（提前） 2（延后）	控制项目显示顺序（数值越小越靠前，支持负数）

不显示滚动条, 但是可以滚动

## 不显示滚动条，但仍可滚动的通用实现方案

### 核心思路
让容器继续保留原生滚动能力，只把滚动条本身隐藏掉。

### 实现步骤
1. 给需要滚动的容器设置：
   - `overflow: auto` 或 `overflow-y: auto`
2. 同时兼容不同浏览器隐藏滚动条：
   - Firefox：`scrollbar-width: none;`
   - IE / 旧 Edge：`-ms-overflow-style: none;`
   - Chrome / Safari / 新 Edge：`::-webkit-scrollbar { width: 0; height: 0; display: none; }`

### 示例代码
.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-container::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

### 关键点
- **不要**写成 `overflow: hidden`，否则内容就不能滚动了
- 正确方式是：**保留 `overflow: auto`，只隐藏 scrollbar UI**
- 这样鼠标滚轮、触控板、键盘滚动、代码控制滚动都还能正常工作

### 如果是动态注入
也可以在运行时注入一段样式，只作用到指定类名：

const style = document.createElement('style')
style.textContent = `
  .scroll-container{
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .scroll-container::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
`
document.head.appendChild(style)

### 适用场景
- 侧边栏列表
- 聊天消息区
- 任务列表
- 预览面板
- 任何希望“视觉更干净，但保留滚动能力”的区域