鍍金池/ 問答/HTML/ 內聯(lián)盒子,幽靈空白節(jié)點的問題

內聯(lián)盒子,幽靈空白節(jié)點的問題

張鑫旭老師說，只要有“內聯(lián)盒子”在，就一定會有“行框盒子”
那為什么下面這樣span為高度為0,沒有觸發(fā)幽靈空白節(jié)點？空的span不算內聯(lián)盒子嗎？

<div><span></span></div>

而span 設置了inlin-block 就觸發(fā)了？

<div><span style="display:inline-block"></span></div>

clipboard.png

回答
編輯回答
避風港

w3c規(guī)范里有這么一段：

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

意思就是如果一個line box里沒有文字、保留的空格、非0的margin或padding或border的inline元素、或其他in-flow內容（比如圖片、inline-block或inline-table元素），且不以保留的換行符結束的話，就會被視作高度為0的line box。

問題里的<div><span></span></div>就剛好符合這種特殊情況，設置成inline-block就不符合了。題主也可以試著把display改成inline-table，或者設置非0的margin、padding、border等，總之只要不滿足上述任一種情況，那么就會受“幽靈空白像素”（官方說法應該叫"strut"元素）的影響從而出現(xiàn)行高。

2017年4月9日 17:22
編輯回答
她愚我

在代碼<div><span></span></div>中
<span>.....</span>這部分組成內聯(lián)盒子

行框盒子包裹著一行內聯(lián)盒子，比如<div>...<span></span></div>，其中...<span></span>才是被行框盒子包裹。

最后，空白節(jié)點是出現(xiàn)在行框盒子前面，即strut...<span>...</span>

設置div元素的line-height就能發(fā)現(xiàn)<div><span>hahahahha</span></div>中，div的高度不等于span元素的高度，div元素的高度就是空白節(jié)點影響的

2017年5月25日 23:32
編輯回答
懶洋洋

重新詳細閱讀了一下幾篇相關的博客：
CSS深入理解vertical-align和line-height的基友關系
CSS float浮動的深入研究、詳解及拓展(一)
覺得理解沒有錯的話，原文的意思：幽靈空白節(jié)點應該是由font-size、line-height、vertical-align等相關的幾個屬性造成的，line boxes模型里面的span也算內聯(lián)盒子，不過只是觸發(fā)幽靈空白節(jié)點的必要條件之一而已！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .box {
      background-color: yellow;
      // font-size: 0;  // 注1
      // line-height: 0; // 注2
    }
    .box,
    .box > span {
      outline: 1px solid #333;
    }
    .box > span {
        // vertical-align: top; // 注3
    }
  </style>
</head>
<body>

  <div class="box"><span style="display:inline-block; width: 100px;"></span></div>

</body>
</html>

上面的例子，例如在chrome瀏覽器顯示下，默認font-size:16px、line-height: normal
當設置空白的span為display:inline-block時，line-height和vertical-align就起作用了，幽靈空白節(jié)點出現(xiàn)！可是嘗試一些取消注1注釋，或者更加清楚：先取消注2注釋，再取消注3注釋，可以看到幽靈空白節(jié)點是line boxes的高度(height，line-height)和垂直基準線對齊作用的結果~

這是我的一些理解，希望有所幫助，或者去詳細看下上面的文章？?

2017年8月16日 20:13