css - html根字體設(shè)置成很大的值后， 包裹了行內(nèi)元素的div莫名變高是什么原因
問(wèn)題描述
代碼<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style> html {font-size: 100px; } span {font-size: 12px;line-height: 12; } </style></head><body> <p> <span>dsflfij</span> </p></body></html>
p的高度變得很高
問(wèn)題解答
回答1：你的 span 的 line-height 值設(shè)置的是 12。
按照規(guī)定，當(dāng)行高設(shè)為數(shù)字時(shí)，行高的計(jì)算值就是自身字體大小的相應(yīng)倍數(shù)，具體到你的問(wèn)題中就是 12x12=144，這樣的話 p 的高度就應(yīng)該是 144px(不算邊框) 才對(duì)，但我們通過(guò)審查元素工具可以看到 p 的最終高度是 161px(不算邊框)。
這其實(shí)涉及到行框高度的計(jì)算。p 的高度就是其內(nèi)部行框的高度，而行框的高度是行框內(nèi)最高點(diǎn)和最低點(diǎn)之間的距離（The line box height is the distance between the uppermost box top and the lowermost box bottom）。我們來(lái)看下面的demo。為了方便觀察把 span 元素變成行塊元素（有高度），背景顏色設(shè)為淡灰色，并且在 span 后面放一個(gè)字母 x ，x 底邊所在的線就可以看做是 span 所在行框的基線。
http://codepen.io/zengkan0703...當(dāng)我們把 span 的 vertical-align 值設(shè)為 middle，如 box2 ，可以看到行框的最高點(diǎn)和最低點(diǎn)都是 span 元素的最高點(diǎn)和最低點(diǎn)，p 的最終高度就是理想的 144px。 當(dāng) span 的 vertical-align 值為默認(rèn)的 baseline 時(shí)，如 box1， 為了跟行框的基線對(duì)齊，span 元素會(huì)下移，行框的最高點(diǎn)變成了匿名行內(nèi)框 x 的最高點(diǎn)，最低點(diǎn)還是 span 的最低點(diǎn)，所以行框的高度就會(huì)變大為 161px。
回答2：css 中 line-height 的問(wèn)題
line-height 一個(gè)很重要的用途就是讓我們的文本可以在父級(jí)元素中垂直居中，但是在使用它的過(guò)程中也會(huì)遇到一些問(wèn)題。
先來(lái)看一個(gè)實(shí)例，如下圖：
代碼也很簡(jiǎn)單，就是當(dāng)我們?cè)趐 中定義的字體很大的情況下，我們看到字體和父級(jí)元素之間有一些空隙。那么這是為什么？我們查一下 line-height 的定義，如下：
normal 默認(rèn)。設(shè)置合理的行間距。number 設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距。length 設(shè)置固定的行間距。% 基于當(dāng)前字體尺寸的百分比行間距。inherit 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。
所以在以上的情況我們要想使，我們的字體能夠撐滿我們的容器，就需要給父級(jí)容器添加 line-height屬性且值為 100%
代碼和效果如下：
那么為什么會(huì)出現(xiàn)上面的問(wèn)題呢？
line-height 與 font-size 的計(jì)算值之差(行距)分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。
所以，可以得出下面的一個(gè)公式：
空白間距 = line-height – font-size
所以，當(dāng)設(shè)置為line-height 的值為100%的時(shí)候，line-height的值就等于 font-size的尺寸，此時(shí)的空白間距為0。
回答3：來(lái), 走幾步.
第一步, 屬性的繼承. p 沒(méi)有自己定義的 font-size 和 line-height, 因此繼承于 HTML, 得到 p 具有如下計(jì)算值:
font-size: 100px;line-height: normal;
第二步, 了解行高. 基于以上的計(jì)算值, 假設(shè)用戶代理(即瀏覽器)采用的 line-height 使用值為 1.15, 那么實(shí)際上 p 的行高是 115px. 而所謂行高, 即是行盒的最小高度.
第三步, 了解行盒. 概念比較復(fù)雜, 詳情請(qǐng)看我最后的鏈接. 行盒的高度是最上行內(nèi)盒頂部到最下行內(nèi)盒的底部(其中還有 vertical-align 的因素, 這里不表)并包含這個(gè)最小高度(這個(gè)最小高度是通過(guò)虛擬'支柱'實(shí)現(xiàn)的, 不表), 在你的代碼里, p 只有一個(gè)行盒, 這個(gè)行盒又只有一個(gè)行內(nèi)盒 SPAN, 而這個(gè)行內(nèi)盒的行高是 12px * 12, 大于最小高度 115px, 故此行盒實(shí)際高度 144px.
第四步, p 取其頂部到其最后一個(gè)行盒(本例中只有一個(gè))的高度, 即 144px.
所以, 當(dāng)你增加 HTML 的 font-size 時(shí), 導(dǎo)致 p 的行高使用值也在跟著變化, 一旦這個(gè)值超過(guò) SPAN 的高度, 就會(huì)成為 p 的高度.
詳細(xì)原理參見(jiàn): https://segmentfault.com/a/11...
回答4：<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style> html {font-size: 100px; } span {font-size: 12px;line-height: 12; } </style></head><body> <p> <span>dsflfij</span>1 </p></body></html>
因?yàn)閒ont-size可繼承，你這樣寫(xiě)了后p的font-size也變大了。
并且需要注意的一點(diǎn)line-height里面 12 ！= 12px,詳情百度一下差異
回答5：font-size是可繼承的屬性，你這樣寫(xiě)之后p就繼承了html 的font-size：100px的屬性，所以p的font-size也變大了，由于你設(shè)置了span的font-size，所以就感覺(jué)p變得很高。
網(wǎng)公網(wǎng)安備