CSS中常用的属性特性
text-align
我们都知道text-align作用是用于元素的对齐，常用的参数有left，center，right，但是我们很少用text-align去操作字符属性值，因为这是css Level4规范新增特性，如果我们操作字符属性值需要注意几点：必须是单个字符，而且只能用于单元格。此外字符与关键字属性值可以一起使用，当我们不去使用关键字属性值，那么字符就会显示在右侧。
td { text-align: '.' center; } 复制代码//dom 代码
<table> <col width="55" height="100"> <tr> <th> 学习JavaScript <tr> <td> 小学学费50.9 <tr> <td> 中学学费545.3 <tr> <td> 高中学费1105.3 <tr> <td> 丢了0.01元 </table> 复制代码
以上案例中的对齐方式就会按"."来对齐
text-decoration
text-decoration平时我们主要对文字进行操作，常用到的就是none，underline或者line-through。还有del结合text-decoration来实现贯穿线的删除效果。
<del style="text-decoration: line-through;">我是学习前端的的菜鸟周帅帅</del> 复制代码
效果图如下：
text-decoration属性是一种缩写形式，完成的属性有以下几种形式： text-decoration- 可以接line、style、color和thickness这些参数。
下面是line相关属性有：none、underline、line-through、overline分别表示没有xianhuax
//取消下划线 <p style="text-decoration-line: none;">学习前端</p> //添加下划线 <p style="text-decoration-line: underline;">javaScript</p> //添加中间线 <p style="text-decoration-line: line-through;">web</p> //添加下划线 <p style="text-decoration-line: overline;">web</p> 复制代码
除了我们单个使用之外，css中text-decoration还支持多个值同时使用：
// 多个值同时使用，上划线和下划线 <p style="text-decoration-line: overline underline;">java</p> 复制代码
style相关属性：solid、double、dotted、dashed、wavy分别表示实线，双实线，点线，虚线，波浪线。
//添加实线 <div style="text-decoration-style: solid;">学习 </div> //添加双实线 <div style="text-decoration-style: double;">前端</div> //添加点线 <div style="text-decoration-style: dotted;">liunx</div> //添加虚线 <div style="text-decoration-style: dashed;">python</div> //添加波浪线 <div style="text-decoration-style: 波浪线;">后端</div> 复制代码
注意：如果我们对父元素和子元素使用相同的css属性，我们会发现一个新的效果，例如当父元素和子元素中同时设置text-decoration效果的时候，文字的效果不是覆盖的，而是进行了效果的累加。
text-decoration属性和border都可以实现双线、双实线等效果。但是两者比较的话，发现border会更好，因为border和padding结合可以控制间隔距离，同时可以实现多行下划线。text-decoration优点是可以实现波浪线效果。
作者：周帅帅
链接：https://juejin.cn/post/7025980840186216484