积累：02-CSS

wwy_frontend
215 阅读18分钟

1. 盒模型

  • 浏览器如何计算元素大小和占位方式每个元素都被当作一个矩形的盒子，有 内容（content）、内边距(pedding)、边框(border)、外边距(margin) 四个区域。
  • 两种盒模型
类型设置方式特点
标准盒模型（content-box）默认值width 只包括内容区域，不含 padding 和 border
IE盒模型（border-box）box-sizing: border-boxwidth 包含 padding 和 border，更常用

2. 谈谈你对BFC的理解？

  • BFC(Block Formatting Context，块格式化上下文)就像是 页面里的一个小隔间，一旦一个元素形成了 BFC，它里面的元素的布局就不会影响外面，外面的布局也不会跑进来干扰它。

  • 📦 通俗类比：

    可以把 BFC 想成一个隔离的布局容器：

    • 外部的 margin 不会“压进来”
    • 内部的 float 不会“撑破父元素”
    • 是 CSS 世界中的“结界”或“避雷针”

✅ 什么情况下会触发 BFC？

只要一个元素满足下面任意一个条件，就会触发 BFC（相当于创建“小隔间”）：

条件举例
根元素html
设置 floatfloat: left/right
设置 positionposition: absolute/fixed
设置 displaydisplay: inline-block/table-cell/flex/grid/flow-root
设置 overflowoverflow: hidden/scroll/auto
contain: layout用于新规范的方式

👉 推荐做法：overflow: hidden 或 display: flow-root 最常用

为什么需要 BFC？

主要是解决一些常见的 CSS 布局问题：

  • 清除浮动：子元素浮动了，父元素高度塌陷 → 触发 BFC 后，父元素会自动包裹子元素。
  • 防止外边距折叠：两个块级元素上下紧贴时，margin 会叠加 → 放在不同的 BFC 中就不会重叠。
  • 避免文字环绕浮动元素：文字会被图片挤开 → 用 BFC 包裹文字，就能把它们隔开。

✅ BFC 的核心作用：

应用场景说明
✅ 阻止 margin 合并（常见问题）邻接块级元素的垂直 margin 会合并，BFC 可以阻止
✅ 清除浮动父元素触发 BFC 后会包住子元素 float
✅ 防止文字环绕浮动元素BFC 可以“避开”浮动影响
✅ 自适应高度包含浮动子元素的容器自动高度塌陷，BFC 可解决

🧪 示例 1：阻止 margin 合并


<div class="box1" style="margin-bottom: 20px; background: lightblue;">A</div>
<div class="box2" style="margin-top: 20px; background: lightgreen;">B</div>

  • 这两个盒子之间的间距不是 20+20=40px，而是 20px（margin 折叠了）

  • 解决办法：

.box1 {
  overflow: hidden; /* 触发 BFC，避免折叠 */
}

没有 BFC 的话，父子之间的 margin 会合并。BFC 可解决这个问题。

🧪 示例 2：清除浮动（替代 clearfix）

<style>
  .wrapper {
    overflow: hidden; /* ✅ 创建 BFC，包含内部浮动元素 */
  }
  .float-box {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
  }
</style>

<div class="wrapper">
  <div class="float-box"></div>
</div>

如果没有 BFC，.wrapper 高度会塌陷。创建 BFC 后自动包住内部浮动元素。

🧠 面试答题模板：

BFC（块格式化上下文）是 CSS 中一种布局机制，创建 BFC 的元素会形成一个独立的渲染区域，内部布局不会影响外部，常用于解决 margin 合并、清除浮动、自适应高度等问题。
通常我们使用 overflow: hidden、display: flow-root 或 float/position 等方式触发 BFC，是现代 CSS 布局的重要基础。

📌 BFC + 实战建议

场景建议
清除浮动推荐使用 .clearfix 或 overflow: hidden
阻止 margin 合并给父元素加 BFC
组件隔离布局推荐 display: flow-root，语义清晰
Vue/React 组件包裹容器用来防止边界 margin 问题，非常实用

3. 什么是响应式设计？响应式设计的基本原理是什么？ 如何做？

🌈 响应式设计的基本原理

✅ 核心三大技术：

技术作用示例
meta viewport 标签控制浏览器缩放行为<meta name="viewport" content="width=device-width, initial-scale=1.0">
媒体查询 Media Query根据不同设备宽度使用不同样式@media screen and (max-width: 768px) { ... }
百分比、弹性单位使用 %、vw/vh、rem 等替代 pxwidth: 100%, font-size: 2rem
  • 响应式布局/适配方案
方法说明
✅ CSS Grid更复杂的自适应布局
✅ picture / srcset响应式图片加载
✅ Tailwind CSS内建响应式类名如 md:w-1/2
✅ 使用 REM + JS 动态设置根字体大小例如移动端适配：设计稿宽度 / 10 = html font-size

4. 元素 ⽔平垂直 都居中的⽅法有哪些？如果元素不定宽⾼呢？

🧩 一、居中方式总览表：

方法是否支持不定宽高是否推荐说明
✅ flex✅ 支持⭐⭐ 推荐简洁优雅，现代浏览器支持好
✅ grid✅ 支持⭐⭐ 推荐灵活强大，适合复杂布局
✅ position + transform✅ 支持⭐ 推荐经典方案，兼容性好
✅ text-align + line-height❌ 固定高度❌ 不推荐仅适用于文本
✅ margin: auto❌ 定宽定高❌ 受限多适合块级元素居中
✅ 绝对定位 + 负 margin✅ 可支持❌ 较繁琐老方案，需计算宽高
方法一：flex+justifu-contet+align-items
<div class="parent">
  <div class="child">居中</div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 300px;
  background: #eee;
}
</style>
方法二： grid + place-items
<div class="parent">
  <div class="child">居中</div>
</div>

<style>
.parent {
  display: grid;
  place-items: center; /* 相当于 justify + align 同时居中 */
  height: 300px;
  background: #eee;
}
</style>
方法三： position + transform
<div class="parent">
  <div class="child">居中</div>
</div>

<style>
.parent {
  position: relative;// 父元素
  height: 300px;
  background: #eee;
}
.child {
  position: absolute; // 子元素
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 偏移自身一半 */
}
</style>

🧠 面试答题模板：

实现元素水平垂直居中有多种方式，其中最常用的是：

  • flex：通过 justify-content 和 align-items；
  • position + transform：通过绝对定位 + 偏移自身；
  • grid：通过 place-items: center。

5. 如何实现两栏布局，右侧⾃适应？三栏布局中间⾃适应呢？

✅ 最推荐方式：flex 布局

html
复制编辑
<div class="container">
  <div class="left">左边固定</div>
  <div class="right">右边自适应</div>
</div>

<style>
.container {
  display: flex;
}
.left {
  width: 200px; /* 固定宽度 */
  background: #ccc;
}
.right {
  flex: 1; /* 自动填满剩余空间 */
  background: #eee;
}


</style>
  • flex:1 是什么意思？ 
     flex: <flex-grow> <flex-shrink> <flex-basis>

    • flex-grow: 放大比例（有剩余空间的时候，元素能分多少）

    • flex-shrink：缩小比例（空间不足时，元素缩小的比例）。

    • flex-basis：初始大小（类似 width，但在 flex 布局中优先级更高）。

    • flex:1 展开等于：flex:1 1 0%

      • flex-grow: 1 → 可以按比例分配剩余空间。
      • flex-shrink: 1 → 空间不足时允许缩小。
      • flex-basis: 0% → 初始大小设为 0，意思是大家从“零起点”开始平分剩余空间。

✅ 优点：简单直观、支持响应式、代码少。

✅ 二、三栏布局：左右固定，中间自适应

👇 中间内容最重要，常见于门户、后台、博客结构

✅ 推荐方法 1：flex 布局

html
复制编辑
<div class="container">
  <div class="left">左边</div>
  <div class="center">中间</div>
  <div class="right">右边</div>
</div>

<style>
.container {
  display: flex;
}
.left, .right {
  width: 200px;
  background: #ccc;
}
.center {
  flex: 1; /* 自动撑满中间 */
  background: #eee;
}
</style>

✅ 推荐方法 2：grid 布局

html
复制编辑
<div class="container">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 左中右 */
}
.left, .center, .right {
  padding: 10px;
}


grid-template-columns: 
    200px     /* 第1列，固定宽度200像素 */
    1fr       /* 第2列，占据剩余空间（可伸缩） */
    200px;    /* 第3列，固定宽度200像素 */
</style>

6. css选择器有哪些？优先级？哪些属性可以继承？

✅ 一、CSS 选择器有哪些？

🔹 基本选择器

类型语法示例
标签选择器tagdiv, p
类选择器.class.box, .active
ID 选择器#id#main
通配选择器** { margin: 0 }

🔹 组合选择器

类型语法说明
后代选择器A BA 内部的任意 B
子选择器A > BA 的直接子元素 B
相邻兄弟A + BA 紧跟的兄弟元素 B
普通兄弟A ~ BA 后所有兄弟元素 B

🔹 属性选择器

css
复制编辑
input[type="text"] { color: red; }
a[target="_blank"] {}

🔹 伪类选择器（:）

类型示例
状态类:hover, :focus, :checked
结构类:first-child, :last-child, :nth-child(2)
否定类:not(.active)
空内容:empty

🔹 伪元素选择器（::）

示例说明
::before元素前插入内容
::after元素后插入内容
::first-line第一行样式
::first-letter第一个字母

🔹 其他高级选择器

类型示例
组合.box.active
多重h1, h2, h3
嵌套关系ul li a:hover

✅ 二、CSS 选择器优先级

🧠 记忆口诀：

!important > 内联样式 > ID > 类、伪类、属性 > 标签 > 通配符

✨ 数值表示法（CSS 优先级从右往左）：

选择器优先级说明
#id100ID
.class, :hover, [attr]10类、伪类、属性
div, p, h11标签名
*0通配符，无权重
内联样式（style 属性）1000比选择器还高
!important∞最高优先级（尽量少用）

示例对比：

css
复制编辑
div { color: red; }           /* 权重：1 */
.box { color: blue; }         /* 权重：10 */
#main { color: green; }       /* 权重：100 */
style="color: black"          /* 权重：1000 */

谁权重高，谁生效；相同权重的，后写的覆盖前面的。

✅ 三、哪些属性可以继承？

✅ 可继承的常用属性：

分类属性
文本类color, font, font-size, font-family, line-height, letter-spacing, word-spacing, text-align
表格类border-collapse, border-spacing
列表类list-style, list-style-type, list-style-position

7. css中，有哪些⽅式可以隐藏⻚⾯元素？区别?

方法是否占空间是否可响应事件是否参与渲染说明
display: none❌ 不占❌ 不响应❌ 不渲染完全隐藏，最彻底
visibility: hidden✅ 占❌ 不响应✅ 渲染但不可见留下空白
opacity: 0✅ 占✅ 响应✅ 渲染但透明视觉上看不到，但仍可点击
position: absolute; left: -9999px❌ 不占屏幕视野✅ 响应✅ 渲染常用于 SEO、可访问隐藏内容
clip-path, transform: scale(0)✅/❌（视情况）✅✅动画相关，视觉隐藏但仍在页面上
hidden 属性（HTML）❌ 不占❌❌与 display: none 效果类似
z-index: -9999 + overflow: hidden✅ 可能被遮住❌✅不常用

8. 如何实现单⾏／多⾏⽂本溢出的省略样式？

✅ 一、单行文本溢出省略（超简单）

css
复制编辑
.ellipsis-single {
  white-space: nowrap;         /* 不换行 */
  overflow: hidden;            /* 超出隐藏 */
  text-overflow: ellipsis;     /* 显示省略号 */
}

✅ 示例：

html
复制编辑
<div class="ellipsis-single" style="width: 200px;">
  这是一段非常非常长的文本，用来测试单行文本的溢出效果...
</div>

🧠 原理说明：

属性作用
white-space: nowrap不允许换行
overflow: hidden超出隐藏
text-overflow: ellipsis超出时显示 ...

✅ 二、多行文本溢出省略（稍复杂）

多行省略用 CSS3 的私有属性（需要兼容性注意）：

css
复制编辑
.ellipsis-multi {
  display: -webkit-box;             /* 必需，老版浏览器使用 */
  -webkit-box-orient: vertical;     /* 设置纵向排列 */
  -webkit-line-clamp: 3;            /* 控制显示行数 */
  overflow: hidden;                 /* 超出隐藏 */
}

✅ 示例（限制 3 行）：

html
复制编辑
<div class="ellipsis-multi" style="width: 300px;">
  一段很长很长的文字内容，用于测试多行文本省略显示的效果。
  实际场景中你可能会在产品列表、新闻预览、评论列表等地方用到。
</div>

⚠️ 注意事项

注意点说明
多行省略是 -webkit 私有属性对 IE 不兼容（IE 不支持多行省略）
line-clamp 只在块状容器中有效建议搭配 display: -webkit-box 使用
移动端支持较好，PC端 Chrome/Edge 也可用若需兼容性强可 JS 控制截断

9. CSS如何画⼀个三⻆形？原理是什么

10. 如何使⽤css完成视差滚动效果

11. CSS3新增了哪些新特性？

12. css3动画有哪些？

✅ 一、CSS3 动画主要有两大类：

类型使用方式场景示例
过渡（Transition）transition状态切换时悬浮变色、滑入滑出
关键帧动画（Animation）@keyframes + animation自主运行动画无限旋转、跳动、跑马灯

✨ 二、transition（过渡动画）

✅ 原理：属性在两种状态切换时，动画过渡

示例：按钮 hover 时背景色渐变

css
复制编辑
.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: red;
}

✅ 特点：

  • 简单易用
  • 只能用于状态切换（如 hover、点击、类名切换）
  • 无法实现复杂动画（如循环、移动）

✨ 三、animation + @keyframes（关键帧动画）

✅ 原理：自定义关键帧序列，实现自由动画流程

示例：元素上下跳动

css
复制编辑
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-30px); }
}

.ball {
  animation: bounce 1s infinite;
}

✅ 优点：

  • 可循环、可延迟、可组合
  • 可做复杂动画（淡入、旋转、位移、缩放）

✅ 四、常用 animation 属性汇总

属性作用
animation-name动画名（对应 @keyframes）
animation-duration动画持续时间
animation-delay延迟多久开始
animation-iteration-count执行次数（infinite 表示无限）
animation-timing-function动画节奏（如 ease, linear, ease-in-out）
animation-direction正向/反向/交替（如 alternate）
animation-fill-mode动画结束后是否保持最后状态（forwards）

🎨 五、常见动画效果示例

✅ 淡入淡出

css
复制编辑
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade {
  animation: fade-in 0.5s ease-in;
}

✅ 左右摇摆

css
复制编辑
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}
.shake {
  animation: shake 0.5s ease-in-out;
}

✅ 无限旋转

css
复制编辑
@keyframes rotate {
  to { transform: rotate(360deg); }
}
.spin {
  animation: rotate 2s linear infinite;
}

13. 介绍⼀下grid⽹格布局

✅ 基本结构

html
复制编辑
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  ...
</div>

css
复制编辑
.grid-container {
  display: grid; /* 开启网格布局 */
  grid-template-columns: 100px 1fr 100px; /* 三列：左右定宽，中间自适应 */
  grid-template-rows: auto auto; /* 行高自动 */
  gap: 10px; /* 行列间距 */
}

  • 核心属性

    • 容器属性：
    属性说明
    display: grid开启网格布局
    grid-template-columns列宽定义（可以是像素、百分比、fr）
    grid-template-rows行高定义
    gap / row-gap / column-gap设置格子间距
    grid-template-areas定义命名区域（可读性更强）
    justify-items, align-items子项对齐方式
    • 子项属性
    属性说明
    grid-column跨几列（如 1 / 3）
    grid-row跨几行
    grid-area区域名称，对应模板
    justify-self / align-self单个子项的对齐方式

    ✅ 常用单位说明

    单位说明
    px / %固定宽度
    fr剩余空间分配单位（例如 1fr 2fr）
    auto自动大小
    minmax(min, max)最小最大值

14. 说说flexbox（弹性盒布局模型）,以及适⽤场景？

✅ 核心概念

Flex 布局是父容器控制整体方向（主轴/交叉轴） ，子元素根据空间自动伸缩。

image.png

✅ 父容器常用属性（设置方向 & 对齐）

属性含义示例
display: flex启动弹性布局
flex-direction主轴方向（横/竖）row / column
flex-wrap是否换行wrap / nowrap
justify-content主轴对齐flex-start, center, space-between
align-items交叉轴对齐center, stretch, flex-end
align-content多行时交叉轴对齐（多行时生效）

✅ 常见主轴排列


justify-content: flex-start;     /* 左对齐 */
justify-content: center;         /* 居中 */
justify-content: space-between;  /* 两端对齐，间隔均分 */

✅ 交叉轴对齐方式


align-items: center;             /* 垂直居中 */
align-items: stretch;            /* 默认值，高度自动填满 */

✅ 子项常用属性（控制自身行为）

属性含义
flex快速设置 flex-grow/shrink/basis
flex-grow放大比例
flex-shrink缩小比例
flex-basis初始尺寸（可为 px、%）
align-self覆盖 align-items 的设置

✅ 示例：平均分布 3 列卡片


.container {
  display: flex;
  justify-content: space-between;
}
.card {
  flex: 1;
  margin: 0 10px;
}

✅ 三个卡片自动等宽，有间距，自适应屏幕宽度

✅ 示例：水平垂直居中


.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

✅ 居中神器：flex + center + center

✅ Flex 和 Grid 对比

项目FlexGrid
维度一维（行 或 列）二维（行 + 列）
适用元素排序、对齐网格化布局
控制粒度子项自适应为主网格整体控制为主

15. 说说设备像素、css像素、设备独⽴像素、dpr、 ppi 之间的区别？

✅ 15. 设备像素、CSS 像素、设备独立像素、DPR、PPI 区别

名称解释举例
设备像素（物理像素）屏幕上最小的显示单元iPhone13 宽度有 1170 个像素点
CSS 像素浏览器中的逻辑单位（布局单位）我们写的 width: 100px
DPR（devicePixelRatio）设备像素 / CSS 像素 的比值iPhone13 DPR=3（1 CSS px = 3 物理 px）
设备独立像素与设备无关、逻辑抽象出来的“像素”单位（接近 CSS px）用于 UI 适配（如安卓开发）
PPI（Pixels Per Inch）屏幕每英寸显示多少像素数字越大越清晰（iPhone ≈ 460 PPI）

✅ 举例说明：
iPhone13 分辨率 1170 × 2532，逻辑宽度是 390px，说明：

  • 1170 / 390 = DPR = 3
  • 浏览器中你写 width: 390px，手机上实际会占用 1170 个物理像素

✅ 16. em / px / rem / vw / vh 区别

单位参考基准特点使用场景
px固定像素不随设备变，精准精准控制元素尺寸
em当前元素的字体大小受父元素影响，层层传递字体、内边距
rem根元素 html 的字体大小全局统一，便于控制响应式布局推荐
vw视口宽度的 1%随屏幕宽度变化横向响应式布局
vh视口高度的 1%随屏幕高度变化全屏封面、组件高度
dvh动态视口高度 (Dynamic VH)实时反映可见区域高度，受浏览器 UI 显隐影响移动端避免键盘遮挡问题
lvh大视口高度 (Large VH)始终取最大可能的视口高度（UI 展开时）需要预留 UI 空间的布局
svh小视口高度 (Small VH)始终取最小可能的视口高度（UI 收起时）适合保证内容始终可见
dvw动态视口宽度实时反映可见区域宽度，受侧边栏/安全区影响横屏、折叠屏设备优化
lvw大视口宽度始终取最大可能宽度最大内容区域排布
svw小视口宽度始终取最小可能宽度避免横向滚动条问题
%父元素的相对百分比相对父元素尺寸计算流式布局，容器内自适应

✅ 建议：

  • 移动端适配推荐 rem + viewport
  • 动画/弹窗用 vw/vh
  • 字体大小：用 rem 更统一

✅ 17. Chrome 支持小于 12px 字体的方式

Chrome 默认最小字体为 12px，但可以通过以下方式绕过限制：

方式是否推荐原理
设置 transform: scale()✅ 推荐渲染后缩放，看起来更小
使用 Webkit-text-size-adjust✅ 推荐控制文本自动缩放
使用图片或 Canvas 替代文字⚠️ 不推荐可控但非文本
修改浏览器设置❌ 不推荐用户体验差、不通用

✅ 示例：

css
复制编辑
.small-text {
  font-size: 12px;
  transform: scale(0.75); /* 看起来约等于 9px */
  transform-origin: left top;
}

**禁止字体自动调整**
html {
  -webkit-text-size-adjust: none;
}

18. 怎么理解回流跟重绘？什么场景下会触发？

类型说明触发条件
回流（Reflow）计算元素尺寸/位置，重新布局改变大小、添加元素、字体、DOM结构
重绘（Repaint）只重新渲染外观（颜色、阴影）改变颜色、visibility、背景等

✅ 回流一定会引起重绘，但重绘不一定回流。

✅ 触发回流的操作：

  • 改变元素几何：width, height, margin, padding, display
  • DOM 操作：插入/删除节点
  • 调用 offsetTop, clientHeight 等会强制同步计算的属性

19. 说说对Css预编语⾔的理解？有哪些区别?

名称特点用法
Sass / SCSS最流行，强大，支持嵌套、函数、mixin@use, $变量
Less使用门槛低，和 CSS 写法更像@变量，可直接写在项目中
Stylus最灵活，语法最简洁（甚至可以不写分号/大括号）简洁但偏冷门

20. 如果要做优化，CSS提⾼性能的⽅法有哪些？

类别优化建议
选择器优化避免复杂/深层选择器（如 div div ul li），优先使用类选择器
减少重绘回流批量 DOM 操作（如 documentFragment），避免频繁修改样式
合成层利用 will-change, transform, opacity 创建合成层，减少 repaint
按需加载样式用 media 或 import() 实现懒加载
使用现代布局flex/grid 代替 float，提高效率
样式表缓存CSS 提取为独立文件，开启缓存

21. 移动端0.5像素边框有几种方式？

1. 缩放法: 伪类元素画1px边框，再缩放到0.5px

.border-05 {
  position: relative;
}

.border-05::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ccc;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
// 优点：兼容性好（iOS/Android 都支持）  
//  缺点：代码稍微复杂，需要处理定位

2.viewpoint 缩放法 （meta + 设计稿适配）

  • 通过meta viewpoint 设置缩放，让1px视觉上变成0.5
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no">
  • 优点：全局解决，写 1px 就是 0.5px
  • 缺点：副作用大，会影响整体布局和缩放

3.媒体查询（根据设备像素，动态设置0.5px的border）

.border{
 border: 1px solid #ccc; /* 默认 */
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border {
    border: 0.5px solid #ccc;
  }
}
  • 优点：写法简洁，直观
  • 缺点：Android 某些机型对 0.5px 支持不好

4. 使用 box-shadow 模拟

.border-shadow{
    box-shadow: inset 0 -0.5px 0 #ccc;
}
  • 优点：兼容性好，灵活（可以控制方向）
  • 缺点：复杂边框效果不太适合

5. 使用图片 / SVG

直接用 0.5px 的线条图片或 SVG 来当分割线。

<div class="line"></div>

.line {
  height: 1px;
  background: url('data:image/svg+xml;utf8,<svg ... />') no-repeat;
  background-size: 100% 0.5px;
}
  • 优点：效果稳定，完全可控
  • 缺点：维护麻烦，不够灵活
avatar
文章
阅读
粉丝