iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
0

我們前幾篇認識了基本的CSS樣式,了解了文字、邊框、背景怎麼用顏色跟單位數值來設定樣式 ; 接著認識了box model,知道了單一個元素的box結構。

今天,我們要認識的是視覺格式化模型,這是CSS規定boxes在瀏覽器上的排列、以及boxes如何影響彼此位置的規則,了解它,我們才知道怎麼照規則切出我們要的版。

CSS規範對視覺格式化模型的描述:

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

上列描述是指,在視覺格式化模型的規則中,每個文檔中的元素會按照box model的結構生成0個至多個box,它們會按照下列規則排版:

  • box的尺寸及類型:

    • box尺寸
      我們在box model那篇介紹了box的結構是由content areapaddingbordermargin組成,而這些各自區域的數值會影響box如何呈現在瀏覽器上、佔多少的空間。

    • 類型(type)
      HTML本身的元素就有block-elementinline-element兩個類型,前者產生block-box佔滿父元素的寬度垂直排列,並且可以設定寬高 ; 後者會產生inline-box不佔滿寬度水平排列,無法設定寬高。

      CSS也可以決定元素被顯示的類型,叫display屬性,我們會在之後的筆記認識到。它可以決定元素按照block的方式排列,或是按照inline的方式排列,更有多種類型如inline-blocknonetablelist-item等。

  • 不同的定位格式(普通流向normal flow, 浮動屬性float,還有絕對定位absolute positioning

    • normal flow
      我們目前認識到的block排列跟inline排列,以及未來在display屬性即將認識到的參數值都屬於normal flow的範疇。上下垂直排列,左右水平排列都是normal flow的規則。

      normal flow中的元素透過佔位影響彼此的位置 ; 脫離normal flow的元素,則不影響其它元素的位置,它自己獨立出來,照另一個定位格式運作。

    • 浮動屬性float
      float屬性是脫離narmal flow的定位格式,我們將在之後的筆記介紹float。

    • position: absolute
      position也是CSS的屬性,它的其中一個參數absolute是脫離normal flow的定位格式,我們會在position的筆記中介紹absolute及其它參與in flow(in normal flow)的參數值。

  • HTML文檔中的順序及層級關係

    • HTML文檔的屬性寫入順序會影響元素的排列順序:

    • 層級關係會影響是否繼承樣式、排列位置(例如<table><tr><td>)。
      <table>是block-element、<tr>是block-element、<td>是inline-element。子元素<tr>在父元素<table>的範圍內垂直排列 ; 子元素<td>又在父元素<tr>的範圍內水平排列:

      <table>
        <tr>
          <td>inline-box</td>
          <td>inline-box</td>
        </tr>
        <tr>
          <td>inline-box</td>
          <td>inline-box</td>
        </tr>
      </table>
      

  • 其它外在因素 (例如viewport的size、引入的圖片原始尺寸等)

    • viewport的尺寸

      切版時,一定要考慮到視口的尺寸,認識目前市面上常用的電腦螢幕規格、ipad或iphone螢幕規格、android手機螢幕規格等,都是很重要的。未來必須掌握的RWD自適應網頁技術,就是讓網頁版型適應各種不同螢幕尺寸。
      這個網站SCREEN SIZ.ES可以看到各種顯示器的物理尺寸、像素值還有使用率。
    • 引入的圖片原始尺寸
      <img>替換元素可以引入圖片,而圖片再被引入之前,就有它自己本來的尺寸。當圖片被引入後,它就會顯示本來圖片的大小,而影響元素的佔位、影響其它元素的位置。

Visual formatting model在CSS規範的篇章非常龐大,這個知識充斥在我們寫入元素的一開始,到後來用CSS屬性去影響佈局,都會牽涉到Visual formatting model,本篇僅筆記基本概念。接下來的幾篇,我們會再介紹切版常用到的基礎佈局,那就明天見~

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


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

尚未有邦友留言

立即登入留言