目录
8、text-shadow: h-shadow v-shadow blur color;
一、行间距
1、行高(line height)
文字占有的实际高度
行高=上间距+字体大小+下间距
默认情况下,上间距=下间距=(行高-字体大小)/2
行间距=下间距+上间距=行高-字体大小
line-height属性,可选值:
(1)、可以直接放一个大小 ××px ××em
(2)、直接倍数 例如1 2 3
是当前字体大小的倍数
(3)、百分比 200%
当前字体大小的百分比
2、单行文本在父元素中垂直居中
text-align:center;
当行文本行高设置和父元素高度一致
line-height:和行高一致
3、font中也可以指定行高
font: 25px/3
二、文本样式
1、设置文本的大小写
text-transform 可选值:
none 默认值,文本正常显示
uppercase 文本大写
lowercase 文本小写
capitalize 首字母大写
2、设置文本的修饰
text-decoration 可选值:
none 默认值,文本正常显示
undeline 下划线
overline 上划线
line-through 删除线
3、设置字符间距 设置单词间距
letter-spacing word-spacing
4、设置文本对齐方式
text-align 可选值:
center 居中
left 向左
right 向右
justfy 两端对齐
5、设置首行缩进
text-indent 常用em单位
6、设置网页如何处理空白
white-space
7、文本溢出包含元素时会发生什么
text-overflow
补充:单文本的省略号
p{
background-color: aqua;
width: 200px; /*设置宽度*/
white-space: nowrap; /*设置空白不换行*/
text-overflow: ellipsis; /*设置省略号*/
overflow: hidden; /*裁剪溢出/多余部分*/
}
多文本的省略号:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;/* */
height: 100px;
overflow: hidden;/* 溢出隐藏 */
line-height: 20px;/* 设置行高与容器高度成倍数关系,这样避免文本溢出时,文字显示一半 */
text-align: justify;/* 设置文本对齐方式为两端对齐,这样在伪元素内容遮盖末尾文字时才能对齐*/
position: relative;/* 子绝父相,这里是为了给伪元素设置定位*/
}
.box::after{
content: "...";/* 省略号是放在文本最后面的 */
width: 1em;/* 设置伪元素的宽度为1em,是为了遮盖的时候正好遮盖中原来的一个字的大小*/
position: absolute;/*设置定位,其位置就是文本的右下角 */
right: 0;bottom: 0;
}
</style>
</head>
<body>
<div class="box">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>
</body>
</html>
8、text-shadow: h-shadow v-shadow blur color;
四个参数:
第一个:阴影的水平位移距离 (必填,可正(右)可负(左))
第二个:阴影的垂直位移距离 (必填,可正(下)可负(上))
第三个:阴影的模糊半径 (数值越大越模糊)
第四个:阴影的颜色 (默认是字体的颜色)
9、设置块元素的阴影
box-shadow,参数与text-shadow一致
10、设置元素的垂直对齐方式
vertical-align 可选值:
baseline 基线对齐 沿着字母x最下方对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
功能:
1、设置元素垂直对齐的方式,这种功能只针对图片,文字,表格,不针对块元素
2、解决图片三像素得到问题(面试题)
当引入图片的时候,没有设置任何样式的时候,会有大概三像素的空白
方案一:
vertical-align样式:设置一个baseline的样式
方案二:
设置父元素的font-size为0即可
方案三:
将图片转换成块元素
方案四:
将元素脱离文档流