CSS中比较少见且好用的七个属性

学习CSS是构建好看网页的一种方式。 但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。 毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。

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

1. vertical-align

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

就像定义说的，这个属性允许你垂直对齐文本。它对于顺序指示器(st, nd等)、需要的输入星号(*)或没有正确居中的图标特别有用。vertical-align取其中一个值:super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom，或从基线开始的长度(px，%， em, rem等等)。

baseline: 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如 ，这意味着这些元素使用此值的表现因浏览器而异。</p><p>**sub：**使元素的基线与父元素的下标基线对齐。</p><p>**super：**使元素的基线与父元素的上标基线对齐。</p><p>**text-top：**使元素的基线与父元素的上标基线对齐。</p><p>**text-bottom：**使元素的底部与父元素的字体底部对齐。</p><p>**middle：**使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。</p><p></p><blockquote><p>注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。</p></blockquote><p><strong>2. writing-mode</strong></p><p>writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它（对于 HTML 文档应该在 html 元素上设置）。 它采用以下值之一horizontal-tb (default) | vertical-rl | vertical-lr。</p><p><img src='https://www.492034.com/uploadfile/5a/e5163ced.webp' /></p><p>**horizontal-tb：**对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。</p><p>**vertical-rl：**对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。</p><p>**vertical-lr：**对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行左侧。</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>请注意，font-variant-numeric是font-feature-settings组属性的一部分。 诸如font-variant-caps或font-variant-ligatures之类的属性也属于该组。</p><p><strong>4. user-select</strong></p><p>每当我们有不想让用户选择的文本，或者相反，如果发生了双击或上下文单击，希望选择所有文本时，user-select属性将非常有用。</p><p>此属性采用以下值之一：none | auto | text | all。</p><p>**none：**元素及其子元素的文本不可选中。 请注意这个Selection 对象可以包含这些元素。 从Firefox 21开始， none 表现的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新启用选择。</p><p>auto</p><p>auto 的具体取值取决于一系列条件，具体如下：</p><p>在 ::before 和 ::after 伪元素上，采用的属性值是 none</p><p>如果元素是可编辑元素，则采用的属性值是 contain</p><p>否则，如果此元素的父元素的 user-select 采用的属性值为 all，则该元素采用的属性值也为 all</p><p>否则，如果此元素的父元素的 user-select 采用的属性值为none，则该元素采用的属性值也为 none</p><p>否则，采用的属性值为text</p><p>**text：**用户可以选择文本。</p><p>**all：**在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。</p><p><img src='https://www.492034.com/uploadfile/32/edc22082.webp' /></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></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></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></p><p>以上就是CSS中7个你必须知道属性的详细内容，更多请关注其它相关文章！</p> </div> <div class="diggit"><a href="#"> 很赞哦！ </a></div> <div class="clear"></div> <div class="keywords"> </div> <div class="share"> <div class="share-text"> <p>转载请说明来源于"热门IT资讯网"</p> <p>本文地址：<a href="https://www.492034.com/a454169" target="_blank">https://www.492034.com/a454169</a></p> </div> </div> <div class="clear"></div> </div> </div> <div class="clear blank"></div> <div class="otherlink whitebg"> <div class="news-title"> <h2>相关文章</h2> </div> <ul> <li><a href="https://www.492034.com/a459863" title="微信自带浏览器跳转appstore失效">微信自带浏览器跳转appstore失效</a></li> <li><a href="https://www.492034.com/a459862" title="PHP接收get、post 、json格式数据">PHP接收get、post 、json格式数据</a></li> <li><a href="https://www.492034.com/a459861" title="Yii2.0框架Restfull API开发攻略">Yii2.0框架Restfull API开发攻略</a></li> <li><a href="https://www.492034.com/a459860" title="PHP 安装于配置">PHP 安装于配置</a></li> <li><a href="https://www.492034.com/a459859" title="App上传应用市场的步骤有哪些能上传哪些应用市场">App上传应用市场的步骤有哪些能上传哪些应用市场</a></li> <li><a href="https://www.492034.com/a459858" title="unity3D与网页的交互---做项目的一点总结">unity3D与网页的交互---做项目的一点总结</a></li> <li><a href="https://www.492034.com/a459857" title="人工智能学习难度大吗 选择Python入门怎么样">人工智能学习难度大吗 选择Python入门怎么样</a></li> <li><a href="https://www.492034.com/a459856" title="原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道">原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道</a></li> <li><a href="https://www.492034.com/a459855" title="auto_mysqldump_data.sh">auto_mysqldump_data.sh</a></li> <li><a href="https://www.492034.com/a459854" title="利用curl监控web返回状态码监控web service">利用curl监控web返回状态码监控web service</a></li> <!-- <li><a target="_blank" href="/">制作是这么收费的？</a></li> --> </ul> </div> </div> <!-- . end of left-box --> <!-- right aside start--> <aside class="side-section right-box"> <div class="side-tab"> <ul id="sidetab"> <li class="sidetab-current">站长推荐</li> <li>点击排行</li> </ul> <div id="sidetab-content"> <section> <div class="tuijian"> <section class="topnews imgscale"><a href="https://www.492034.com/a459865" title="一季度中国IT安全硬件市场规模同比增长14.5%"><img src="https://www.492034.com/uploadfile/thumb/c9f0f895fb98ab9159f51fd0297e236d/278x185_auto.jpg" alt="一季度中国IT安全硬件市场规模同比增长14.5%"><span>一季度中国IT安全硬件市场规模同比增长14.5%</span></a></section> <ul> <li><a href="https://www.492034.com/a459864" title="小米 MIUI 13.5 升级名单曝光，Android 11 机型或被抛弃"><i><img src="https://www.492034.com/uploadfile/thumb/eccbc87e4b5ce2fe28308fd9f2a7baf3/70x70_auto.jpg" alt="小米 MIUI 13.5 升级名单曝光，Android 11 机型或被抛弃"></i> <p>小米 MIUI 13.5 升级名单曝光，Android 11 机型或被抛弃</p> </a></li> <li><a href="https://www.492034.com/a459859" title="App上传应用市场的步骤有哪些能上传哪些应用市场"><i><img src="https://www.492034.com/uploadfile/thumb/34/66a3b49a.webp" alt="App上传应用市场的步骤有哪些能上传哪些应用市场"></i> <p>App上传应用市场的步骤有哪些能上传哪些应用市场</p> </a></li> <li><a href="https://www.492034.com/a459857" title="人工智能学习难度大吗 选择Python入门怎么样"><i><img src="https://www.492034.com/uploadfile/thumb/6f/151b5a8a.webp" alt="人工智能学习难度大吗 选择Python入门怎么样"></i> <p>人工智能学习难度大吗 选择Python入门怎么样</p> </a></li> <li><a href="https://www.492034.com/a459856" title="原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道"><i><img src="https://www.492034.com/uploadfile/thumb/02/7ca1dc6b.webp" alt="原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道"></i> <p>原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道</p> </a></li> </ul> <section class="topnews imgscale"><a href="https://www.492034.com/a459852" title="关于HTML5的简单理解"><img src="https://www.492034.com/uploadfile/thumb/84/89f54657.webp" alt="关于HTML5的简单理解"><span>关于HTML5的简单理解</span></a></section> <ul> <li><a href="https://www.492034.com/a459846" title="想知道HTML5培训班值不值得去参加"><i><img src="https://www.492034.com/uploadfile/thumb/0d/0af1469c.webp" alt="想知道HTML5培训班值不值得去参加"></i> <p>想知道HTML5培训班值不值得去参加</p> </a></li> <li><a href="https://www.492034.com/a459845" title="客户端热更新框架之UI热更框架设计(下)"><i><img src="https://www.492034.com/uploadfile/thumb/95/ce151df2.webp" alt="客户端热更新框架之UI热更框架设计(下)"></i> <p>客户端热更新框架之UI热更框架设计(下)</p> </a></li> <li><a href="https://www.492034.com/a459836" title="unity3d游戏开发优化简单说明"><i><img src="https://www.492034.com/uploadfile/thumb/b9/2374e783.webp" alt="unity3d游戏开发优化简单说明"></i> <p>unity3d游戏开发优化简单说明</p> </a></li> <li><a href="https://www.492034.com/a459833" title="程序猿的一天"><i><img src="https://www.492034.com/uploadfile/thumb/ec/cb9eba12.webp" alt="程序猿的一天"></i> <p>程序猿的一天</p> </a></li> </ul> </div> </section> <section> <div class="paihang"> <section class="topnews imgscale"><a href="https://www.492034.com/a398653" title="asp后段调用python的方法"><img src="https://www.492034.com/static/assets/images/nopic-9.webp" alt="asp后段调用python的方法"><span>asp后段调用python的方法</span></a></section> <ul> <li><i></i><a href="https://www.492034.com/a248188" title="如何应用AJAX进行注册用户即时检测">如何应用AJAX进行注册用户即时检测</a></li> <li><i></i><a href="https://www.492034.com/a389738" title="Springboot+echarts实现可视化">Springboot+echarts实现可视化</a></li> <li><i></i><a href="https://www.492034.com/a446859" title="ckeditor4.5.1配置图片上传的方法">ckeditor4.5.1配置图片上传的方法</a></li> <li><i></i><a href="https://www.492034.com/a101824" title="Angular中与视图有关的定义有哪些">Angular中与视图有关的定义有哪些</a></li> <li><i></i><a href="https://www.492034.com/a170705" title="织梦自定义表单制作在线订单的方法">织梦自定义表单制作在线订单的方法</a></li> <li><i></i><a href="https://www.492034.com/a100119" title="undo_retention之确定最优的撤销保留时间">undo_retention之确定最优的撤销保留时间</a></li> <li><i></i><a href="https://www.492034.com/a64933" title="以太坊生态系统中的开发工具和技术有哪些">以太坊生态系统中的开发工具和技术有哪些</a></li> <li><i></i><a href="https://www.492034.com/a94442" title="ORA-600：[qertbGetPartitionNumber:qesma2],[],[],[]">ORA-600：[qertbGetPartitionNumber:qesma2],[],[],[]</a></li> </ul> <section class="topnews imgscale"><a href="https://www.492034.com/a44464" title="kbengine+cocos2djs的mmorpg游戏demo是怎么样的"><img src="https://www.492034.com/static/assets/images/nopic-5.webp" alt="kbengine+cocos2djs的mmorpg游戏demo是怎么样的"><span>kbengine+cocos2djs的mmorpg游戏demo是怎么样的</span></a></section> </div> </section> </div> </div> <div class="whitebg cloud"> <h2 class="side-title">标签云</h2> <ul> <a target="_blank" href="https://www.492034.com/tag-100248.html">服务器不能远程桌面</a> <a target="_blank" href="https://www.492034.com/tag-2377870.html">选择外国服务器安全吗</a> <a target="_blank" href="https://www.492034.com/tag-2300001.html">女大学生预防网络安全的措施</a> <a target="_blank" href="https://www.492034.com/tag-2099808.html">网络安全有哪些含金量的证书</a> <a target="_blank" href="https://www.492034.com/tag-102283.html">服务器打开很卡</a> <a target="_blank" href="https://www.492034.com/tag-100027.html">服务器网站模板</a> <a target="_blank" href="https://www.492034.com/tag-100007.html">腾讯云服务器解析域名</a> <a target="_blank" href="https://www.492034.com/tag-2146.html">php 数据库的安全性</a> <a target="_blank" href="https://www.492034.com/tag-126.html">mysql数据库的安全性</a> <a target="_blank" href="https://www.492034.com/tag-2377747.html">服务器云安全费用</a> <a target="_blank" href="https://www.492034.com/tag-100357.html">服务器最大允许连接数</a> <a target="_blank" href="https://www.492034.com/tag-102503.html">云服务器 部署网站</a> <a target="_blank" href="https://www.492034.com/tag-100028.html">linux 跳转服务器</a> <a target="_blank" href="https://www.492034.com/tag-100008.html">服务器可以挖矿吗</a> <a target="_blank" href="https://www.492034.com/tag-200003.html">群晖搭建app服务器</a> <a target="_blank" href="https://www.492034.com/tag-100303.html">deepin 服务器版</a> <a target="_blank" href="https://www.492034.com/tag-278.html">数据库文件安全</a> <a target="_blank" href="https://www.492034.com/tag-2100004.html">校园信息网络安全稳定</a> <a target="_blank" href="https://www.492034.com/tag-1999997.html">幼儿园网络安全教育拍手歌</a> <a target="_blank" href="https://www.492034.com/tag-301072.html">本地怎么连接服务器hive</a> </ul> </div> <div class="clear blank"></div> <div class="whitebg suiji"> <h2 class="side-title">猜你喜欢</h2> <ul> <li><a href="https://www.492034.com/a225529" title="agilent3070软件安装">agilent3070软件安装</a></li> <li><a href="https://www.492034.com/a338912" title="怎么使用纯HTML的通用数据管理和服务">怎么使用纯HTML的通用数据管理和服务</a></li> <li><a href="https://www.492034.com/a393476" title="Python+opencv 实现图片文字的分割的方法示例">Python+opencv 实现图片文字的分割的方法示例</a></li> <li><a href="https://www.492034.com/a339690" title="Files与Paths类怎么在java项目中使用">Files与Paths类怎么在java项目中使用</a></li> <li><a href="https://www.492034.com/a412022" title="查看jupyter文件位置的方法">查看jupyter文件位置的方法</a></li> <li><a href="https://www.492034.com/a24088" title="uni-app中弹窗的使用与自定义弹窗的方法">uni-app中弹窗的使用与自定义弹窗的方法</a></li> <li><a href="https://www.492034.com/a326688" title="Python接入MySQL如何实现增删改查">Python接入MySQL如何实现增删改查</a></li> <li><a href="https://www.492034.com/a123239" title="怎么给Linux发行版添加漂亮的字体">怎么给Linux发行版添加漂亮的字体</a></li> <li><a href="https://www.492034.com/a147264" title="如何解决jvm内存溢出java.lang.OutOfMemoryError: GC overhead limit exceeded问题">如何解决jvm内存溢出java.lang.OutOfMemoryError: GC overhead limit exceeded问题</a></li> <li><a href="https://www.492034.com/a400314" title="java高并发系列 - 第4天:JMM相关的一些概念">java高并发系列 - 第4天:JMM相关的一些概念</a></li> </ul> </div> </aside> <!-- right aside end--> </article> <div class="clear blank"></div> <!--footer start--> <footer> <div class="footer box"> <div class="wxbox"> </div> <div class="endnav"> <p><b>站点声明：</b></p> <p>所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。</p> <p>Copyright © 2009-2024 <a href="https://www.492034.com/" target="_blank">热门IT资讯网</a> All Rights Reserved. <a href="/sitemap.xml">网站地图</a> <a href="/about/">关于我们</a> <a href="/contact-us/">联系我们</a> </p> </div> </div> </footer> <a href="#" title="返回顶部" class="icon-top"></a> <!--footer end--> <div style="display:none"> <!-- site_tongji --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?36c15626b9249e23d6751c6c63858909"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-91HRTP3109"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-91HRTP3109'); </script> <!-- baidu_push --> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> <div style="display:none"> <span class="dr_show_hits_454169">0</span><script type="text/javascript"> $.ajax({ type: "GET", url:"/index.php?s=api&c=module&siteid=1&app=article&m=hits&id=454169", dataType: "jsonp", success: function(data){ if (data.code) { $(".dr_show_hits_454169").html(data.msg); } else { dr_tips(0, data.msg); } } }); </script></div> <!--本页面URL https://www.492034.com/a454169 --> <!--本页面于2024-11-30 02:28:34更新--> </body> </html>