一些你还不知道但将来会知道的属性

分类一 CSS属性
1.CSS direction
direction: ltr; // 默认值
direction: rtl;
ltr 是初始值，表示left-to-right，就是从左往右的意思
rtl 则是另外一个值，right-to-left缩写，就是从右往左的意思，再具体描述下，就是内 联内容是从右往左依次排布的，加入应用了这个CSS声明，则前后两个图片，默认情况下，DOM在前的就显示在右侧；而且是在容器的右端。
注意：改变的只是内联元素块的左右顺序
文字不改变顺序
因为改变的只是内联元素块的左右顺序，所有的文字，即使使用内联标签分隔，实际上，还是一个同质内联盒子，是当作一个整体处理的，因此，只有近似右对齐效果，而具体每个文字都没有左右顺序的变化。
2 CSS writing-mode
作用：使文字竖向现实
/* 关键字值 /
writing-mode: horizontal-tb;
/ 默认值 */ 文本流是水平方向(horizontal)的，元素是从上往下(tb:top-bottom)堆叠的
writing-mode: vertical-rl;
表示文本是垂直方向(vertical)展示，然后阅读的顺序是从右往左(rl:right-left)，跟我们古诗的阅读顺序一致。
writing-mode: vertical-lr;
表示文本是垂直方向(vertical)展示，然后阅读的顺序还是默认的从左往右(lr:left-right)，也就是仅仅是水平变垂直。

writing-mode：可改变文本的文档流由水平到垂直
1 可实现垂直居中
margin:auto
text-align:center

outline
用来设置一个或多个单独的轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color。
轮廓与边框在以下几个方面存在不同：
1.轮廓不占据空间，它们被描绘于内容之上
2.轮廓可以是非矩形的。在Gecko/Firefox中，轮廓是矩形的，但是Opera则会围绕元 素结构绘制非矩形的形状
语法：
/* 宽度 | 样式 | 颜色 */
outline: 1px solid white;
例子

![在这里插入图片描述](https://img-blog.csdnimg.cn/2019042012044896.png)

/* two identical declarations */

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

分类二 --------Dom属性
getComputedStyle
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])
语法：var style = window.getComputedStyle(“元素”, “伪类”);
第二个参数非必须 若不是伪类 可为null
获取CSS属性值
可以使用getPropertyValue(propName)API或直接索引到对象，如cs [‘z-index’]或cs.zIndex。

 let h3 = document.querySelector('h3'), 
    result = getComputedStyle(h3, '::after').content;

  let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");

描述：
window.getComputedStyle
返回的对象与从元素的 style 属性返回的对象具有相同的类型;然而，两个对象具有不同的目的。从getComputedStyle返回的对象是只读的，可以用于检查元素的样式（包括由一个

获取CSS样式对象的总结
style.getPropertyValue和style.getAttribute
style.getAttribute:获取元素css属性时要使用驼峰命名法
如：style.getAttribute(“backgroundColor”);

JS方法：
JSON.stringify()
用于将 JavaScript 值转换为 JSON 字符串