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优点是可以实现波浪线效果。
background-size
我们在开发中几乎很常见background-size属性，而且写法有很多种,例如px、百分比、cover、contain这些都可以使用：
background-size：66px 66px;
background-size：cover;
background-size：33% 44%;
background-size：containi;
background-size：55%;
background-size：auto 99px;
background-size：auto 23%;
其中cover和contain的属性值是最常用的，因为这两个属性值都不会改变背景图的原始比例，cover从字面上理解是覆盖的意思，我们可以让背景图尽可能的把当前原始覆盖住，可能会有一部分图片显示不出来，而contain从字面上理解是包含的意思，表示我们将背景图放在当前元素区域中，可能会留出空白区域，但是图片都能完全显示出来。
数值和百分比
当我们给background-size设置百分比或者数值时，都不应该设置为负值，百分比是相对于元素的背景定位区域来计算。而background-origin就是决定背景定位区域的，默认值为padding box。
.box-wrapper {
width: 40px;
height: 40px;
background-size: 100% 100%;
}
background是包含background-size属性的，但是我们要注意写法，就是background-position的属性值是在background-size的前面的，并且需要使用斜杠进行分隔，不然写法可能无效：
// 有效写法
background：10/100% url(test.png);
background: url(test.png) no-repeat center/100%;
// 无效写法
background: url(test.png) /100%;
background: url(test.png) no-repeat /100%;
我们还可以利用css渐变和background-size属性绘制一个深天蓝色的像素点：
.wrapper {
background: linear-gradient(deepskyblue, deepskyblue) no-repeat center/2px 2px;
}space和round模式
平时我们如果平铺小尺寸的图片，我们可以使用space，但是如果遇到背景图像比背景定位区域的尺寸大一些，我们如何处理？
1、此时无效的background-position属性会生效，当背景显示区域只能显示出一张图像时，我们就使用background-position的属性来控制这个图片的定位。
2、当平铺图像尺寸比背景显示区域尺寸大，在不同浏览器中就会显示不同的效果，图像在Chrome和Firefox浏览器中可以显示，图像在IE和Edge中是无法显示出来的，所以我们如果使用space最好不在IE浏览器中渲染或者保证平铺图像的尺寸比元素的尺寸小。
round的背景图像会被拉伸，不会留下空隙，但是如果定位区域空间变大，如果剩余空间大于图像宽度的一般，那么我们添加一个新的图片时，会让当前所有的图像被压缩，从而将新添加的这个图片放在压缩留下的空间中。
.image {
background-repeat: round;
border: 1px solid #ccc;
background: url(test.png) center / auto 100%;
}
当然除了这两个关键字(space，round)之外，可以设置背景图像的平铺方式，并且改变了background-repeat属性的语法，图像平铺方式为水平和垂直方向。
// space平铺垂直方向， round平铺水平方向
background-repeat: round space;