line-height,指的是两行文字【基线】之间的距离。
基线:一般就是小写英文字母x的下划线
行内框盒子模型(所有内联元素都有关,以下由内至外讲解)
举例: <p>啦啦啦啦啦啦啦啦<em>啦啦啦</em>啦啦啦</p>
1、 内容区域(content area)
大小与font-size相关(可理解为鼠标选中区域文字的背景,或者说是鼠标放在浏览器console里该元素的html上时显示的背景)
2、 内联盒子(inline boxes)
内联盒子不会让内容成块显,而是排成一行,若外部为inline水平的标签(比如span,a,em等,注意p标签是block元素)则属于内联盒子。单纯的文字则是匿名内联盒子。
3、 行框盒子(line boxes)
每一行就是一个行框盒子,每个行框盒子就是由一个个内联盒子组成。如上述例子就是匿名盒子、内联盒子、匿名盒子组成的行框盒子。
4、 包含盒子(containing box)
即上述p标签所在的包含盒子,由一行行的行框盒子组成。
.test1 {line-height: 12px;font-size: 50px;background-color: #f00;}
.test2 {line-height: 50px;font-size:12px;background-color: #ccc;}
<p class="test1">我的行高为12px,但是字体大小为36px</p>
<p class="test2">我的行高为36px,但字体大小为12px</p>
上述例子可见:内联元素的高度是由行高决定的。
行高拥有继承性
行高 = 内容区域 + 行间距
内容区域只与font-size和font-family有关,与line-height无关,某些字体下,内容区域高度就等于font-size
半行间距 = (行高 - 内容区域) / 2
既然如此,那么: 行高决定内联盒子高度,行间距则可大可小(甚至为负,根据内容区域大小而变化),以保证高度正好等于行高。
line-height的值:
1、 normal
默认属性值,跟随浏览器,且与元素字体相关,一般是字体的1.32或是1.33倍
2、 number
使用数值作为行高值,例如 line-height: 1.5;
根据当前元素的font-size计算,即 line-height = 1.5 * font-size
3、 length
具体的值,比如1.5em,20px
4、 percent
即用百分比表示
相对于设置了该line-height属性的元素的font-size大小计算
即line-height = font-size * n%
5、 inherit
行高继承
虽然行高本身具有继承性,但有些元素比如input默认行高是normal,可通过此来调整
使用经验:
body { font: 14px/1.4286 'microsoft yahei';}
即字体14像素,行高20像素,微软雅黑字体
消除默认情况下图片和文字(或是隐匿节点)基线对齐导致空隙的情况:
1、 图片块状化,因为vertical-align只对内联或是内联块状产生影响
2、 img {vertical-align: bottom}, 即底线对齐,基线对齐会有空隙,底线对齐就没了
3、 容器行高足够小
实际应用:
1、 图片的垂直居中
2、 多行文本垂直居中
把多行文字包含在一个与图片一样的display容器中,即inline-block
基线:一般就是小写英文字母x的下划线
行内框盒子模型(所有内联元素都有关,以下由内至外讲解)
举例: <p>啦啦啦啦啦啦啦啦<em>啦啦啦</em>啦啦啦</p>
1、 内容区域(content area)
大小与font-size相关(可理解为鼠标选中区域文字的背景,或者说是鼠标放在浏览器console里该元素的html上时显示的背景)
2、 内联盒子(inline boxes)
内联盒子不会让内容成块显,而是排成一行,若外部为inline水平的标签(比如span,a,em等,注意p标签是block元素)则属于内联盒子。单纯的文字则是匿名内联盒子。
3、 行框盒子(line boxes)
每一行就是一个行框盒子,每个行框盒子就是由一个个内联盒子组成。如上述例子就是匿名盒子、内联盒子、匿名盒子组成的行框盒子。
4、 包含盒子(containing box)
即上述p标签所在的包含盒子,由一行行的行框盒子组成。
.test1 {line-height: 12px;font-size: 50px;background-color: #f00;}
.test2 {line-height: 50px;font-size:12px;background-color: #ccc;}
<p class="test1">我的行高为12px,但是字体大小为36px</p>
<p class="test2">我的行高为36px,但字体大小为12px</p>
上述例子可见:内联元素的高度是由行高决定的。
行高拥有继承性
行高 = 内容区域 + 行间距
内容区域只与font-size和font-family有关,与line-height无关,某些字体下,内容区域高度就等于font-size
半行间距 = (行高 - 内容区域) / 2
既然如此,那么: 行高决定内联盒子高度,行间距则可大可小(甚至为负,根据内容区域大小而变化),以保证高度正好等于行高。
line-height的值:
1、 normal
默认属性值,跟随浏览器,且与元素字体相关,一般是字体的1.32或是1.33倍
2、 number
使用数值作为行高值,例如 line-height: 1.5;
根据当前元素的font-size计算,即 line-height = 1.5 * font-size
3、 length
具体的值,比如1.5em,20px
4、 percent
即用百分比表示
相对于设置了该line-height属性的元素的font-size大小计算
即line-height = font-size * n%
5、 inherit
行高继承
虽然行高本身具有继承性,但有些元素比如input默认行高是normal,可通过此来调整
使用经验:
body { font: 14px/1.4286 'microsoft yahei';}
即字体14像素,行高20像素,微软雅黑字体
消除默认情况下图片和文字(或是隐匿节点)基线对齐导致空隙的情况:
1、 图片块状化,因为vertical-align只对内联或是内联块状产生影响
2、 img {vertical-align: bottom}, 即底线对齐,基线对齐会有空隙,底线对齐就没了
3、 容器行高足够小
实际应用:
1、 图片的垂直居中
2、 多行文本垂直居中
把多行文字包含在一个与图片一样的display容器中,即inline-block
之后设置外部容器的行高,再之后重置文字区域行高(避免行高继承性)
练习html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
font-size: 12px;
}
.test1 {
line-height: 12px;
font-size: 50px;
background-color: #f00;
}
.test2 {
line-height: 50px;
font-size:12px;
-webkit-text-size-adjust:none;
background-color: #ccc;
}
.test3 {
background-color: #f00;
line-height: 50px;
display: inline-block;
}
</style>
</head>
<body>
<p>啦啦啦</p><span>啦啦啦</span>
<p class="test1">我的行高为12px,但是字体大小为36px</p>
<p class="test2">我的行高为36px,但字体大小为12px</p>
<br />
<br />
<span class="test3">测试背景色,只有在内联块状化后,才会显示line-height那么高的红色。</span>
<br />
<br />
<p style="background-color: #ccc"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt=""></p>
<p>可以观察到上面图片下方有间距,这就是默认vertical-align要和隐匿节点的基线对齐导致的</p>
<br />
<br />
<p style="background-color: #ccc; text-align: center; height: 100px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" style="position: absolute;" height="100px"></p>
<p>可以发现,隐匿节点被text-align弄到中间后,把后面的因为absolute而导致位置跟随的图片也推了过去。导致图片在中间靠右的地方。(虽然我们知道,直接对容器text-align而不对图片绝对定位就可以让图片居中,这里只是回顾一下绝对定位元素的特性)</p>
<br />
<br />
<p style="background-color: #ccc; line-height: 8px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" >xx嘿嘿</p>
<p>上述即为去掉空隙的一个办法</p>
<br />
<br />
<p style="background-color: #ccc; line-height: 300px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" ></p>
<p>由于vertical-align默认基线对齐,图片和隐匿节点的基线默认对齐了</p>
<br />
<br />
<p style="background-color: #ccc; line-height: 300px; text-align: center;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" style="vertical-align: middle;"></p>
<p>当我们把图的vertical=align改为middle时,就可以大致居中了。(大致,是因为middle线并不就一定是中间)</p>
<br />
<br />
<p style="background-color: #ccc; line-height: 300px; text-align: center;"><span style="display: inline-block; line-height: normal; width: 500px; vertical-align: middle; text-align: left;">呵呵呵呵呵呵呵呵,呵呵呵呵呵。呵呵呵,呵呵呵呵呵,呵呵呵呵呵,呵呵呵呵呵呵呵,呵呵呵呵,呵呵呵呵呵,呵呵呵呵呵,呵呵,呵呵呵呵呵,呵呵呵呵呵。呵呵呵呵呵。呵呵呵呵。呵呵呵,呵呵呵呵呵,呵呵呵呵呵呵,呵呵呵呵。呵呵呵呵呵,呵呵呵呵呵呵呵呵。呵呵呵呵呵呵,呵呵呵,呵呵呵呵呵呵呵呵呵呵呵,呵呵呵,呵呵呵呵呵呵,呵呵呵呵呵。呵呵呵,呵呵呵,呵呵呵呵,呵呵呵呵呵呵呵呵呵。呵呵呵呵呵呵呵,呵呵呵呵,呵呵呵呵呵,呵呵呵呵呵,呵呵,呵呵呵呵呵,呵呵呵呵呵。呵呵呵呵呵。呵呵呵呵。呵呵呵,呵呵呵呵呵,呵呵呵呵呵呵,呵呵呵呵。呵呵呵呵呵呵呵,呵呵呵呵,呵呵呵呵呵,呵呵呵呵呵,呵呵,呵呵呵呵呵,呵呵呵呵呵。呵呵呵呵呵。呵呵呵呵。呵呵呵,呵呵呵呵呵,呵呵呵呵呵呵,呵呵呵呵。</span></p>
</body>
</html>