從零基礎到輕鬆就業 | CSS——CSS 基本視覺格式化：② 「行內盒子」格式化（ Ⅲ ）

時間 2020-01-15

原文原文鏈接

原創：itsOli  @前端一萬小時

本文首發於公衆號「前端一萬小時」

本文版權歸做者全部，未經受權，請勿轉載！
複製代碼

首先，如下步驟肯定文本行中各元素對應的「行內盒子」的高度：html
- 第一，獲得各行內「非替換元素」及不屬於後代行內元素的全部文本的 font-size 值和 line-height 值，再將 line-height 減去 font-size，這就獲得了框的「行間距」。這個「行間距」除以 2，將其一半分別應用到「em 框」的頂部和底部；前端
- 第二，獲得各「替換元素」的 height、margin-top、margin-bottom，padding-top、 padding-bottom、border-top-width 和 border-bottom-width 值，把它們加在一塊兒。瀏覽器
其次，對於各內容區，肯定它在整行「基線」的上方和下方分別超出多少：
這個任務並不容易：你必須知道各元素及匿名文本各部分的「基線」的位置，還要知道該行自己「基線」的位置，而後把它們對齊。另外，對於替換元素，要將其底邊放在整行的「基線」上。bash
繼而，對於指定了 vertical-align 值的元素，肯定其垂直偏移量：
由此可知該元素的「行內盒子」要向上或向下移動多遠，並改變元素在「基線」上方或下方超出的距離。post
最後，既然已經知道了全部「行內盒子」會放在哪裏，再來計算最後的「行內盒子」——行框的高度：
爲此，只需將「基線」與最高「行內框」頂端之間的距離加上「基線」與最低「行內框」底端之間的距離。字體

答：
line-height: 2; 和 line-height: 200%; 都表示行高是字體大小的 2 倍，可是它們是有區別的。spa

當它們寫在父容器中時，子元素的字體大小不同的時候，區別就體現出來了：3d

line-height: 2; 寫在父容器中，那麼子元素的行高都是自身高度的 2 倍，是相對大小。子元素的字體大小不一樣，行高也會不一樣。code
line-height: 200%; 寫在父容器中，那麼瀏覽器會馬上計算出行高的具體值，假如父容器的默認字體大小16px，那麼計算獲得的行高就是 2×16px=32px，子元素的行高都會繼承這個 32px，是固定大小。子元素的字體大小不一樣，行高都是固定某個值。

答：
對於行內元素來講，上下的 margin padding 不生效，只有左右的 margin padding 生效！

上下 padding 只是撐開了邊框，對高度是沒有影響的。你對他加一些邊框和背景色，他也能夠看獲得變化，但實質上對高度沒有影響。

因此，行內元素的「邊框」、「邊界」是由 font-size 而不是 line-height 控制。

答：是的。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>前端一萬小時</title>
</head>
<body>
  <p>Hello，Oli 的前端一萬小時</p>
</body>
</html>
複製代碼

CSS

p {
  width: 300px; 
  border: 1px solid blue;
  height: 50px;
  line-height: 50px;
}
複製代碼

下一篇咱們繼續講解 CSS「行內盒子」格式化相關的知識點。

祝好，qdywxs ♥ you！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。