本文主要介绍以下内容:text-indent,text-align,line-height,vertical-align。
text-indent
已知一个小技巧:使用 text-indent:2em;来实现首行缩进两个单位。
在实际开发中,text-indent:-9999px; 一般用于网站的 LOGO 部分。在搜索引擎优化中,h1 是非常重要的标签。一般情况下,我们都是把网站的 LOGO 图片放到 h1 标签中。不过,搜索引擎只能识别文字,无法识别图片。为了更好地进行搜索引擎优化,此时应该怎么做呢?
有一个很好的解决方法就是:指定 h1 元素的长宽跟 LOGO 图片的长宽一样,然后定义 h1 的背景图片(background-image)为 LOGO 图片。也就是说,我们使用 LOGO 图片作为 h1 标签的背景图片,然后使用 text-indent:-9999px; 来隐藏 h1 的文字内容。
text-indent:-9999px 隐藏文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1
{
width:300px;
height:100px;
background-image:url(img/logo.jpg);
text-indent:-9999px;
}
</style>
</head>
<body>
<h1>Logo</h1>
</body>
</html>
如果没有 text-indent:-9999px; 那么 Logo 会显示在左上角。
display:none 隐藏文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1
{
width:967px;
height:1474px;
background-image:url(fhn1.jpg);
}
h1 span{display:none;}
</style>
</head>
<body>
<h1><span>Logo</span></h1>
</body>
</html>
页面效果确实是达到了,但是搜索引擎却“不吃这一套”!为什么呢?对于使用 display:none; 隐藏的文字,搜索引擎一般都把这些文字当作垃圾信息忽略掉。要是这样,h1 的权重就会丢失。因此在实际开发中,我们不建议使用这种方式。
为什么定义 text-indent 为 -9999px,而不是 -999px 或 -99px 呢?
对于一般的计算机,常见的屏幕宽度有 1024px、1366px 等。之所以定义 text-indent 为 -9999px,是为了让文字缩进得足够多,就算是在高分辨率屏幕上也看不到文字,因为当今 没有哪台计算机的屏幕宽度能够大于 9999px。如果定义 text-indent 为 -999px 或者 -99px,那 么缩进的文字还是有可能会出现在浏览器窗口内,这就不是我们预期的效果了。
text-align
在 CSS 中,我们可以使用 text-align 属性来定义文本或图片的对齐方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 380px;
height: 380px;
border: 1px solid gray;
margin-top: 2px;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="biu.jpg" alt="" />
</div>
<div>qilai</div>
</body>
</html>
效果中可见,text-align 属性不仅会作用于文本,还可以作用于图片。
text-align 起作用的元素
text-align 对文本、inline 元素以及 inline-block 元素都会起作用,但对 block 元素不起作用。其中,img 元素就属于 inline-block 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#outer-box {
width: 400px;
height: 400px;
border: 1px solid gray;
text-align: center;
}
#inner-box {
width: 50px;
height: 50px;
background-color: Orange;
}
</style>
</head>
<body>
<div id="outer-box">
<div id="inner-box"></div>
<img src="biu.jpg" alt="">
</div>
</body>
</html>
效果中可见,左上角有一个黄色的方框,图片依然在方框中央。即 text-align 属性对 div 不起作用。
text-align:center; & margin:0 auto;
在实现页面水平居中的方式中,text-align:center; 与 margin:0 auto; 是最常见的两种水平居中方式,不过这两者也有着本质的区别。
▶ text-align:center; 实现的是文字、inline 元素以及 inline-block 元素的水平居中。
▶ margin:0 auto; 实现的是 block 元素的水平居中。
▶ text-align:center; 在父元素中定义,margin:0 auto; 在当前元素中定义。
line-height
在 CSS 中,我们可以使用 line-height 属性来定义文本的行高。有的书中称 line-height 为行间距,其实这是非常不严谨的叫法。行高,顾名思义就是“一行的高度”,而行间距指的是“两行文本之间的距离”,两者是完全不一样的概念。本节我们来深入学习 line-height 属性。
line-height 定义
在 CSS 中,line-height 还有一个更加准确的定义:两行文字基线之间的距离。
顶线、中线、基线、底线
在 CSS 中,每一行文字都可以看成一个“行盒子”,而每一个行盒子都有 4 条线:顶线、中线、基线、底线。这 4 条线跟英文簿中的 4 条线是一样的道理。
此外 vertical-align 属性中的 top、middle、baseline、bottom 这 4 个属性值分别对应的就是顶线、中线、基线、底线。注意,基线并不是行盒子中最下面的线,而是倒数第 2 条线。
行高、行距,半行距
▶ 行高(line-height):两条基线之间的垂直距离。
▶ 行距:上一行的底线到下一行的顶线之间的垂直距离,也就是两行文字之间的间隔。
▶ 半行距:行距的一半,与行框(inline box)有关。
内容区与行框
▶ 内容区:行盒子顶线到底线之间的垂直距离。
▶ 行框:两行文字“半行距分割线”之间的垂直距离。
深入 line-height
height 和 line-height
line-height 是有默认值的,当没有定义 line-height 属性时,浏览器就会采用默认的 line-height 值。
一行文字的高度是由 line-height 决定,而不是由 height 决定的。例如在 p 标签中,一个 p 标签的文字可以有很多行,其中 line-height 定义的是一行文字的高度,而 height 定义的才是整个段落的高度(即 p 标签的高度)。
在 CSS 中,我们可以定义 height 和 line-height 这两个属性值相等,从而实现单行文字的垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 240px;
height: 60px;
border: 1px solid gray;
font-size: 12px;
text-align: center;
}
#div1 {
line-height: 20px;
}
#div2 {
line-height: 40px;
}
#div3 {
line-height: 60px;
}
</style>
</head>
<body>
<div id="div1">height为60px,line-height为20px</div>
<div id="div2">height为60px,line-height为40px</div>
<div id="div3">height为60px,line-height为60px</div>
</body>
</html>
line-height 取值为百分比或 em 值
当 line-height 取值为百分比或者 em 值时,元素的行高是相对于“当前元素”的font-size 值来计算的。计算公式如下。
line-height = (当前元素font-size)×(百分比)
line-height = (当前元素font-size)×(em值)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father {
/*父元素行高:30px×150%=45px*/
font-size: 30px;
line-height: 150%;
background-color: hotpink;
}
#son {
/*子元素行高:20px×120%=24px*/
font-size: 20px;
line-height: 120%;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="father">这是父元素
<div id="son">这是子元素</div>
</div>
</body>
</html>
如果我们把子元素中 line-height:120%; 这一句代码删除,那么子元素就会直接继承父元素的 line-height** 像素值**,而不是百分比。
line-height 取值为无单位数字
line-height 还支持无单位数字的属性取值,在 CSS 中只有 line-height 属性具有这个特点。 当 line-height 值为无单位数字时,实际的行高同样是相对于“当前元素”的 font-size 值来计算的。 计算公式如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{font-size:30px;}
#father
{
/*父元素行高:30px×1.5=45px*/
line-height:1.5;
background-color:hotpink;
}
#son
{
/*子元素行高:20px×1.5=30px(继承父元素的系数)*/
font-size:20px;
background-color:lightskyblue;
}
</style>
</head>
<body>
<div id="father">这是父元素
<div id="son">这是子元素</div>
</div>
</body>
</html>
其中,父元素的行高为 30px×1.5=45px,而子元素的行高为 20px×1.5=30px。也就是说,当 line-height 取值为无单位数字时,该无单位数字可以理解为一个系数。子元素继承的是父元素的系数,而不是直接继承父元素的 line-height。
vertical-align
官方解释:
▶ vertical-align 属性用于定义周围的文字、inline 元素以及 inline-block 元素相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了 vertical-align 属性的元素。
▶ 在表格单元格中,vertical-align 属性可以定义单元格 td 元素中内容的对齐方式。td 元素是 table-cell 元素,也就是说 vertical-align 属性对 table-cell 类型元素有效。
▶ vertical-align 属性对 inline 元素、inline-block 元素和 table-cell 元素有效,对 block 元素无效。
▶ vertical-align 属性允许指定负长度值(如 -2px)和百分比值(如 50%)。
已知每一行文字都可以看成一个行盒子。事实上,每一个 inline-block 元素也 可以看成一个行盒子。其中每一个行盒子同样也有 4 条线:顶线、中线、基线、底线。这 4 条线跟英文簿中的 4 条线是相似的。
vertical-align 属性中的基线跟 line-height 属性中的基线是一样的道理。在 CSS 中, vertical-align 属性最常见的属性值有 4 个。
vertical-align 属性取值
负值
vertical-align 属性取值可以为负值,例如,vertical-align:-2px 表示使得元素相对于基线向上偏移 2px,常用于解决单选框或是复选框与周围文本对齐的问题。
百分比
vertical-align 属性取值可以为百分比,这个百分比是相对于当前元素所继承的 line-height 属性值而决定的。
如果当前元素定义了一个 vertical-align:50%,并且它的 line-height 为 20px,则 vertical-align:50% 实际上等价于 vertical-align:10px。其中,vertical-align:10px 表示当前元素相对于它的基线向下偏移 10px。
关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img {
width: 80px;
height: 80px;
}
#img1 {
vertical-align: top;
}
#img2 {
vertical-align: middle;
}
#img3 {
vertical-align: bottom;
}
#img4 {
vertical-align: baseline;
}
</style>
</head>
<body>
顶部对齐<img id="img1" src="biu.jpg" alt="" />七濑胡桃<strong>top</strong>)
<hr />
中部对齐<img id="img2" src="biu.jpg" alt="" />七濑胡桃<strong>middle</strong>)
<hr />
基线对齐<img id="img3" src="biu.jpg" alt="" />七濑胡桃<strong>bottom</strong>)
<hr />
底部对齐<img id="img4" src="biu.jpg" alt="" />七濑胡桃<strong>baseline</strong>)
</body>
</html>
根据 W3C 的定义:vertical-align 属性用于定义周围文字、inline 元素或 inline-block 元素相对于该元素基线的垂直对齐方式。在这个例子中,vertical-align 属性定义的是周围的文字相对于 img 元素基线的垂直对齐方式。
vertical-align 属性应用
inline 元素和 inline-block 元素
在 HTML 中,常见的 inline-block 元素有两个:img 和 input。
<!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 type="text/css">
strong
{
font-size: 40px;
/* border: 1px solid green; */
vertical-align: baseline;
}
</style>
</head>
<body>
<div>
<span>hutaotao</span><strong>hutaotao</strong><span>hutaotao</span>
</div>
</body>
</html>
block 元素
vertical-align 属性对 inline 元素、inline-block 元素和 table-cell 元素有效,对 block 元素无效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
display: table-cell;
width: 200px;
height: 200px;
border: 1px solid gray;
vertical-align: middle;
text-align: center;
font-size: 0%;
}
img
{
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div>
<img src="biu.jpg" alt="" />
<img src="wu.jpg" alt="">
<img src="map.jpg" alt="">
<img src="heng.jpg" alt="">
</div>
</body>
</html>
div 元素是 block 类型,因此 vertical-align 属性对其无效。如果想要在 div 中实现图片的垂直居中,我们可以先为 div 定义 display:table-cell,也就是将 block 元素转化为 table-cell 元素(表格单元格),然后再使用 vertical-align:middle 就可以实现了。
table-cell 元素
在表格单元格中,vertical-align 属性可以定义单元格中内容的对齐方式。也 就是说 vertical-align 属性对 table-cell 类型元素有效。
注意 table-cell 元素跟 inline、inline-block 元素对于 vertical-align 的使用是有很大区别的:
▶ nline 元素和 inline-block 元素的 vertical-align 是针对周围的元素来说的,vertical-align 定义的是周围元素相对于当前元素的对齐方式 。
▶ table-cell 元素的 vertical-align 属性是针对自身而言的。vertical-align 定义的是内部子元素相对于自身的对齐方式。