你可能还不知的 7 个 CSS 好用的属性-编程学习网

因此，在这篇文章中，向你介绍7个比较少见且好用的 CSS 属性，希望对你有所帮助。

1. vertical-align

CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

baseline：使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如，这意味着这些元素使用此值的表现因浏览器而异。</li> <li>sub：使元素的基线与父元素的下标基线对齐。</li> <li>super：使元素的基线与父元素的上标基线对齐。</li> <li>text-top：使元素的基线与父元素的上标基线对齐。</li> <li>text-bottom：使元素的底部与父元素的字体底部对齐。</li> <li>middle：使元素的中部与父元素的基线加上父元素x-height(译注：x高度)的一半对齐。</li> </ul> <p style="text-align: center;"></p> <p style="text-align: left;">注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。</p> <p>资源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)。</p> <p><strong>2. writing-mode</strong></p> <p>writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它(对于 HTML 文档应该在 html 元素上设置)。它采用以下值之一horizontal-tb (default) | vertical-rl | vertical-lr。</p> <p style="text-align: center;"><a href="https://s1.51cto.com/oss/202004/28/3e4f167b370221d1e3fee13a34af8b5d.png"></a></p> <ul> <li>horizontal-tb：对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。</li> <li>vertical-rl：对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。</li> <li>vertical-lr：对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行左侧。</li> </ul> <p>资源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)。</p> <p><strong>3. font-variant-numeric</strong></p> <p>font-variant-numeric CSS属性控制数字，分数和序号标记的替代字形的使用。</p> <p>它采用以下这些值之一：normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions。</p> <p>此属性对于设置数字样式很有用。根据情况，你可能希望显示老式的数字或带有斜杠的零，对于这些情况，font-feature-settings很有用。</p> <p style="text-align: center;"></p> <p>请注意，font-variant-numeric是font-feature-settings组属性的一部分。诸如font-variant-caps或font-variant-ligatures之类的属性也属于该组。</p> <p>还要注意，像所有font-feature-settings属性一样，你的字体需要实现上述功能才能正常工作。我使用的字体是Fira Sans。</p> <p>资源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)。</p> <p><strong>4. user-select</strong></p> <p>每当我们有不想让用户选择的文本，或者相反，如果发生了双击或上下文单击，希望选择所有文本时，user-select属性将非常有用。</p> <p>此属性采用以下值之一：none | auto | text | all。</p> <p>(1) none：元素及其子元素的文本不可选中。请注意这个Selection 对象可以包含这些元素。从Firefox 21开始， none 表现的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新启用选择。</p> <p>(2) auto</p> <p>auto 的具体取值取决于一系列条件，具体如下：</p> <ul> <li>在 ::before 和 ::after 伪元素上，采用的属性值是 none</li> <li>如果元素是可编辑元素，则采用的属性值是 contain</li> <li>否则，如果此元素的父元素的 user-select 采用的属性值为 all，则该元素采用的属性值也为 all</li> <li>否则，如果此元素的父元素的 user-select 采用的属性值为none，则该元素采用的属性值也为 none</li> <li>否则，采用的属性值为text</li> </ul> <p>(3) text：用户可以选择文本。</p> <p>all：在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。</p> <p style="text-align: center;"></p> <p>资源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)。</p> <p><strong>5. clip-path</strong></p> <p>clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle()。clip-path属性代替了现在已经弃用的剪切 clip属性。</p> <p>此属性采用以下值之一：circle() | ellipse() | polygon() | path() | url()。</p> <p>由于这是对该属性的介绍，因此，这里不会深入研究每个值。</p> <p>我使用最多的两个值是circle和polygon。circle(radius at pair)值有两个参数，第一个参数是圆的半径，第二个参数是表示圆心的点。polygon(pair, pair, pair ...)值取3个或更多的点，表示一个三角形、一个矩形等等。</p> <p style="text-align: center;"><a href="https://s3.51cto.com/oss/202004/28/44881aae37d8262534ba18fdd058e125.png"></a></p> <p><strong>6. shape-outside</strong></p> <p>shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。它采用与clip-path相同的值。</p> <p>clip-path定义用户如何查看元素，shape-outside定义其他HTML元素如何查看元素。</p> <p style="text-align: center;"><a href="https://s4.51cto.com/oss/202004/28/c562b1b645903463ecd2319e1f087d2c.png"></a></p> <p>资源：MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside)。</p> <p><strong>7. background-clip</strong></p> <p>最后，backgroundclip CSS属性设置元素的背景是否扩展到其border 、padding 或content 框之下。</p> <p>此属性采用以下值之一：border-box (default) | padding-box | content-box | text</p> <p style="text-align: center;"></p> <p>资源：MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip)。</p> <p><strong>总结</strong></p> <p>下图是结合上面 7 个属性实现的布局，让大家加深一下印象。</p> <p style="text-align: center;"><a href="https://s2.51cto.com/oss/202004/28/d0325f38c959a1acf3856bc3c83583c1.png"></a></p> <p> </p></div><div class="readOriginal"><a href="http://mp.weixin.qq.com/s?__biz=MzI0NDQ0ODU3MA==&mid=2247486788&idx=1&sn=9053816b6b0f6663e79f55b727927caa&chksm=e95ce111de2b68070f897dacb5d8e1284b241cb1e345e9b65fd61b482414e78d095b2d9af192&mpshare=1&s" class="original">来源：大迁世界</a><a href="/api/report.php?target=https://m.528045.com/article/914800231c.html" class="complain"><span class="artM art_jinggao"></span>内容投诉</a></div><div class="myShow contentBtmshow"><div class="mzsming"><p class="mzsm_title">免责声明：</p><p>① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。 </p><p>② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341</p></div></div><div id="downloader-container" class="page-downloader-container"><div class="page-downloader-tip clear"><h2><span>软考中级</span>精品资料免费领 </h2><ul class="page-downloader-tip-list clear"><li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAnFBMVEX/ZgD/+fH/1LX/r3n/ij3/izz/4Mn/yKH/l1D/pmn/y6X/17r/k0r/gi3/qW7/nVr/bw7/j0T/jkH/wpf/o2X/8eX/uIf/m1f/bAn/59P/chT/u4v/hTP/3ML/fyj/zan/0a//8OL/tYL/79//zqv/dxv/v5L/6NX/eR//n17/xJr/mVP/hzb/gy//fCX/eyL/483/dRj/6tn/gCvKDcjkAAACEklEQVR4nO2ZaXOCMBCGg1RQVMQD76Nqa61ae/3//9bdhA6EaUIiYRw7eb+47IQHJyS7m4U4WXnhgpTXE4NxaDcyAAYd2tMc+tEMGBWNePTZHJqQIIuOzTC7g0ETfqJNBl0zQg5+Ua5xNGPVCalXhIYpiSpCu6l5F2iPalgFOiMxutGoCu07TqtNrVUrG2h4xb4+eomuTQesuhiM+tJFH5hvDOZcjnZO2ftqqV+EXjBfCGYSfoXCMTroyQv19cB0C9A4RgdNhug65of/Ibo7tNAYHOnCB7VdoZp9/i4l9HWyaIu2aIu+Z/TY9zF9oRrioBpyiUAjFbBiHnK7RNqpIElgGOiLEhiXDBTQHebDIpxWzBLhGB30O/O9grkvQHd155pO8O4brJWc7OmvECifksKsLinMNmv+LrV13cutKyXdestYtEVbtEWXQs9mVaEhJc6fqSWL13HAxuig1+haTsC67MRkEN/CU0B/Mh82F7ZSsuOwVKSOTs78WGTIT6S5QkQBPUv/NTQapeLaJipzHaKLNTvkZL4horZCptN5Ym5rQgV8XXb7LWPRFm3R/wadni65444JdCrs+lo0Xrosqo/EAV8o+LQjR6eXurLonLA9IESvCOlfjx7J0LgHi+ojsT7y6DiD3qNjQXf6wxXKkc+ZxxLnLf/gMqL1bRr5yn7qShVxCwKD6vF0MQHuND3uPfwANQcar49so8oAAAAASUVORK5CYII=" alt="" class="page-downloader-tip-item-icon"><span class="page-downloader-tip-item-title">历年真题</span><span class="page-downloader-tip-item-subtitle">答案解析</span></li><li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAq1BMVEUZhf8AAAD///8Zhv9TpP8njf+Mwv/U6P+p0v82lP/G4f/i8P9EnP/x9/9vsv+42f/V6f+byv8ahf9hq/9So/8ZhP8Xhv8ZhP8Zhv8Xh/8kkv/F4P8ahP8cf/8Zhf8civ8Yhf8Zhf8ahf8Zhf8ahf8Vf/8Zhf8Yhv8ZhP8Sf/8Zhv8YhP8Yhf8ahf8Zhf8Zhf8Whf8Zhf8YhP8ZhP8Zh/8ZhP8gf/8Yg/8Zhv9PI83jAAAAOXRSTlP/AP+///////////////////+p//9bTMLpIQf/OxKHJXK7UPmWDJAqaA58VbKf888X8V+mSB8QgNRFi0VFAAAB2UlEQVR4nO3Z6Y6CMBQFYEBgQBH3fXd09n1//ycbsCVit7T0NpmJPb+U6Be4HBoIjnvMfrDcvDra6d4jrkTPn/XZQx5J+gYIdpwaQc/BZJLeXxqjd3AyQU8AZYLemqPvzNFdc3TN0udGJ/0w7PUDcDqJGh5KKwWl4wi7hzR8ONpvluUsHSg6JeB8KjB0QsueF0HQATkNlB4AfXIGj2nSLVSl45MR+7Ffx59DbbpTkpHWwhXUpi9KfUZbAvw10aTL8yha0eZMRJH2GWXGBwJJN1ApigOpa9InV+JhIsEMiC7vtefN0n5arIDaA2Fe5TB00TRGqKVVjQ5KtSbSpH6sRAtkxtqnQotkL9ahhTK9OinQQrnN+IM0LZQZq7U8Ld5n5t2IJC2UO+z7HDmakvFCmieiu6FAk3JeBz+sZwl7/DszGZraZ0bTqtH0nKFoxhkEolndgKFJOfKz8DqhRlc7g1J0tVmcBx2FWTgPF5q0gmrpP0bn1zWO4Jn5/zz+W9rSlra0peXo0WCBvlcOj/7WdPn0z60xeq0v8+hrI/R7vunFCL3ONw2N0B/5poepCfoTdX1lgMZvqsa7CTy9MPcq0x2Yo92hOdpdbYDoLUW707er0ZM2PF5+Ie4XoagbkMfsC8wAAAAASUVORK5CYII=" alt="" class="page-downloader-tip-item-icon"><span class="page-downloader-tip-item-title">备考技巧</span><span class="page-downloader-tip-item-subtitle">名师总结</span></li><li><img src="data:image/png;base64,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" alt="" class="page-downloader-tip-item-icon"><span class="page-downloader-tip-item-title">高频考点</span><span class="page-downloader-tip-item-subtitle">精准押题</span></li></ul><button type="button" lay-on="showLoginPopup" class="el-button page-downloader-tip-button analytics-el el-button--primary"><span>获取网盘下载链接 </span></button></div></div><div class="heigh10"></div><div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">资料下载</li><li>历年真题</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div class="ziliao-box-new"><ul><li><div class="ziliao-icon ziliao-icon-pdf"></div><div class="info"><div class="name"><a href="javascript:void(0);" lay-on="showLoginPopup">2024上半年软考中级软件测评师考试基础知识真题</a></div><p><span>193.9 KB</span><span>下载数265</span></p></div><button class="download-btn"><a style="color: white;" href="javascript:void(0);" lay-on="showLoginPopup">查看</a></button></li><li><div class="ziliao-icon ziliao-icon-pdf"></div><div class="info"><div class="name"><a href="javascript:void(0);" lay-on="showLoginPopup">2024上半年软考中级软件设计师考试基础知识真题</a></div><p><span>191.63 KB</span><span>下载数245</span></p></div><button class="download-btn"><a style="color: white;" href="javascript:void(0);" lay-on="showLoginPopup">查看</a></button></li><li><div class="ziliao-icon ziliao-icon-pdf"></div><div class="info"><div class="name"><a href="javascript:void(0);" lay-on="showLoginPopup">2023下半年-系统集成项目管理工程师-真题考点汇总（完整版）</a></div><p><span>143.91 KB</span><span>下载数1148</span></p></div><button class="download-btn"><a style="color: white;" href="javascript:void(0);" lay-on="showLoginPopup">查看</a></button></li><li><div class="ziliao-icon ziliao-icon-pdf"></div><div class="info"><div class="name"><a href="javascript:void(0);" lay-on="showLoginPopup">2023年下半年系统集成项目管理工程师第一、二、三批次真题考点整理(考友回忆版)</a></div><p><span>183.71 KB</span><span>下载数642</span></p></div><button class="download-btn"><a style="color: white;" href="javascript:void(0);" lay-on="showLoginPopup">查看</a></button></li><li><div class="ziliao-icon ziliao-icon-pdf"></div><div class="info"><div class="name"><a href="javascript:void(0);" lay-on="showLoginPopup">2023年上半年软考中级《系统集成项目管理工程师》-基础知识-考试真题及答案</a></div><p><span>644.84 KB</span><span>下载数2756</span></p></div><button class="download-btn"><a style="color: white;" href="javascript:void(0);" lay-on="showLoginPopup">查看</a></button></li></ul></div></div><div class="layui-tab-item"><div class="exam-box-new"><ul><li><p>2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）</p><div> 难度 <span></span><span></span><span></span><em></em><em></em> 813人已做 </div><a class="download-btn see-btn" href="javascript:void(0);" lay-on="showLoginPopup"> 查看 </a></li><li><p>【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析</p><div> 难度 <span></span><span></span><span></span><em></em><em></em> 354人已做 </div><a class="download-btn see-btn" href="javascript:void(0);" lay-on="showLoginPopup"> 查看 </a></li><li><p>【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析</p><div> 难度 <span></span><span></span><span></span><em></em><em></em> 318人已做 </div><a class="download-btn see-btn" href="javascript:void(0);" lay-on="showLoginPopup"> 查看 </a></li><li><p>2024年上半年软考高项第一、二批次真题考点汇总（完整版）</p><div> 难度 <span></span><span></span><span></span><em></em><em></em> 435人已做 </div><a class="download-btn see-btn" href="javascript:void(0);" lay-on="showLoginPopup"> 查看 </a></li><li><p>2024年上半年系统架构设计师考试综合知识真题</p><div> 难度 <span></span><span></span><span></span><em></em><em></em> 224人已做 </div><a class="download-btn see-btn" href="javascript:void(0);" lay-on="showLoginPopup"> 查看 </a></li></ul></div></div></div></div><div class="article_relate"><div class="relateTop"><h3>相关文章</h3><span class="intro">发现更多好内容</span></div><ul class="clearfix"><li><a href="https://m.528045.com/article/x06cem3azi.html" title="Java 多线程执行到一半停止不动该如何解决？(java多线程执行一半不动如何解决)">Java 多线程执行到一半停止不动该如何解决？(java多线程执行一半不动如何解决)</a></li><li><a href="https://m.528045.com/article/yqcj3jit1e.html" title="Java 分布式锁的工作原理究竟是怎样的？(java分布式锁的工作原理是什么)">Java 分布式锁的工作原理究竟是怎样的？(java分布式锁的工作原理是什么)</a></li><li><a href="https://m.528045.com/article/0a6421f13e.html" title="VGG卷积神经网络模型解析">VGG卷积神经网络模型解析</a></li><li><a href="https://m.528045.com/article/fn35jy317q.html" title="C#中怎样利用 JavaScript 实现客户端重定向？(C#如何使用JavaScript进行客户端重定向)">C#中怎样利用 JavaScript 实现客户端重定向？(C#如何使用JavaScript进行客户端重定向)</a></li><li><a href="https://m.528045.com/article/6e0a3e0181.html" title="评估托管Kubernetes服务的优缺点">评估托管Kubernetes服务的优缺点</a></li><li><a href="https://m.528045.com/article/2883316961.html" title="千里之行丨HUAWEI Developer Day武汉站报名开启！">千里之行丨HUAWEI Developer Day武汉站报名开启！</a></li><li><a href="https://m.528045.com/article/0dce5539e1.html" title="2018年度全球APT报告显示：79个国家和地区受影响">2018年度全球APT报告显示：79个国家和地区受影响</a></li><li><a href="https://m.528045.com/article/0d819aaf23.html" title="浪潮网络发布智能AP 联接全新无线生态里程">浪潮网络发布智能AP 联接全新无线生态里程</a></li><li><a href="https://m.528045.com/article/tib7g06bdj.html" title="Java中用于替换字符的常见方法都有哪些？(Java中常用的替换字符的方法有哪些)">Java中用于替换字符的常见方法都有哪些？(Java中常用的替换字符的方法有哪些)</a></li><li><a href="https://m.528045.com/article/ab8e7838f5.html" title="三分钟了解到底虚拟化平台能做什么？">三分钟了解到底虚拟化平台能做什么？</a></li></ul></div><div class="recommendArticle"><div class="title"><h3>猜你喜欢</h3><span class="intro">AI推送时光机</span></div><div class="list list_wrap"><div class="articleInfor "><a href="/article/914800231c.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">你可能还不知的 7 个 CSS 好用的属性</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/CSS/" title="CSS" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">CSS</a><a href="/tag/网页/" title="网页" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">网页</a><span class="time">2024-12-24</span></div></div><div class="articleInfor "><a href="/article/1fbca6196f.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">15 个你不知道的 CSS 属性</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/Web/" title="Web" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">Web</a><a href="/tag/开发/" title="开发" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">开发</a><span class="time">2024-11-29</span></div></div><div class="articleInfor "><a href="/article/a7722ea47b.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">CSS小知识，分享14个你可能还未用上但又实用的CSS属性（上）</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/CSS属性/" title="CSS属性" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">CSS属性</a><a href="/tag/颜色变换属性/" title="颜色变换属性" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">颜色变换属性</a><span class="time">2024-11-30</span></div></div><div class="articleInfor "><a href="/article/0c008ce85d.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">CSS小知识，分享14个你可能还未用上但又实用的CSS属性（下）</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/CSS/" title="CSS" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">CSS</a><a href="/tag/前端/" title="前端" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">前端</a><span class="time">2024-11-30</span></div></div><div class="articleInfor "><a href="/article/2660c08c7a.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">bpftrace：这个超好用的 Linux 性能工具，你还不知道？</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/bpftrace/" title="bpftrace" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">bpftrace</a><a href="/tag/Linux/" title="Linux" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">Linux</a><span class="time">2024-12-02</span></div></div><div class="articleInfor "><a href="/article/a6dfcac894.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">七个你可能还不知道的强大的 JavaScript 特性</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/JavaScript/" title="JavaScript" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">JavaScript</a><a href="/tag/开发/" title="开发" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">开发</a><span class="time">2024-11-30</span></div></div><div class="articleInfor "><a href="/article/5d3dda323e.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">你可能不知道的package.json属性详解</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><span class="time">2024-04-02</span></div></div><div class="articleInfor "><a href="/article/5b60e24ccc.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">你可能不知道的强大 HTML 属性</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/安全/" title="安全" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">安全</a><span class="time">2024-12-03</span></div></div><div class="articleInfor "><a href="/article/7b6392c086.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">6 个你可能还不知道的 iOS 小细节</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/iOS/" title="iOS" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">iOS</a><a href="/tag/苹果/" title="苹果" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">苹果</a><span class="time">2024-12-03</span></div></div><div class="articleInfor "><a href="/article/9ee248cba9.html"><div class="topCon clearfix"><h3 class="tit">你可能不知道的line-height行高属性使用技巧</h3><div class="img"><img class="lazy" data-src="https://static.528045.com/imgs/18.jpg?imageMogr2/format/webp/blur/1x0/quality/35" alt="你可能不知道的line-height行高属性使用技巧" /></div></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><span class="time">2024-04-23</span></div></div><div class="articleInfor "><a href="/article/898718eef4.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">7个你可能不认识的CSS单位分别是什么</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><span class="time">2024-04-02</span></div></div><div class="articleInfor "><a href="/article/54f1d0b006.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">Python实用技巧，你不知道的7个好玩的Python技巧</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/Python/" title="Python" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">Python</a><a href="/tag/编程语言/" title="编程语言" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">编程语言</a><span class="time">2024-12-11</span></div></div><div class="articleInfor "><a href="/article/109511ac76.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">你可能不知道的15个有用的Github功能</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/GitHub/" title="GitHub" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">GitHub</a><a href="/tag/工具/" title="工具" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">工具</a><span class="time">2024-12-11</span></div></div><div class="articleInfor "><a href="/article/5315bfaf8b.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">8个超实用的iPhone隐藏功能和技巧，你可能还不知道</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/苹果/" title="苹果" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">苹果</a><a href="/tag/技巧/" title="技巧" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">技巧</a><span class="time">2024-12-03</span></div></div><div class="articleInfor "><a href="/article/b255160ec1.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">这三个好用的python函数你不能不知道!</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><span class="time">2024-04-02</span></div></div><div class="articleInfor "><a href="/article/c580df082b.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">微信几次大更新后，你可能还不知道这8个好用小技巧</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/微信/" title="微信" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">微信</a><a href="/tag/小技巧/" title="小技巧" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">小技巧</a><span class="time">2024-12-24</span></div></div><div class="articleInfor "><a href="/article/6d1f65ff56.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">你可能不知道的五个实用的 Python 模块</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/Python/" title="Python" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">Python</a><a href="/tag/编程语言/" title="编程语言" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">编程语言</a><span class="time">2024-12-02</span></div></div><div class="articleInfor "><a href="/article/6d3339f088.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">你可能不知道但却很有用的 Java 特性</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/Java/" title="Java" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">Java</a><a href="/tag/特定/" title="特定" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">特定</a><span class="time">2024-12-02</span></div></div><div class="articleInfor "><a href="/article/ece7947804.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">6个你可能还不知道的微信冷知识，每一个都令人相见恨晚</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/微信/" title="微信" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">微信</a><a href="/tag/朋友圈/" title="朋友圈" class="ren-summary-tag t" style="color: #fff!important;background-color: #9961dd;">朋友圈</a><span class="time">2024-12-03</span></div></div><div class="articleInfor "><a href="/article/6fab3977fb.html"><div class="topCon clearfix"><h3 class="tit" style="width: 100%!important;">十个你可能不曾用过的Linux命令！巨好用！</h3></div></a><div class="info"><a href="https://m.528045.com/article/program-c4-1.html"><span class="icon icon_flag">后端开发</span></a><a href="/tag/Linux/" title="Linux" class="ren-summary-tag t" style="color: #fff!important;background-color: #958ef2;">Linux</a><span class="time">2024-12-24</span></div></div></div></div><div class="breadNav"> 位置：<a class="LinkPath" href="http://m.528045.com/">首页</a>-<a class="LinkPath" href="https://m.528045.com/article/">资讯</a>-<a href="https://m.528045.com/article/program-c4-1.html">后端开发</a></div><div class="noMoreData"> 咦！没有更多了？去看看其它<a href="https://m.528045.com/">编程学习网</a> 内容吧 </div></div><div class="popCommon"></div><div class="btmNav"><a href="/" class="btmNavItem"><img src="https://static.528045.com/m/index.svg"><span class="name">首页</span></a><a href="/course/" class="btmNavItem"><img src="https://static.528045.com/m/wish.svg"><span class="name">课程</span></a><a href="/down/" class="btmNavItem"><div class="guide"></div><img class="pubImg" src="https://static.528045.com/m/btn_new.png"><span class="name">资料下载</span></a><a href="/ask/" class="btmNavItem"><img src="https://static.528045.com/m/msg.svg"><span class="name">问答</span><span class="num"></span></a><a href="/article/" class="btmNavItem btmMe on"><img src="https://static.528045.com/m/me_on.svg"><span class="name">资讯</span></a></div><script src="https://m.528045.com/static/layui/layui.js" type="text/javascript"></script><script src="https://m.528045.com/static/js/custom-script.js" type="text/javascript"></script><script src="https://m.528045.com/static/js/indexsms.js?v=20240108.1443"></script><script src="https://m.528045.com/static/skin/static/js/content.js"></script></body></html>

文章详情

你可能还不知的 7 个 CSS 好用的属性