文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载本文是《千古前端图文教程》中 03-CSS进阶/CSS开发积累.md 的深度整理与源码级扩充版。它汇集了日常前端开发中最高频复用的 13 组 CSS 技巧——包括 Flex 子元素居中、单/多行文本省略号、保留文本换行、扩大点击热区、隐藏滚动条等——每个技巧都附可直接复制运行的代码。读完本文你将掌握一套「即拿即用」的 CSS 实战方案并理解其背后的布局原理可直接应用于列表页、详情页、弹层与移动端页面的开发。一、Flex 盒子中的子元素居中Flex 布局是前端最常用的居中方案只需要三行代码即可让子元素在横轴与竖轴同时居中display: flex; justify-content: center; /* 子元素在横轴主轴的对齐方式左右居中 */ align-items: center; /* 子元素在竖轴侧轴的对齐方式上下居中 */这里的两个属性各自控制一个轴向理解它们才能灵活调整justify-content控制子元素在主轴上的排列方式属性值包括flex-start从主轴起点对齐默认值、flex-end从主轴终点对齐、center居中对齐、space-around在父盒子里平分、space-between两端对齐、中间平分完整示例与属性值说明可见 02-CSS基础/13-CSS3属性Flex布局图文详解.md 中 justify-content 属性 一节。align-items控制子元素在侧轴上的对齐方式属性值包括flex-start、flex-end、center、baseline、stretch。当主轴方向通过flex-direction被改为纵向时justify-content与align-items的生效方向会随之对调使用时要留意这一点。二、让文字只显示一行超出部分显示省略号这是列表标题、导航菜单中最常见的文本截断需求核心是三个属性组合overflow: hidden; /* 超出容器的内容被裁剪 */ white-space: nowrap; /* 文字不换行 */ text-overflow: ellipsis; /* 被裁剪的溢出文字显示为省略号 */三者的分工是white-space: nowrap阻止换行overflow: hidden裁剪溢出内容text-overflow: ellipsis在裁剪处呈现省略号。这个写法在仓库的实战练习中也有完整应用例如 08-前端基本功CSS和DOM练习/07-DOM操作练习innerHTML的方式创建元素.md 中为列表项同时设置了display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;配合定宽实现单行截断。三、让文字最多显示两行超出后显示省略号多行截断需要借助 WebKit 内核的弹性盒特性display: -webkit-box; /* 将容器设为弹性盒模型 */ -webkit-box-orient: vertical; /* 子元素纵向排列 */ -webkit-line-clamp: 2; /* 最多显示两行 */ overflow: hidden; text-overflow: ellipsis;其中-webkit-line-clamp就是控制最大显示行数的关键属性将其值设为1也能达到「文字只显示一行、超出显示省略号」的效果原理与上一节的单行方案等价可作替代写法。四、让文字最多显示三行flex 等复杂布局场景下的兜底写法如果当前元素处于 flex 布局等复杂场景中前两种写法未必能达到预期效果——此时可以多加一行white-space: normal兜底display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 最多显示三行 */ overflow: hidden; text-overflow: ellipsis; white-space: normal; /* 允许在容器内正常换行兜底处理 */显式声明white-space: normal可以抵消某些继承环境下nowrap对换行的干扰让-webkit-line-clamp的按行截断逻辑正常工作是复杂布局下更稳妥的写法。五、文本内容自带换行但页面不显示用 white-space 解决当数据源中的文本自带换行符如\n、textarea 多行内容但渲染到页面后换行消失时给容器加上以下任一属性即可white-space: pre-wrap; /* 保留空白与换行超出容器宽度时自动换行 */或者white-space: pre-line; /* 合并连续空白但保留换行 */两者都能还原文本中的换行区别在于pre-wrap会保留原有连续空格pre-line会把连续空格合并成一个。关于white-space系列属性的系统讲解可参见 03-CSS进阶/01-CSS中的非布局样式.md 的「文字换行」一节其中指出white-space负责「空白处是否换行」并提到nowrap让长文本不换行、pre-wrap让文本按原样换行的用法。同时可关注overflow-wrap与word-break两个配合属性它们解决的是单词级断行问题。六、CSS 的逗号和空格不同属性值之间用空格CSS 中逗号一般只写在函数参数()里而不同属性值之间用的是空格而不是逗号transform: translate(-50%, -50%); /* 函数参数之间写逗号 */ transform: translate(-50%, -50%) scale(0.5); /* 不同属性值之间用空格 */ background-size: 100% 100%; /* 这里是空格不是逗号 */transform可以同时叠加多个变换函数如translate与scale它们之间必须用空格分隔而background-size的宽高两个值之间同样用空格。这条规则写错时浏览器会直接忽略声明是调试时非常容易踩的坑。关于translate(-50%, -50%)的居中原理03-CSS进阶/04-如何让一个元素水平垂直居中.md 中有详细解释translate()使用百分比时以元素自身的宽高为基准换算移动距离因此在未指定子元素宽高的情况下也能动态计算并实现垂直居中。七、人民币符号的羊角半角与全角人民币价格中的「羊角符号」有半角和全角之分¥半角全角半角的宽度更小。考虑到电商列表、价格标签中容器空间一般比较紧张且半角符号与数字排版更协调推荐使用半角¥。八、鼠标悬停时弹出提示文字鼠标悬停弹出提示是一个高频交互需求。实现思路通常是用 CSS 伪元素或独立提示元素结合position: absolute定位到目标元素上方默认opacity: 0/visibility: hidden隐藏在:hover时显示配合transition还可以做出平滑的淡入淡出效果。具体实现可参考社区方案「css实现鼠标悬浮后的提示效果」将其中的title属性方案替换为自定义 CSS 可以获得更强的样式控制能力如气泡样式、箭头、延迟显示等。九、图片宽度固定、高度自适应当图片容器宽度固定、希望高度随宽度等比缩放时不要使用 background直接放置img元素并把高度设置为auto即可img srcxxx.png stylewidth: 200px; height: auto; alt自适应高度的图片img是替换元素height: auto会让高度依据图片原始宽高比自动计算从而保持比例不变而background-image默认是平铺/居中等固定表现无法天然跟随宽度等比缩放需要额外配合background-size: cover/contain处理远不如img height: auto直观。十、通过 CSS 扩大点击热区移动端友好在小屏幕上按钮等交互元素的可点击区域往往太小。可以通过::before伪元素扩大热区且不影响视觉样式.button { position: relative; /* [其余样式] */ } .button::before { content: ; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; }::before通过绝对定位向四个方向各外扩 10px形成一块透明的「隐形点击区」。注意.button内部不要写overflow: hidden否则伪元素外扩的部分会被裁剪扩大热区便失效。十一、上下滚动但不显示滚动条在移动端如小程序、H5常见「内容可上下滚动但滚动条不可见」的需求.sku_list { margin-left: 25rpx; display: flex; flex-wrap: wrap; height: 617rpx; overflow: hidden; overflow-y: scroll; /* 去掉滚动条 */ ::-webkit-scrollbar { display: none; } }这里先写overflow: hidden再写overflow-y: scroll后声明的属性覆盖前者使纵向可滚动。去掉滚动条的关键一行是::-webkit-scrollbar { display: none; }为 Sass/Less 嵌套写法原生 CSS 中应写为.sku_list::-webkit-scrollbar。注意去掉滚动条建议用display: none;不要用width: 0;。因为当你需要设置横向滚动效果时display: none不会改变容器的尺寸size而width: 0会压缩滚动条所占的空间、改变容器 size导致横向滚动条布局异常。十二、设置页面宽高撑满屏幕开发页面时通常希望页面宽高撑满整个屏幕可以这样写.app { width: 100vw; min-height: 100vh; }vwviewport width与vhviewport height是相对于视口的单位100vw即视口宽度的 100%100vh即视口高度的 100%。用min-height而非height是为了保证当内容超过一屏时可以正常向下扩展避免内容被裁剪或出现滚动异常。十三、在 JS 中动态插入 CSS 样式当需要在运行时动态注入公共样式例如组件按需加载样式、主题切换时可以创建style标签插入到body中new_element document.createElement(style); new_element.innerHTML (.tucao-content p{font-size:18px;}); document.body.appendChild(new_element);核心步骤三步createElement(style)创建标签 → 把 CSS 文本写入innerHTML→appendChild挂载到文档。这一方式适用于全局动态样式注入若只是局部、临时的样式调整更推荐直接操作元素的style属性或切换 class避免频繁创建样式节点带来的开销。总结一份可沉淀的 CSS 开发速查清单本文覆盖的 13 组技巧可以整理成一张速查表方便日常开发时快速检索场景核心写法Flex 子元素居中display: flex; justify-content: center; align-items: center;单行省略号overflow: hidden; white-space: nowrap; text-overflow: ellipsis;两行省略号-webkit-box-webkit-line-clamp: 2三行省略号复杂布局-webkit-line-clamp: 3white-space: normal保留文本自带换行white-space: pre-wrap或pre-line多函数叠加transform属性值之间用空格函数参数之间用逗号价格符号推荐半角¥悬停提示伪元素/提示层 :hoveropacity/visibility图片等比自适应img元素 height: auto扩大点击热区::before绝对定位外扩父级勿写overflow: hidden隐藏滚动条::-webkit-scrollbar { display: none; }撑满屏幕width: 100vw; min-height: 100vh;JS 注入 CSSdocument.createElement(style)innerHTMLappendChild这些技巧在仓库的进阶文档中还有更系统的理论支撑Flex 主轴/侧轴对齐的完整属性值可查阅 02-CSS基础/13-CSS3属性Flex布局图文详解.md换行相关属性的系统归纳见 03-CSS进阶/01-CSS中的非布局样式.md元素居中的多种方案对比见 03-CSS进阶/04-如何让一个元素水平垂直居中.md。建议将本清单沉淀进团队样式规范作为通用样式组件的实现参考。赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐Lighthouse区域独有内容教程additive资产如何填充美版空缺槽位Lighthouse区域独有内容教程additive资产如何填充美版空缺槽位 Lighthouse 是《Banjo Kazooie》的 PC 移植项目。本教程游戏开发逆向工程CSS 专业技巧实战手册css-protips 26 条技巧深度解析CSS 专业技巧实战手册css protips 26 条技巧深度解析 这是一篇围绕 css protips https://link.gitcode.com/教程前端JavaScript 开发积累千古前端教程中的高频编码技巧与踩坑笔记JavaScript 开发积累千古前端教程中的高频编码技巧与踩坑笔记 本文汇总了本仓库《JavaScript 开发积累》这篇实践笔记中的六类高频技巧JSDo文档教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考