C++课后习题训练记录Day73
2026/1/21 18:38:58
小白前端速成：搞定CSS3段落与行样式，排版不再翻车（附避坑指
- 小白前端速成：搞定CSS3段落与行样式，排版不再翻车（附避坑指南）
- 开场白：我的第一段代码，老板看完直接让我“回去等通知”
- 别再只会 `text-align: center` 了，这几个才是亲爹
- 1. `line-height`：行高没调好，再好的字体也白费
- 2. `letter-spacing` & `word-spacing`：字间距、词间距，别乱开炮
- 3. `text-indent`：首行缩进，两个字的浪漫
- 4. `white-space`：换行、断句、强制不断行，它全管
- 5. `text-align-last`：最后一行也想居中？安排！
- 翻车现场：我踩过的坑，你们一个都别想跑
- 坑 1：表格里 `white-space: nowrap` 突然失效
- 坑 2：英文长单词撑爆容器
- 坑 3：`line-height` 对 `input` 无效
- 实战：从博客到电商，不同场景的“段落配方”
- 1. 博客正文——文艺青年最爱
- 2. 商品详情——多行省略 + 展开按钮
- 3. 用户评论区——防刷屏、防英文爆破
- 调试心法：文字不听话，先骂三句再开 DevTools
- 老司机私藏：让文字“呼吸感”爆棚的小阴招
- 1. 用 `em` 做“段间距”，字号联动不翻车
- 2. 用 `ch` 单位控制缩进，英文也适用
- 3. 伪元素画“段落装饰线”，逼格 +1
- 彩蛋：更骚的玩法，怕你接不住
- 1. CSS 变量动态行高
- 2. `clamp()` 响应式字号 + 行高一条龙
- 3. `writing-mode` 竖排中文，弹幕即视感
- 结语：把字当女朋友，间距是安全感，行高是呼吸口
小白前端速成：搞定CSS3段落与行样式，排版不再翻车（附避坑指南）
友情提示：本文全程嘴碎，代码管饱，建议收藏后慢慢啃。要是看完还翻车，欢迎来我工位掀桌子——记得带奶茶。
开场白：我的第一段代码，老板看完直接让我“回去等通知”
三年前，我屁颠儿地拿着生平第一个静态页给老大过目。老板瞅了两眼，幽幽地说：“这字儿挤得跟我周一早高峰的地铁一样，喘不上气。”
我当场社死。
回来把line-height从14px调到24px，页面瞬间从“城乡结合部”升级到“精装修”，老板终于点头：“嗯，能看。”
自那以后，我就跟 CSS 的段落&行属性杠上了——今天把压箱底的骚操作全抖出来，省的你们再走我的老路。
别再只会text-align: center了，这几个才是亲爹
1.line-height：行高没调好，再好的字体也白费
人话解释：行高就是“一行文字头顶到下一行文字头顶”的距离。
最佳实践：
- 博客正文
1.6 ~ 1.8，英文再往上飘一点； - 按钮文字
1.2足够，不然会上下留白； - 千万别写死
px，用无单位数字，子元素能继承还能乘！
/* 无单位，子元素 font-size 变大也能自动放大行高 */body{font-size:16px;line-height:1.7;/* 推荐写法 */}/* 反面教材：写死 24px，后期改字号就崩 */.old{line-height:24px;}调试小技巧：
DevTools → Computed → 把line-height勾成“实时编辑”，边敲边瞅，爽到飞起。
2.letter-spacing&word-spacing：字间距、词间距，别乱开炮
中文场景下letter-spacing加 0.5 px 就能让标题“呼吸”，再加就“哮喘”；英文单词用word-spacing才对症。
/* 中文标题，轻调即可 */h2{letter-spacing:0.5px;}/* 英文 slogan，词与词之间拉开 */.slogan{word-spacing:2px;}踩坑预警：letter-spacing对中文标点也生效，句号会被拉得想离家出走，记得把标点字体单独 reset。
3.text-indent：首行缩进，两个字的浪漫
小时候老师让段前空两格，web 里同样适用。
关键词：2em就是两个汉字宽，别傻傻算px。
article p{text-indent:2em;/* 教科书式写法 */}移动端坑点：
若父元素用了padding: 0 15px，text-indent会跟着往里缩，导致实际空白>2字，解决方式：
article{padding:0 15px;}article p{text-indent:2em;margin-left:-15px;/* 抵消父 padding，保持视觉 2 字 */padding-left:15px;}4.white-space：换行、断句、强制不断行，它全管
属性值多，一张表记一辈子：
| 值 | 换行符 | 空格/制表 | 自动换行 | 经典场景 |
|---|---|---|---|---|
| normal | 忽略 | 折叠 | 自动 | 普通段落 |
| pre | 保留 | 保留 | 不自动 | 代码块 |
| nowrap | 忽略 | 折叠 | 不自动 | 单行省略 |
| pre-wrap | 保留 | 保留 | 自动 | 用户评论 |
| pre-line | 保留 | 折叠 | 自动 | 微博正文 |
/* 商品标题，单行省略三联 */.goods-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/* 评论区，保留用户换行，长英文也能断 */.comment{white-space:pre-wrap;word-break:break-all;}5.text-align-last：最后一行也想居中？安排！
text-align: justify能让段落左右对齐，但最后一行往往靠左，看强迫症当场去世。text-align-last: center拯救世界——可惜Safari 不认，生产环境记得加text-align: justify兜底。
.poem{text-align:justify;text-align-last:center;/* 最后一行居中 */-moz-text-align-last:center;}翻车现场：我踩过的坑，你们一个都别想跑
坑 1：表格里white-space: nowrap突然失效
症状：td里文字超长，死活不换行，结果把表格撑成航空母舰。
真相：table-layout: auto下，单元格宽度优先跟随内容，nowrap 直接放飞。
解药：
table{table-layout:fixed;/* 先锁宽 */width:100%;}td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}坑 2：英文长单词撑爆容器
症状：用户粘贴了个“supercalifragilisticexpialidocious”，移动端横滑都看不完。
解药组合拳：
.broken{word-break:break-all;/* 粗暴断行 */hyphens:auto;/* 兼容连字符，优雅 */}坑 3：line-height对input无效
症状：给input写line-height: 40px想垂直居中，结果光标上下蹦迪。
真相：input是替换元素，垂直居中得靠height + padding或者 flex。
/* 推荐方案：flex 一把梭 */.input-wrapper{display:flex;align-items:center;height:40px;}实战：从博客到电商，不同场景的“段落配方”
1. 博客正文——文艺青年最爱
需求：字体大、行高足、段间距明显、首行缩进。
.post-body{font-size:18px;line-height:1.8;text-indent:2em;margin:0 auto;max-width:65ch;/* ch ≈ 0 宽，天然响应式 */}.post-body p + p{margin-top:1.4em;/* 段间距，用 em 能随字号联动 */}2. 商品详情——多行省略 + 展开按钮
需求：默认两行，超出省略，点“更多”展开。
.goods-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.goods-desc.expand{-webkit-line-clamp:unset;}btn.addEventListener('click',()=>{desc.classList.toggle('expand');btn.textContent=desc.classList.contains('expand')?'收起':'更多';});3. 用户评论区——防刷屏、防英文爆破
需求：保留换行、长英文断句、网址自动换行。
.comment{white-space:pre-wrap;word-break:break-word;/* 优先断单词，不行再暴力 */overflow-wrap:anywhere;/* 新属性，更温和 */}调试心法：文字不听话，先骂三句再开 DevTools
- 先看父级宽度：是不是被
flex挤扁了？ - 再看字体：某些 webfont 自带巨高
line-height，换字体秒好。 - 再查继承：
line-height写了 1，子元素font-size巨小，肉眼看上去像垂直居中失败。 - 伪元素幽灵：
::before撑高？vertical-align作怪？一行* { outline: 1px solid #f00 }全景扫描，鬼怪现行。
老司机私藏：让文字“呼吸感”爆棚的小阴招
1. 用em做“段间距”，字号联动不翻车
p + p{margin-top:1.2em;/* 字号改，间距自动改，爽 */}2. 用ch单位控制缩进，英文也适用
.en-para{text-indent:4ch;/* 4 个 0 宽，中英文通吃 */}3. 伪元素画“段落装饰线”，逼格 +1
.para-decoration{position:relative;padding-left:1em;}.para-decoration::before{content:'';position:absolute;left:0;top:0.6em;bottom:0.6em;width:3px;background:linear-gradient(to bottom,#ff4d4f,#f759ab);border-radius:2px;}彩蛋：更骚的玩法，怕你接不住
1. CSS 变量动态行高
:root{--lh:1.6;}body{line-height:var(--lh);}@media(max-width:600px){:root{--lh:1.8;/* 小屏字小，行高再松点 */}}2.clamp()响应式字号 + 行高一条龙
html{font-size:clamp(14px,1vw + 1vh,20px);line-height:clamp(1.5,0.2vw + 1.4,1.8);}3.writing-mode竖排中文，弹幕即视感
.vertical{writing-mode:vertical-rl;text-orientation:upright;/* 汉字直立 */letter-spacing:0.2em;/* 竖排时变成字距 */}结语：把字当女朋友，间距是安全感，行高是呼吸口
写页面跟谈恋爱一个理：别贴太紧，也别放太松；留点空白，才有后续故事。
把我这篇丢进收藏夹，下次排版再翻车，直接把代码甩给老板：“看，行业标准。”
祝你从此段落优雅、行高得体、老板闭嘴、工资猛涨——
溜了，工位键盘还在等我续命。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！