【文本样式】入门

目录

行间距

文本样式

---

行间距

1、行高（line-height）

（1）文字占有的实际高度；

（2）行高=上间距+字体的大小+下间距；

（3）其中，字体是垂直居中显示，上间距=下间距。

 行高（line-height）可选值：

（1）直接放一个大小，例如：40px；

（2）还可以放倍数，是当前字体大小的倍数；

（3）可以放百分比。

2、单行文本在父元素中垂直居中

只要设置父元素的行高和高度一致即可

3、font中也可以指定行高

font:字体大小/行高  字体类型;  例如：font:40px serif；

文本样式

1、text-transform 可以用来设置文本的大小写

可选值：

（1）none     默认值，文本正常显示；

（2）lowercase  文本以小写字母显示；

（3）uppercase  文本以大写字母显示；

（4）capitalize  首字母大写。

2、text-decoration 可以用来设置文本的修饰

可选值：

（1）none  默认值，文本正常显示；

（2）overline  上划线；

（3）underline  下划线；

（4）line-through  删除线  。

3、letter-spacing 可以指定字符间距

4、word-spacing 可以设置单词之间的距离

5、text-align 用于设置文本的对齐方式

可选值：

（1）left  默认值  文本靠左显示；

（2）right  文本靠右显示；

（3）center  文本居中显示；

（4）justify  两端对齐。

6、text-indent 设置首行缩进（常用长度单位： px，em ，rem）

7、white-space 设置网页如何处理空白

<style>
 /* 设置换不换行(以下是不换行) */
p{
white-space:nowrap;
}
</style>

8、text-overflow 文本溢出包含元素时发生的事情

<style>
/* 设置溢出内容以省略号的形式出现 */
p{
text-overflow: ellipsis;
}
</style>

9、text-shadow 设置文本的阴影

4个参数：

（1）阴影的水平位移距离   正值向右偏移，负值向左偏移   必选；

（2）阴影的垂直位移距离   正值向下偏移，负值向上偏移   必选；

（3）阴影的模糊半径  可选    默认0px；

（4）阴影的颜色  一般用rgba颜色  可选，默认是字体的颜色。

<style>
text-shadow:10px 10px 10px rgba(255, 0, 0, 1);
</style>

 10、box-shadow 盒阴影

box-shadow盒阴影 4个参数：

（1）阴影的水平位移距离   正值向右偏移，负值向左偏移   必选；

（2）阴影的垂直位移距离   正值向下偏移，负值向上偏移   必选；

（3）阴影的模糊半径       可选    默认0px；

（4）阴影的颜色  一般用rgba颜色  可选  默认是黑色。

<style>
box-shadow:10px 10px 10px rgba(255, 0, 0, 1);
</style>

11、vertical-align

vertical-align作用：

（1）设置图文对齐方式；

（2）解决图片三像素的问题。

vertical-align 可选值：

（1）baseline  基线对齐  以英文x最底下为对齐标准；

（2）bottom   底部对齐；

（3）top      顶部对齐；

（4）middle   居中对齐。

12、display 设置元素的相互转换

display可选值：

（1）none    隐藏元素；

（2）block   将元素专成块元素；

（3）inline   将元素转成行内元素；

（4）inline-block  将元素转成行内块元素。

面试题：什么是图片三像素的问题，如何解决这个问题？

（1）vertical-align 设置非baseline默认值即可；

（2）可以设置其父元素的font-size为0，注意如果父元素里有文字，需要重新设置字体大小；

（3）可以将图片转成块元素；

（4）将元素脱离文档流，例如可以设置浮动，设置弹性盒子，设置绝对定位。