前端 CSS 超全核心知识点整理(第四期)

十三、移动端适配（媒体查询 rem）

• em：参照父级字体大小
• rem：参照 html 根字体大小

十四、多列布局 column

文章、新闻多栏排版：

.content{
column-count:3; /* 总列数 */
column-width:200px; /* 最小列宽 */
column-gap:100px; /* 列间距 */
column-rule:5px solid red; /* 列分割线 */
}
.title{
column-span:all; /* 标题跨全部列 */
}

十五、拓展：阿里 SVG 图标引入

项目通用矢量图标，支持修改颜色大小：

.icon{
width:100px;height:100px;
fill:currentColor; /* 跟随文字颜色 */
}

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouwo"></use>
</svg>

十六、页面锚点（回到顶部功能）

<!– 跳转锚点 –>
<a href="#d1">跳转到模块1</a>
<div id="d1">模块内容</div>
<!– 回到顶部 –>
<a href="#">回到顶部</a>

总结

本文完整覆盖 CSS 从移动端响应式、多列布局、背景渐变等全套开发知识点，所有代码均可直接复制运行，适合前端初学者系统学习、面试快速复习，后续会持续更新 CSS3 新特性、Grid 网格布局实战案例。