font-variant-numeric属性(CSS设置)
font-variant-numeric属性(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规范没有详细阐明部分可替换元素的基线，如，这意味着这些元素运用此值的体现因浏览器而异。
**sub：**使元素的基线与父元素的下标基线对齐。
**super：**使元素的基线与父元素的上标基线对齐。
**text-top：**使元素的基线与父元素的上标基线对齐。
**text-bottom：**使元素的底部与父元素的字体底部对齐。
**middle：**使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。
留意vertical-align只对行内元素、表格单元格元素收效：不能用它笔直对齐块级元素。
资源:MDN。
2.writing-mode
writing-mode特点界说了文本水平或笔直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它（关于HTML文档应该在html元素上设置）。它选用以下值之一horizontal-tb(default)|vertical-rl|vertical-lr。
**horizontal-tb：**关于左对齐(ltr)脚本，内容从左到右水平活动。关于右对齐(rtr)脚本，内容从右到左水平活动。下一水平行位于上一行下方。
**vertical-rl：**关于左对齐(ltr)脚本，内容从上到下笔直活动，下一笔直行位于上一行左边。关于右对齐(rtr)脚本，内容从下到上笔直活动，下一笔直行位于上一行右侧。
**vertical-lr：**关于左对齐(ltr)脚本，内容从上到下笔直活动，下一笔直行位于上一行右侧。关于右对齐(rtr)脚本，内容从下到上笔直活动，下一笔直行位于上一行左边。
资源:MDN。
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
3.font-variant-numeric
font-variant-numericCSS特点控制数字，分数和序号标记的替代字形的运用。
它选用以下这些值之一：normal|ordinal|slashed-zero|lining-nums|oldstyle-nums|proportional-nums|tabular-nums|diagonal-fractions|stacked-fractions。
此特点关于设置数字款式很有用。依据状况，你可能期望显示旧式的数字或带有斜杠的零，关于这些状况，font-feature-settings很有用。
请留意，font-variant-numeric是font-feature-settings组特点的一部分。比如font-variant-caps或font-variant-ligatures之类的特点也归于该组。还要留意，像一切font-feature-settings特点相同，你的字体需求实现上述功用才能正常作业。我运用的字体是FiraSans。
资源:MDN。
4.user-select
每当咱们有不想让用户挑选的文本，或许相反，假如发生了双击或上下文单击，期望挑选一切文本时，user-select特点将十分有用。
此特点选用以下值之一：none|auto|text|all。
**none：**元素及其子元素的文本不可选中。请留意这个Selection目标能够包括这些元素。从Firefox21开端，none体现的像-moz-none，因此能够运用-moz-user-select:text在子元素上重新启用挑选。
autoauto的详细取值取决于一系列条件，详细如下：
在::before和::after伪元素上，选用的特点值是none
假如元素是可编辑元素，则选用的特点值是contain
不然，假如此元素的父元素的user-select选用的特点值为all，则该元素选用的特点值也为all
不然，假如此元素的父元素的user-select选用的特点值为none，则该元素选用的特点值也为none
不然，选用的特点值为text
**text：**用户能够挑选文本。**all：**在一个HTML编辑器中，当双击子元素或许上下文时，那么包括该子元素的最顶层元素也会被选中。
资源:MDN。
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
5.clip-path
clip-pathCSS特点能够创立一个只要元素的部分区域能够显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL界说的途径或许外部svg的途径，或许作为一个形状例如circle()。clip-path特点替代了现在已经弃用的剪切clip特点。
此特点选用以下值之一:circle()|ellipse()|polygon()|path()|url()。
因为这是对该特点的介绍，因此，这里不会深入研究每个值。
我运用最多的两个值是circle和polygon。circle(radiusatpair)值有两个参数，第一个参数是圆的半径，第二个参数是表明圆心的点。polygon(pair,pair,pair...)值取3个或更多的点，表明一个三角形、一个矩形等等。
6.shape-outside
shape-outside的CSS特点界说了一个能够对错矩形的形状，相邻的内联内容应环绕该形状进行包装。默许状况下，内联内容围住其边距框;shape-outside供给了一种自界说此包装的方法，能够将文本包装在复杂目标周围而不是简单的框中。它选用与clip-path相同的值。
clip-path界说用户怎么检查元素，shape-outside界说其他HTML元素怎么检查元素。
资源:MDN。
7.background-clip
最终，backgroundclipCSS特点设置元素的背景是否扩展到其border、padding或content框之下。
此特点选用以下值之一：border-box(default)|padding-box|content-box|text
————————————————
版权声明：本文为CSDN博主「高先生的猫」的原创文章，遵从CC4.0BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/z591102/article/details/106049331
作品标签： CSS
优秀作品：
评论列表（共301人参与）参与讨论或分享设计作品获得视觉癖积分奖励
ant-注册会员
2021-08-30 20:53:9
签属性详解,游客
2021-08-30 12:27:32
游客88097：font-variant-nu.jpg" /> font-size-adjust特点语法格式 css语法：font-size-adjust:number|none: center;">
回复
(px、注册会员
2021-08-30 11:15:25
CSS的特点vertical-align用来指定行内元素（inline）或表格孩 22.你眼里有星辉闪烁值得半生蹉跎 23.温柔是宝藏藏在源源不断的日子里
回复