iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
0

上一篇我們知道了block box會參與BFC的佈局 ; 這篇所說的IFC則是inline box所參與的佈局,而IFC是block contaner box創造出給inline box遵從的佈局規則。

IFC的佈局特性:

  • box的左外緣會貼著block container的左內緣,一個接一個水平排列(若normal flow是由右往左就反過來)。

    <div>
      <img src="pig.png">
      <span>我是span</span>
      <a href="">我是連結</a>
      <input type="text">
    </div>
    

  • box與box之間由水平方向的margin隔開,沒有margin collapse的現象。

  • box所遵從的水平行叫做line boxline box的寬度隨著block container的寬度伸縮,高度則是被inline box撐高。

    line box的寬度也會被float元素影響(這會在float屬性介紹到)。

IFC裡的高度

IFC裡的佈局,沒有垂直的margin,而inline box本身也無法設定寬高。當我們想要決定水平排列的inline box高度時,可以使用CSS的屬性line height(行高)。

span {
  background-color: pink;
  line-height: 3;
}

替換元素可以調整寬高

雖說inline box不能夠像border boxwidthheight屬性調整寬高 ; 可是在HTML裡有一種叫replaced element(替換元素)是可以調整寬高的。

我們曾提過replaced element的特殊性是,它的內容不是文檔的內容,它是透過引入外部資源來呈現內容的,像是<img>
<video><input>(在HTML spec被歸類為replaced element ; 在CSS裡被歸類為non-replaced element,然而它也能調整寬高,故列於此)。

  • <img><input>都為inline元素,但它們都可以使用widthheight調整寬高:

    img {
        width: 300px;
    }
    
    input {
      width: 300px;
      height: 50px;
    }
    

    替換元素的box寬高改變了,line box也同時被撐高:

目前為止都是用元素本身的類型來講解block boxinline box參與的formatting context,接下來就會來認識display這個屬性值,它可以改變box本身參與的formatting context,也可改變box內部的formatting context,提供給後代元素的佈局環境。那明天見~

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。/images/emoticon/emoticon41.gif


上一篇
Day25 CSS:BFC(Block formatting context)
下一篇
Day27 CSS:Display
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言