简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - html根字体设置成很大的值后， 包裹了行内元素的div莫名变高是什么原因
PHP中文网
PHP中文网 2017-04-17 14:51:02
0
5
990

代码

<!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的高度变得很高

PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆(5)
黄舟
黄舟2017-04-17 14:53:02 5樓

你的 span 的 line-height 值設定的是 12。

依照規定，當行高設為數字時，行高的計算值就是自身字體大小的相應倍數，具體到你的問題中就是12x12=144，這樣的話p 的高度就應該是144px(不算邊框) 才對，但我們透過審查元素工具可以看到p 的最終高度是161px(不算邊框)。

這其實牽涉到行框高度的計算。 p 的高度就是其內部行框的高度，而行框的高度是行框內最高點和最低點之間的距離（The line box height is the distance between the uppermost box top and the lowermost box bottom）。我們來看下面的demo。為了方便觀察把 span 元素變成行塊元素（有高度），背景顏色設為淡灰色，並且在 span 後面放一個字母 x ，x 底邊所在的線就可以看做是 span 所在行框的基線。

http://codepen.io/zengkan0703...
當我們把span 的vertical-align 值設為middle，如box2 ，可以看到行框的最高點和最低點都是span 元素的最高點和最低點，p 的最終高度就是理想的144px。 當span 的vertical-align 值為預設的baseline 時，如box1， 為了跟行框的基線對齊，span 元素會下移，行框的最高點變成了匿名行內框x 的最高點，最低點還是span的最低點，所以行框的高度就會變大為161px。

點贊 +0
新增回覆
刘奇
刘奇2017-04-17 14:53:02 4樓

css 中 line-height 的問題

line-height 一個很重要的用途就是讓我們的文字可以在父級元素中垂直居中，但是在使用它的過程中也會遇到一些問題。

先來看一個實例，如下圖：

程式碼也很簡單，就是當我們在p 中定義的字體很大的情況下，我們看到字體和父級元素之間有一些空隙。那麼這是為什麼？
我們來檢查 line-height 的定義，如下：

normal 預設。設定合理的行間距。
number 設定數字，此數字會與目前的字型尺寸相乘來設定行間距。
length 設定固定的行間距。
% 是基於目前字體尺寸的百分比行間距。
inherit 規定應該從父元素繼承 line-height 屬性的值。

所以在以上的情況我們要想使，我們的字體能夠撐滿我們的容器，就需要為父級容器添加 line-height屬性且值為 100%

程式碼和效果如下：

那為什麼會出現上面的問題呢？

line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到一個文字行內容的頂部和底部。

所以，可以得到下面的一個公式：

空白間距 = line-height – font-size

所以，當設定為line-height 的值為100%的時候，line-height的值就等於 font-size的尺寸，此時的空白間距為0。

點贊 +0
新增回覆
大家讲道理
大家讲道理2017-04-17 14:53:02 3樓

來, 走幾步.

第一步, 屬性的繼承. p 沒有自己定義的 font-size 和 line-height, 因此繼承於 HTML, 得到 p 具有如下計算值:

font-size: 100px;
line-height: normal;

第二步, 了解行高. 基於以上的計算值, 假設用戶代理(即瀏覽器)採用的line-height 使用值為1.15, 那麼實際上p 的行高是115px . 而所謂行高, 即是行盒的最小高度.

第三步, 了解行盒. 概念比較複雜, 詳情請看我最後的鏈接. 行盒的高度是最上行內盒頂部到最下行內盒的底部(其中還有vertical-align 的因素, 這裡不表)並包含這個最小高度(這個最小高度是透過虛擬"支柱"實現的, 不表), 在你的程式碼裡, p 只有一個行盒, 這個行盒又只有一個行內盒SPAN , 而這個行內盒的行高是12px * 12, 大於最小高度115px, 故此行盒實際高度144px.

第四步, p 取其頂部到其最後一個行盒(本例中只有一個)的高度, 即 144px.

所以, 當你增加HTML 的font-size 時, 導致p 的行高使用值也在跟著變化, 一旦這個值超過SPAN 的高度, 就會成為p 的高度.

詳細原理請參考: https://segmentfault.com/a/11...

點贊 +0
新增回覆
PHPzhong
PHPzhong2017-04-17 14:53:02 2樓 
<!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>

因為font-size可繼承，你這樣寫了後p的font-size也變大了。

並且需要注意的一點line-height裡面 12 ！ = 12px,詳情百度一下差異

點贊 +0
新增回覆
阿神
阿神2017-04-17 14:53:02 1樓

font-size是可繼承的屬性，你這樣寫之後p就繼承了html 的font-size：100px的屬性，所以p的font-size也變大了，由於你設定了span的font-size ，所以就感覺p變得很高。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！