那些好用却被忽视的文本属性！

学习CSS是构建好看网页的一种方式。但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。

因此，在这篇文章中，向你介绍 比较好用的 CSS 属性，希望对你有所帮助。

1.text-align 内容对齐方式，它是针对于元素的内容

属性值 left|center|right

center（居中）left(左边对齐) right（右边对齐）

p{text-align：center;}

p是块元素，left、right和center会作用于整个行

2.text-decoration指定文字有无装饰，默认值为none

属性值：

underline指定文字的装饰是下划线

overline指定文字的装饰是上划线

line-through指定文字的装饰是贯穿线，类似于删除标签的效果

3.text-transform设置对象中的文本的大小写

默认值none无转换

属性值：

capitalized将每个单词的第一个字母转换成大写

p{text-transform:capitalize;}

< p>this is paragraph< /p>

uppercase 全部转换成大写

p{text-transform:uppercase;}

lowercase 转换成小写

p{text-transform:lowercase;}

< p>THIS IS PARAGRAPH< /p>

4.text-indent文本缩进

文本缩进属性是用来指定文本的第一行的缩进

em是以字为单位，加减都可以。

如：p{text-indent:2em;}

lem和当前字体大小相等。在浏览器中默认的文字大小是16px.因此，lem的默认大小是16px。

5.word-wrap 设置当前行超过指定容器的边界时是否换行

首先我们要知道一种情况：如果你容器中的单词过长，超出了容器本身的宽度，会造成”长单词溢出“

word-wrap:break -word;可设置过长的文本自动换行

6.vertical-align 设置对象内容的垂直对齐方式

是容器中元素相对于内容的显示

示例：

div{background：orange； height：100px；}

a{display：inline-block；height：100px；width：80px； background：red；vertical-align：middle；}

< div>这里有内容< a href="#">< /a>< /div>

*div中定义a，vertical定义的是a相对于div内容的对齐方式，它和容器的高度无关，与文字内容有关

示例：

p{background：orange；}

img{width：100px；vertical-align：middle；}

< p> this is paragraph!!!< img src="images/boy.jpg" alt=""/>< /p>

7.line-height 设置对象的行高（不允许使用负值）

normal：默认值。设置合理的行间距。

number：设置数字，此数字会与当前的字尺寸相乘来设置行间距。

length：设置固定的行间距。

我们一般用行高来使一行文字垂直居中，当行高等于高时，一行文字垂直居中。

（ps:如果您觉得有用，请点赞转发，让更多人看到哦）

---

小伙伴也可以加一下QQ群，可以获取资源以及更多学习方法哦

QQ群：1126277960 （暗号：zhihu）