教程前端【免费下载链接】css-protipsA collection of tips to help take your CSS skills pro. 项目地址https://gitcode.com/gh_mirrors/cs/css-protips点击查看免费下载本文以 css-protips 仓库的葡萄牙语欧洲翻译版 READMEtranslations/pt-PT/README.md为绝对主线系统讲解其中收录的 25 条 CSS 实战技巧覆盖样式重置、选择器进阶、排版字体、布局方案与表单/组件细节等场景并结合仓库主 README.md 与 CONTRIBUTING.md 进行原理深化与交叉印证。读完本文你将获得一批可复制、可运行、带浏览器兼容性说明的 CSS 代码片段并理解它们背后的盒模型、选择器优先级与响应式机制。一、项目与文档背景css-protips 是一个精选 CSS 技巧集合仓库根目录 README.md 的定位是A collection of tips to help take your CSS skills pro一个帮你把 CSS 技能提升到专业水准的技巧集合。仓库将主 README 翻译为 15 种语言存放在 translations 目录下本篇文章的主体即其中的欧洲葡萄牙语版本 translations/pt-PT/README.md。需要说明的是主 README 在 Translations 一节中明确提示翻译文件可能不会包含主 README 的全部技巧——因为每新增一条技巧都需要同步十几种语言维护成本很高。因此本文以 pt-PT 版 README 收录的 25 条技巧为骨架展开并在最后一节补充主 README 中尚未同步进该翻译的 4 条扩展技巧供读者对照学习。根据 pt-PT 版 README 末尾的Suporte支持声明本集合中的技巧面向Chrome、Firefox、Safari、Edge 的当前版本编写时不必为这些主流浏览器的现代实现做过多降级处理。二、从零开始样式重置的三条思路1. 使用 CSS Reset重置样式不同浏览器对元素的默认样式margin、padding、字体等各不相同重置样式可以抹平差异为后续样式编写提供一个干净一致的起点。pt-PT 版 README 给出的最简化方案如下*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }该规则同时作用于元素本身及其::before/::after伪元素将它们的外边距、内边距全部清零并把盒模型统一为border-box。从仓库根 README.md 可以看到同样的写法说明这是项目推荐的基础模板。注意如果你采用了下面第 2 条继承box-sizing的技巧可以在 Reset 中省略box-sizing声明避免重复设置。2. 让box-sizing从html继承与其在每个元素上直接写box-sizing: border-box不如让该属性从根元素继承html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }这样做的价值在于可覆写性默认情况下所有元素都是border-box但当你引入某个插件或第三方组件、其内部元素需要改用content-box计算尺寸时只需在该组件根节点上设置box-sizing: content-box其内部后代便会因继承机制自动跟随无需逐个覆盖。这正是 README.md 中所述让插件或其他行为不同的组件更容易改变box-sizing的原因。3. 用unset代替逐条重置属性重置一个元素例如button时传统做法是逐条清零button { background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0; }而 CSS 提供了all简写属性配合关键字unset一行即可完成等效重置button { all: unset; }原理是unset对继承属性等价于inherit恢复为父元素的计算值对非继承属性等价于initial恢复为规范定义的初始值。因此all: unset会把按钮的背景、边框、字体、内边距等一次性打回原形之后再按需重新声明样式。这一技巧在 README.md 中同样收录是项目认可的高效写法。三、选择器进阶更精准、更简洁地命中元素4. 用:not()应用/移除导航边框为导航项加分隔边框时常见做法是先给所有li加边框、再单独去掉最后一项/* 先加边框 */ .nav li { border-right: 1px solid #666; } /* 再移除最后一项的边框 */ .nav li:last-child { border-right: none; }两条规则互相打架、且需要额外的覆盖声明。改用:not()伪类后一条规则即可表达完整意图.nav li:not(:last-child) { border-right: 1px solid #666; }正如 pt-PT 版 README 所言这个选择器的写法就像人类描述需求一样直观给不是最后一项的元素加边框。:not()是函数式伪类可以嵌套其他选择器在本集合中被反复使用见第 6、10、12、18、19 节。5. 用负nth-child选取第 1 到第 n 项:nth-child()接受AnB形式的公式当A为负数时匹配范围变为从第 1 项到第 B 项。例如选取前 3 项并显示li { display: none; } /* 显示第 1 到第 3 项 */ li:nth-child(-n 3) { display: block; }结合已学的:not()还可以反选/* 选取除前 3 项以外的所有项 */ li:not(:nth-child(-n 3)) { display: none; }仓库证据对照pt-PT 版 README 中该反选示例的代码为display: none而其注释文字选取除前 3 项外的所有项并显示与代码存在出入对照主 README.md 可发现主版本已将该规则修正为display: block。阅读翻译版时请以主 README 的修正为准。6. 使用 Lobotomized Owl裂脑猫头鹰选择器这个名字听起来很怪但它由通配选择器*与相邻兄弟选择器组合而成能力非常强大* * { margin-top: 1.5em; }* *匹配文档流中紧跟在其他元素之后的元素即除了第一个元素外的所有元素。因此一条规则就能为列表、段落、标题等所有相邻元素统一设置margin-top实现均匀的垂直间距无需为每种标签分别写规则。这在排版类页面上尤其省事。7. 用属性选择器展示空链接当一个a标签没有文本内容、但带有href属性时页面上会出现一个不可见的死链接。可以用属性选择器 :empty伪类让它现形a[href^http]:empty::before { content: attr(href); }a[href^http]选取href以http开头的链接:empty匹配无任何内容的元素attr(href)则把href属性的值作为content显示出来。这样空链接会自动展示其目标地址便于用户识别。需要提醒的是原文档的注意事项此类技巧对屏幕阅读器可能不够友好且 CSS 生成的内容无法被浏览器复制粘贴请谨慎使用。8. 为默认链接定义样式CMS内容管理系统自动插入的链接往往不带class属性可以通过无 class 的有href链接这一特征为它们单独定义样式而不影响其他受控链接a[href]:not([class]) { color: #008000; text-decoration: underline; }:not([class])表示没有 class 属性的元素与a[href]组合后恰好命中默认裸链接。这样来自 CMS 的链接获得统一的绿色下划线样式又不会通过级联污染页面中其他链接。四、字体与排版从加载到度量9. 先检查字体是否已本地安装使用font-face加载自定义字体时可以先检查系统是否已安装该字体命中则跳过远程下载这既是性能优化也能避免网络字体闪烁font-face { font-family: Dank Mono; src: /* 字体全名 */ local(Dank Mono), /* PostScript 名称 */ local(Dank-Mono), /* 均未命中时再从服务器下载 */ url(//...a.server/fonts/DankMono.woff); } code { font-family: Dank Mono, system-ui-monospace; }src中local()依次尝试字体的全名与 PostScript 名两者在不同系统上可能不一致所以都列出全部未命中时才回退到url()下载。示例同时展示了字体栈兜底system-ui-monospace作为通用后备保证code元素在任意环境下都有等宽字体可用。10. 把line-height写在body上无需为每个p、h1~h6分别设置行高只需在body上声明一次body { line-height: 1.5; }line-height是继承属性所有文本元素都会从body继承该值正文因此获得一致的阅读节奏也便于全局统一调整。11. 全局尺寸用rem局部尺寸用em在根元素设定基准字号html { font-size: 100%; }后正文文本元素使用相对自身的emh2 { font-size: 2em; } p { font-size: 1em; }而模块级组件级字号使用相对根元素的remarticle { font-size: 1.25rem; } aside .module { font-size: 0.9rem; }这样的分工逻辑是em随父级字号缩放适合与上下文联动的文本元素rem始终相对根字号适合模块自包含、不受嵌套影响的组件尺寸。模块之间相互隔离维护与调整都更灵活。12. 用:root实现随视口缩放的灵活排版响应式布局中字号应能随视口大小自适应。可以在:root上用calc()把视口宽高纳入字号计算:root { font-size: calc(1vw 1vh 0.5vmin); }1vw为视口宽度的 1%1vh为视口高度的 1%0.5vmin为视口较小边的 0.5%。三者相加得到一个随视口变化的基准字号。之后正文即可用rem单位引用它body { font: 1rem/1.6 sans-serif; }由于rem始终相对:root的字号只要根字号随视口变化整棵文档树中所有rem尺寸都会联动缩放实现一行代码驱动的流式排版。五、布局实战居中、等宽与比例13. 垂直居中Flexbox 与 Grid 两种方案垂直居中不是黑魔法。用 Flexbox 时先让html、body撑满视口高度再让body成为弹性容器并开启交叉轴居中html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }pt-PT 版保留了-webkit-/-ms-前缀写法以便兼容旧引擎对照主 README.md 可看到现代写法还补充了justify-content: center可同时实现水平居中。用 CSS Grid 则更简洁body { display: grid; height: 100vh; margin: 0; place-items: center center; }place-items: center center是align-items与justify-items的简写一行同时完成主轴与交叉轴居中主 README 中写作place-items: center效果相同。14. 纯 CSS 滑块max-heightoverflow不借助 JavaScript仅用max-height与溢出控制即可实现展开式滑块.slider { max-height: 200px; overflow-y: hidden; width: 300px; } .slider:hover { max-height: 600px; overflow-y: scroll; }默认状态下内容被max-height: 200px截断并隐藏溢出部分悬停时max-height增大到 600px内容展开配合overflow-y: scroll呈现可滚动滑块效果。注意max-height的动画过渡只对不超过该值的部分平滑且该技巧是尽力展开内容超出上限时仍需滚动查看。15. 表格等宽单元格table-layout: fixed表格布局难缠为表格设置table-layout: fixed即可让所有单元格保持相同宽度.calendar { table-layout: fixed; }table-layout: auto默认值会让浏览器根据内容自动分配列宽同一列可能忽宽忽窄fixed则忽略内容、按既定宽度均分列列宽由此可预测、稳定非常适合日历、数据网格等需要等宽对齐的场景。16. 告别 margin hack用 Flexbox 的space-between为多列布局留出等宽 gutter 时传统做法依赖nth-、first-、last-child各种 hack改用 Flexbox 后一条属性即可搞定.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }justify-content: space-between会把第一项贴左、最后一项贴右中间项目均匀分布剩余空间自动成为列间距配合flex-basis: 23%控制每项基础宽度。无论项目数量如何变化gutter 始终保持均匀无需再写条件选择器。17. 固定宽高比的盒子内联比例技巧要创建一个宽高比固定的容器只需在父 div 上设置padding-bottom或padding-top因为百分比 padding 是相对包含块宽度计算的.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }padding-bottom: 20%意味着内边距高度恒等于容器宽度的 20%而height: 0使容器总高就是该 padding 值。子元素通过绝对定位铺满容器其实际高度即为宽度的 20%宽高比恒为 100% / 20% 5:1且与视口宽度无关。这是经典内联比例盒子Intrinsic Ratio Box实现常用于嵌入视频、图片占位等场景。六、组件细节列表、图标、表单与多媒体18. 逗号分隔列表把普通ul变成真·逗号分隔列表ul li:not(:last-child)::after { content: ,; }:not(:last-child)保证最后一个li不加逗号:after伪元素在其余每项末尾插入逗号字符。可访问性警告原文档明确标注此技巧对屏幕阅读器可能不友好且 CSS 生成的内容无法被浏览器复制粘贴请谨慎用于正式内容。19. 图标优先使用 SVGSVG 矢量图标在任何分辨率下都清晰锐利浏览器支持可回溯到 IE9完全有理由取代.png、.jpg乃至.gif位图方案.logo { background: url(logo.svg); }若存在仅图标按钮且 SVG 加载失败可以补一条降级规则借助attr()把aria-label属性渲染为文字保持可访问性.no-svg .icon-only::after { content: attr(aria-label); }20. 为表单元素设置可见的:focus样式依赖键盘操作的视障用户需要清晰的焦点指示来判断键盘事件落点。与其依赖浏览器默认的焦点样式不如统一声明a:focus, button:focus, input:focus, select:focus, textarea:focus { box-shadow: none; outline: #000 dotted 2px; outline-offset: 0.05em; }outline: #000 dotted 2px提供高对比度的虚线焦点环outline-offset: 0.05em让焦点环与元素保持少量间距、视觉上更醒目同时移除box-shadow避免与其他样式如输入框阴影混淆。21. 表单font-size: 16px杜绝移动端自动缩放iOS Safari 等移动浏览器在聚焦表单输入框时若字号小于 16px 会自动放大页面造成糟糕的交互体验。解决办法是在表单元素上显式设置不小于 16px 的字号input[typetext], input[typenumber], select, textarea { font-size: 16px; }命中文本、数字输入框、下拉框与多行文本框让移动端不再莫名缩放。22. 美化破损图片图片加载失败时浏览器会显示默认的破图图标用一点 CSS 即可让错误状态变得体面img { display: block; font-family: sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; }再配合伪元素展示提示信息与图片地址img::before { content: Desculpe, a imagem abaixo não pode ser carregada :(; display: block; margin-bottom: 10px; } img::after { content: (url: attr(src) ); display: block; font-size: 12px; }::before渲染友好提示文案::after通过attr(src)输出原图的 URL 引用帮助定位问题来源。图片本身则用display: block、width: 100%、height: auto保证正常加载时也具有良好的流体表现。23. 隐藏未静音的自播放视频写自定义用户样式表User Stylesheet时可以用这条规则避免自动播放视频的声音打扰用户video[autoplay]:not([muted]) { display: none; }video[autoplay]命中声明了autoplay属性的视频:not([muted])排除已静音者——即凡自动播放且未静音的视频一律隐藏。这再次体现了:not()伪类的实用价值。24. 用pointer-events控制鼠标交互pointer-events属性控制元素如何响应指针鼠标/触控事件。禁用按钮的默认指针交互可以这样写button:disabled { opacity: 0.5; pointer-events: none; }pointer-events: none使元素不接收任何指针事件配合opacity: 0.5的视觉弱化让禁用状态既看着不可点也实际不可点无需额外 JavaScript 拦截。25. 隐藏被当作间距使用的换行标签有些 CMS 使用者会用多余的br制造段落间距。可以收编这类行为让连续换行不产生视觉空隙br br { display: none; }br br匹配紧跟在另一个br之后的br即连续换行中的第二个及其后的所有换行——它们会被隐藏从而阻止通过堆叠换行伪造间距的做法。七、主 README 中的扩展技巧尚未同步至 pt-PT 翻译由于翻译维护成本translations/pt-PT/README.md 未包含主 README.md 中较新的 4 条技巧这里一并列出供参考。aspect-ratio替代固定宽高现代浏览器可用原生aspect-ratio属性保持宽高比配合object-fit防止图片尺寸变化引起布局抖动img { aspect-ratio: 16 / 9; /* 宽 / 高 */ object-fit: cover; }这是第 17 节padding 比例盒子的现代替代方案。:is()精简选择器并管理优先级:is()可一次匹配多个选择器大幅减少冗余详见 README.md:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { color: green; }等价于写全 24 条组合规则注意:is()的优先级取其参数列表中的最高者。:empty隐藏空元素CMS 或脚本动态注入的空元素如p classerror-message/p会占用版面空间可用:empty隐藏详见 README.md:empty { display: none; }注意包含空白字符的元素不算空如p /p不会命中该选择器。margin-inline/margin-block逻辑属性用逻辑属性替代物理方向的 margin详见 README.md.div { margin-inline: auto; /* 替代 margin-left/right */ } .div { margin-block: auto; /* 替代 margin-top/bottom */ }八、参与贡献与代码风格约定本仓库欢迎新增技巧具体流程见 贡献指南pt-PT 版 README 中的../../CONTRIBUTING.md相对链接即指向仓库根目录的该文件。贡献指南值得注意的约定包括新增技巧须添加在主 README.md 末尾并在目录底部补充锚点链接代码格式遵循 CSSLint 默认规范两个空格缩进、使用简写属性如margin: 10px 10px 0.5rem;、字符串用双引号、数值保留前导零如padding: 0.75rem;、属性按字母序排列等见 CONTRIBUTING.md。这也意味着本文所有代码片段均与项目约定的风格一致可直接粘贴使用。九、兼容性与总结pt-PT 版 README 的Suporte声明与主 README 一致本集合面向Chrome、Firefox、Safari、Edge 的当前版本。文中多数技巧:not()、nth-child、Flexbox、Grid、font-face的local()等在现代浏览器中均稳定可用个别技巧如aspect-ratio、:is()属较新特性使用时请结合实际项目的浏览器支持范围判断。25 条技巧贯穿了 CSS 的几大核心议题重置与盒模型第 1–3 条、选择器表达力第 4–8 条、字体与度量单位第 9–12 条、布局方案第 13–17 条以及组件与可访问性细节第 18–25 条。每条都是可直接复制的最小代码单元理解了它们背后的原理就能把这些模式迁移到自己的项目中——这正是 css-protips 集合让你的 CSS 技能更专业的初衷。想继续深入可对照阅读仓库中的 主 README 及各语言 translations 目录下的翻译版本。赞分享教程前端【免费下载链接】css-protipsA collection of tips to help take your CSS skills pro. 项目地址https://gitcode.com/gh_mirrors/cs/css-protips点击查看免费下载相关推荐CAI 安全评估报告 Agent基于 system_reporting_agent 提示词构建专业 HTML 安全报告CAI 安全评估报告 Agent基于 system_reporting_agent 提示词构建专业 HTML 安全报告 安全评估的最后一公里是报告——将渗教程前端探索CSS高级技巧CSS Protips库的全面解析探索CSS高级技巧CSS Protips库的全面解析 div aligncenter img src./assets/img/bulb.svg教程前端Refine 项目中的 CSS Box Shadow 全面指南属性解析与 25 个可直接复用的实战示例Refine 项目中的 CSS Box Shadow 全面指南属性解析与 25 个可直接复用的实战示例 CSS box shadow 属性是前端开发中为元素添前端企业应用上一篇Windows 11系统优化革命Win11Debloat如何让你重获数字自由下一篇猫抓Cat-Catch终极指南三分钟掌握网页视频音频资源下载创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考