到處留心皆學問——由「display:inline-block;」致使的間距引起的思考

時間 2019-11-12

標籤到處留心學問 display inline block 致使間距引起思考欄目 CSS 简体版

原文原文鏈接

文章開始以前先作個小測試，請看如下代碼，選擇對應的頁面展現：javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>測試</title>
    </head>
    <style>
        ul{
            background: lightblue;
        }
        ul li{
            display: inline-block;
            background: pink;
            padding: 0;
            margin: 0;
        }
    </style>
    <body>
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </body>
</html>

對應頁面效果：css

A:html

B:java

恩，若是你選擇好了，能夠想一下本身爲何選擇這個結果。而後若是緣由很清晰，恭喜你，後面的就不用看下去了￣□￣｜｜。瀏覽器

若是，還有點迷惑，能夠日後再蜻蜓點水下^_^。佈局

如今，切入正題。在作一個demo時遇到了一個問題：我有五個li須要並排排列，而後天然而然的我給它們設了display:inline-block;可是，過了好久以後發現，除了我寫的樣式外，它默認有一個間距，咱們都不喜歡不可控的事，在佈局的時候亦是如此，樣式中檢查了查了很久margin，padding，定位等等都不是，因而就求救萬能的谷歌，原來好多人都遇到過這個問題。測試

1、間距緣由

因爲換行致使的空白符致使的。空白符，white space，W3C 9.1中定義包括以下元素：ASCII 空格 ( )ASCII 製表符 (	)ASCII 換頁符 ()零寬度空格 ()。W3C 9.2中進一步進行闡述，折行也被定義爲空白符，「折行被定義爲一個回車符（），一個換行符 line feed (
)，或者一個回車、換行的組合。全部的折行構成了空白符」。字體

一般狀況下，對於多個連續的空白符（空格，換行符，回車符等），瀏覽器會將他們合併爲一個空白符。CSS 中由 white-space 這個屬性來控制：spa

white-space：normal | pre | nowrap | pre-wrap | pre-line翻譯

默認值：normal

normal：默認處理方式。

pre：用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字超出邊界時不換行。可查閱 pre 對象

nowrap：強制在同一行內顯示全部文本，直到文本結束或者遭遇 br 對象。

pre-wrap：用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字碰到邊界時發生換行。

pre-line：保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。

這樣，知道了是誰在搗亂就能夠去轟走它了。空白符能夠刪除，也就是說把全部li放在一行，顯然這樣不太可讀和整齊；第二種方法，空白符也是一個字符，既然是字符就會受字體大小約束，它是ul的子元素，那麼咱們能夠給父元素設置字體大小爲0px，這樣雖然空白符還在，可是已經顯示不了了。爲了避免影響後面正常字體的顯示記得在li內部要設置正常的大小值。知識有限先給出這兩種解決方法，確定還有不少其餘更好的方法，歡迎知道的小夥伴們評論區告知。

2、延伸

在查資料的過程當中，看到了一些相關的知識點，先簡單記錄，可能有些突兀和不連貫。後面有時間了繼續補充完整。

1.hasLayout ：

haslayout是IE7-瀏覽器的特有屬性。hasLayout是一種只讀屬性，有兩種狀態：true或false。當其爲true時，表明該元素有本身的佈局，不然表明該元素的佈局繼承於父元素。

觸發hasLayout的條件：
position: absolute
float: left|right
display: inline-block
width: 除「auto」外的任意值
height: 除「auto」外的任意值（例如不少人清除浮動會用到 height: 1% ）
zoom: 除「normal」外的任意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp
writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp
在 IE7 中，overflow 也變成了一個 layout 觸發器：
overflow: hidden|scroll|auto （這個屬性在IE以前版本中沒有觸發 layout 的功能。）
overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的屬性，還沒有獲得瀏覽器的普遍支持。他們在以前IE版本中一樣沒有觸發 layout 的功能）
hasLayout更詳細的解釋請參見 old9翻譯的大名鼎鼎的《On having layout》一文（英文原文：http://www.satzansatz.de/cssd/onhavinglayout.htm），因爲old9博客被牆，中文版地址：
IE8使用了全新的顯示引擎，據稱不使用 hasLayout屬性了，所以解決了不少深惡痛絕的bug。

2.letter-spacing和word-spacing

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

object.style.letterSpacing="3px"

letter-spacing : normal | length | inherit （檢索或設置對象中的文字之間的間隔）

默認值是normal。length能夠爲負值。

word-spacing : normal | length | inherit （檢索或設置對象中的單詞之間插入的空隔）

p
{ 
word-spacing:30px;
}

默認值是normal。length能夠爲負值。　

3.Block formatting contexts （塊級格式化上下文，後文簡稱爲BFC）

CSS3裏面對這個規範作了改動，稱之爲：flow root，而且對觸發條件進行了進一步說明。
那麼如何觸發BFC呢？
float 除了none之外的值
overflow 除了visible 之外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素
須要注意的是，display:table 自己並不會建立BFC，可是它會產生匿名框(anonymous boxes)，而匿名框中的display:table-cell能夠建立新的BFC，換句話說，觸發塊級格式化上下文的是匿名框，而不是 display:table。因此經過display:table和display:table-cell建立的BFC效果是不同的。
fieldset 元素在www.w3.org裏目前沒有任何有關這個觸發行爲的信息，直到HTML5標準裏纔出現。有些瀏覽器bugs（Webkit，Mozilla）提到過這個觸發行爲，可是沒有任何官方聲明。實際上，即便fieldset在大多數的瀏覽器上都能建立新的塊級格式化上下文，開發者也不該該把這當作是理所固然的。CSS 2.1沒有定義哪一種屬性適用於表單控件，也沒有定義如何使用CSS來給它們添加樣式。用戶代理可能會給這些屬性應用CSS屬性，建議開發者們把這種支持當作實驗性質的，更高版本的CSS可能會進一步規範這個。
BFC的特性： 1)塊級格式化上下文會阻止外邊距疊加當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，若是這兩個相鄰的塊框不屬於同一個塊級格式化上下文，那麼它們的外邊距就不會疊加。 2)塊級格式化上下文不會重疊浮動元素根據規定，一個塊級格式化上下文的邊框不能和它裏面的元素的外邊距重疊。這就意味着瀏覽器將會給塊級格式化上下文建立隱式的外邊距來阻止它和浮動元素的外邊距疊加。因爲這個緣由，當給一個挨着浮動的塊級格式化上下文添加負的外邊距時將會不起做用（Webkit和IE6在這點上有一個問題——能夠看這個測試用例）。 3)塊級格式化上下文一般能夠包含浮動詳見： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots