乱七八遭的css

background-attachment

该属性可以设置背景图片是否固定或者随着页面滚动，有以下值：

• sroll：默认值；背景图片相对于元素本身固定，而不是随着它的内容滚动
• fixed：背景图片相对于视口固定；即使一个元素拥有滚动机制，背景图也不会随着元素的内容滚动
• local：背景图片相对于元素的内容固定；如果一个元素拥有滚动机制，背景图将会随着元素的内容滚动

background-clip

该属性可以设置元素的背景（背景图片或颜色）是否延伸到边框、内边距、内容下面。它的属性值：

• border-box：默认值；背景延伸到边框外沿（但是在边框之下）
• padding-box：背景延伸到内边距外沿，边框下面没有背景
• content-box：背景裁剪到内容区外沿
• text：把背景按指定的文字形状裁剪

background-origin

该属性定义背景图片的原点位置，默认情况下，它的原点是拥有该背景图片的元素的内边距盒子的左上角。它的属性值：

• padding-box：默认值；背景图片从内边距的左上角开始
• border-box：背景图片从边框的左上角开始
• content-box：背景图片从内容的左上角开始

注意：

1. 当使用background-attachment为fixed时，该属性将被忽略不起作用
2. background-origin与background-clip的区别：
   background-clip是把背景裁剪至只在指定区域显示，而background-origin是移动背景图片至只在指定区域显示。

box-decoration-break

该属性是用来控制行内元素有关于 background、padding、border、border-image、box-shadow 和 clip 属性在行内元素多行情形下的渲染形式。该属性接受以下两个值：

• slice：默认值；样式会被应用到整体元素
• clone：元素的每个片段都接受相同的样式，box shadows 和 padding 等样式会单独的应用到每一行

font-kerning

这个属性设置是否使用字体中储存的字距信息,可通过以下的关键字进行指定：

• auto：由浏览器来决定是否使用字体字距。比如，一些浏览器会在小字体的情况下禁用字距，因为这会使得文本可读性下降
• normal：必须应用字体中的字距信息
• none：禁用字体中的字距信息

column-count

该属性指定某个元素应分为的列数。例如column-count: 3将会把元素内的文字（或行内元素）分为3列，你也可以把它应用到inline-block或block元素上，该属性对display: table的元素不起作用，但对diaplay 值为table-cell的元素起作用。 除此之外，还有一系列的column-*形式的css属性：

• column-gap：定义每列之间的间距
• column-rule：定义每列之间的垂直的线的宽度、样式、颜色
• column-rule-color：定义线的颜色，可以使用颜色名（red, green, transparent），rgb/rgba, hsl/hsla
• column-rule-style：定义线的样式，接受以下值：none, hidden, dotted, dashed, solid, double等
• column-rule-width：定义线的宽度，可以使用固定值（thin, medium, thick）, px, em等

counters

使用counters属性我们可以简便的给元素添加计数，例如你有一片文章，含多个主题，每个主题都有一个<h2>作为标题，同时有<h3>作为副标题。使用 css counters你可以让他们自动编号。 counters 有以下几个相关属性：

• counter-reset：重置或新建一个计数器，该属性的值是你自定义的计数器的名称（父元素设置）
• counter-increment：让计数器的数值增加，这个属性的值是你想要让数值增加的计数器的名字（想要对父元素下的哪个元素计数，就对谁设置）
• content：使用:before 以伪元素的方式给元素前添加计数器当前的数字，计数器的值通过counter()获取
• counter()：css函数，返回一个代表计数器的当前值的字符串

/* 简单使用 */
counter(计数器名称);

/* 更改计数器显示 */
counter(countername, upper-roman);

currentColor

currentColor属性代表元素的当前颜色。

.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}

另外一个很有用的小技巧是通过此属性让 svg 图标的颜色也跟随父元素：

button {
  color: red;
}
button svg {
  fill: currentColor;
} 

content

这个属性用于在元素的::before和::after伪元素中插入内容，使用content 属性插入的内容都是匿名的可替换元素，且不会插入到Dom中

hyphens

这个属性告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。它的属性值包括：

• none：即便单词内有建议换行点也不会在那里换行。只会在空白符处换行
• auto：浏览器自动去判断使用连字符
• manual：手动定义连字符位置 如果使用manual手动定义连字符位置的话，还需要使用断字符号：
  • ­：当宽度不够容纳整个词时，在此处使用连字符换行。
  • ‐：即使不需换行，也在此处使用连字符

writing-mode

该属性指定了块流动方向，即块级容器（或块级元素）被堆叠（或排列）的方向。进而，也决定了块级内容的顺序（汉语等大多数语言构成的块级内容，例如p元素，一般是从上往下，一行一行排列）；同时也指定了，在块级容器中，行级内容的流动方向。

• horizontal-tb：默认值；horizontal表示水平的，tb表示Top to Bottom，从上到下，即水平方向自上而下书写；
• vertical-rl：vertical 表示垂直的，rl表示right to left， 从右到左，即垂直方向自右向左书写
• vertical-lr：vertical 表示垂直的，lr表示Left to Right， 从左到右，即垂直方向自左向右书写

例子：blog.csdn.net/gao_zhennan…

理解属性值： 属性值前半部分horizontal、vertical决定行级内容文字的流动方向，属性值后半部分lr、rl决定块和块和块级内容的流动方向

order

该属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

object-fit

该属性指定可替换元素（如<img/>、<video/>）如何适应到其使用的高度和宽度确定的框。 一般来说，图片会被压缩或者拉伸以适应外框的面积，通过该属性可以选择其他的方式来控制图片的缩放。可选值：

• fill：“填充”，默认值；被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比例与内容框不相匹配，那么该对象将被拉伸以适应内容框，不能保持原有尺寸比例。
• contain：“包含”，保持原有尺寸比例，使图片的宽度完整显示，高度等比缩放。因此，此参数可能会在容器内留下空白。
• cover：“覆盖”，保持原有尺寸比例，使图片的高度铺满，宽度等比缩放，如果对象的宽高比与内容框不相匹配，该对象将被裁剪以适应内容框。
• none：被替换的内容将保持其原有的尺寸
• scale-down：“降低、缩小”，就像依次设置了none或contain, 最终呈现的是图片尺寸比较小的那个属性值的效果

resize

resize属性用于设置元素是否可调整尺寸，以及可调整的方向（水平、垂直）。可设置的值：

• none：默认值；元素不提供用户可控的调整其尺寸的方法，只有 textarea 元素的该属性默认值是both
• both：允许用户在水平和垂直方向上调整元素的尺寸
• horizontal：允许用户在水平方向上调整元素的尺寸
• vertical：允许用户在垂直方向上调整元素的尺寸

resize不适用于以下元素：

• 内联元素
• overflow属性设置为visible（默认值）的块级元素

pointer-events

此属性是一个指针属性，控制一个元素能否响应鼠标操作

pointer-events: auto; // 元素行为正常表现
pointer-events: none; // 元素不接收hover、click、drag等事件，并且鼠标事件可以“穿透”该元素并且指定该元素“下面”的任何东西。
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

animation-fill-mode

动画相关属性，这个属性可以指定当元素的动画不播放时的样式。例如，当动画完成时，为避免元素突然跳回初始状态，可以指定其播放结束时的样式。该属性包含以下几个值：

• none：默认值；不会应用任何样式到目标元素
• forwards：动画将应用动画结束时的值，这个结束并不一定是动画的一个周期100%结束，而是根据animation-iteration-count属性决定，例如animation-iteration-count:1.5时，动画将会播放到第二遍的 50% 处停止，此时元素就会保持此时停止时的状态
• backwards：将会应用动画开始时的值
• both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性

animation-iteration-count：定义动画的重复次数

backface-visibility

3Dtransform相关的属性，用来定义当元素不面向屏幕时是否可见，它的值：

• visible：默认值；当旋转到背面时元素可见
• hidden：当旋转到背面时元素不可见

word-spacing

该属性设置单词之间的空格长度

• normal：默认值，使用正常的字体间距，由当前字体或者浏览器定义
• length：自定义单词间距，正值会导致单词间距更大，负值会使单词更接近

letter-spacing

该属性用于设置文本字符的间距

• normal：默认值，规定字符间没有额外的空间
• length：自定义字符间距，正值会导致字符分布得更远，负值会使字符更接近

word-spacing和letter-spacing的区别：

• word-spacing只对英文单词有效，对汉字无效
• letter-spacing对汉字、字母都生效