文本效果

CSS文本属性及其说明

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	大小写转换
font-variant	小写字母转换为“小型”大写字母
text-align	文本水平方向对齐方式
vertical-align	文本垂直方向对齐方式
text-index	段落首行缩进
line-height	行高
word-spacing	词距
letter-spacing	字距

深入text-index

在搜索引擎中，h1是非常重要的标签，我们通常把网站中的logo放入h1当中，但由于搜索引擎不能识别图片，只能识别文字，所以为了帮助SEO优化

我们有一个解决方法：把h1的宽、高设置为logo的宽高，在把文字用用text-index:-9999px来隐藏。

深入text-align

text-align属性取值
属性值	说明
left	左对齐
center	水平居中
right	右对齐

text-align对文字、inline、inline-block起作用，但对块元素不起作用，其中img是属于inline-block

text-align:center与margin:0 auto的区别

（1）text-align:center只对文字、行内元素、行内块元素起作用

（2）margin:0 auto 只对块元素起作用

（3）text-align:center放在父元素中，margin:0 auto放在当前元素中

深入line-height

line-height在css中准确的定义是：两行文字基线的距离

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。

行距：

上一行的底线到下一行的顶线间的距离

半行距：

就行距的一半

内容区：

顶线和底线间的距离

行框：

指的是两行文字“半行距分割线”之间的垂直距离

在css中想要文字垂直居中可以设置line-height和height同高

line-height取值

1、如果没有定义line-height的取值，浏览器有默认取值

2、line-height取值为百分号和em值

计算公式如下

line-height=（父元素font-size）*百分比

line-height=（父元素font-size）*（em值）

line-height具有继承性

3、line-height取值为无单位

css中只有line-height有这个特点

计算公式：

line-height=（父元素font-size）*（无单位数字）

深入vertical-align

w3c对vertical-align属性定义主要有四个方面：

（1）vertical-align属性用于定义周围文字、inline元素以及inline-block元素相对于该元素垂直基线的垂直对齐方式，该元素是指当前被定义vertical-align属性的元素

（2）在表单中，vertical-align可以定义td元素内容的对齐方式，同样也对table-cell起作用

（3）对块元素无效

（4）vertical-align取值可以取负值或百分值

vertical-align取值：

三种情况负值、百分比、关键字

（1）负值：

vertical-align取负值指的是相对基线向下偏移，比如"vertical-align:-2px"指的是向该元素基线向下偏移2px；

（2）百分比

vertical-align取值百分比是相对该元素继承的line-height取值的比如line-height:20px;vertical-align:50%;这是vertical-align等于10px

（3）关键字

vertical-align属性取值
取值	说明
top	顶部对齐
middle	中部对齐
bottom	底部对齐
baseline	基线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-align对齐方式</title>
    <style type="text/css">

        div{
            width: 480px;
            height: 310px;
            margin: 0 auto;
        
        }
        img{
            width: 300px;
            height: 300px;
        }
        .img1{
            vertical-align: top;
        }
        .img2{
            vertical-align: middle;
        }
        .img3{
            vertical-align: bottom;
        }
        .img4{
            vertical-align: baseline;
        }
    </style>
</head>
<body>
    
    <div>权律二<img class="img1" src="images/q1.jpg" />权律二(<strong>top</strong>) </div></hr>
    <div>权律二<img class="img2" src="images/q1.jpg" />权律二(<strong>middle</strong>)</div></hr>
    <div>权律二<img class="img3" src="images/q1.jpg" />权律二(<strong>bottom</strong>)</div></hr>
     <div>权律二<img class="img4" src="images/q1.jpg" />权律二(<strong>baseline</strong>)</div>

</body>
</html>

结果：

文本效果

推荐阅读