基本方框
CSS的核心假設所有的元素都會產生一個以上的矩形方框(element box)。每個元素方框的中心是內容區域(content area)，內容區域的周圍是不定量的內距(padding)、邊框(border)、輪廓(outline)、邊界範圍(margin)。這些元素都能夠透過特定屬性，如margin-left或padding-top分別進行設定，輪廓沒有特定方向限定的屬性也比較少用到。內容的背景預設是在內距之內，邊界範圍一定是透明的，能過顯示出親代元素的背景。內距不可以為負值，但是邊界範圍可以是負值。邊框是透過定義solid或inset等樣式產生，顏色則是由boder-color設定，若沒有指定顏色，邊框會是內容區的前景顏色。元素的方框的各個部份會受到width或height屬性影響。
方框種類介紹
正常走向(normal flow)
一般西方語言由左而右，由上而下的文字呈現方向，同時也是傳統的HTML文件排版文字使用的方向。大多數的元素都會在正常的流向，要讓元素離開正常流向唯一的方法是浮動(float)、定置(positioned)或放到flexble box或grid layout元素當中。非置換元素(nonreplaced element)
這類元素的內容包含在文件當中，例如段落(p)就是非置換元素，可以在元素內看到段落的文字內容。置換元素(replaced element)
這種元素是作為其他東西的替身，置換元素最典型的例子是<img>元素，指向一個會插入文件流向的影像檔，插入的位置就是<img>出現的位置，大多數的表單元素都是可置換元素。如<input type="radio">。根元素(root element)
文件樹最上層的元素，就是<html>元素。區塊方框(block box)
段落、標題、或div等元素產生的方框，在正常的流向中，這類方框前後會換行，使得區塊方框會形成垂直堆疊。而透過display:block宣告也能讓元素產生區塊方框。行內方框(inline box)
如strong或span等元素產生的方框，這類方框前後不會產生斷行，透過display:inline宣告能讓元素產生行內方框。行內區塊方框(inline-block box)
這個比較特別，內部行為類似區塊方框，但是外部行為如同行內方框，它的行為類似於置換元素，可以想像將div元素放到文字行內，就是這那個樣子。
水平屬性
設定水平格式的七個屬性分別為margin-left、border-left、padding-left、width、padding-right、border-right、 margin-right，這些屬性與區塊方框的水平格局息息相關。
<p style="width:200px;">my text here</p>
<p style="width:200px; padding:10px; margin:20px";>my text here</p>
圖示第一行的段落內容為200px；但是第二行則必須再加上兩側內距各10px，並加上兩側邊界範圍20px，所以總計寬度為260px。
使用auto
如果將margin-left設為auto，margin-right和width有確定值，這時auto的屬性就會設為對應需要的長度。
如下方所示margin-left就等於500-100-250=150px
div {width:500px;}
p {margin-left:auto; margin-right:100px; width:250px}
兩個auto
我們可以在左右對稱的屬性，左右都使用auto，如此會將內容呈現居中的狀態。
如下所示：margin-left為100px，margin-right也會是100px
div {width:500px;}
p {margin-left:auto; margin-right:auto; width:300px}
百分比
當寬、內距、邊界範圍設定為百分比時，也必須符合總數加起來等於100％的規則。
<p style="width:67%; padding-right:5%; padding-left:5%; margin-right:auto; margin-left:5%">my text here</p>
垂直屬性
如同水平格式，垂直格式也包含了7個屬性：margin-top、border-top、padding-top、height、padding-bottom、 border-bottom、margin-bottom。這七個屬性值的總和必須等於區塊方框的高。
管理line-height
透過將em單位與font-size有所變化的元素一同使用，將可避免各行間發生重疊。如下所示：
p {line-height:1em;}
big {font-size:250%; line-height:1em;}
小結
基本視覺格式讓我們對網頁的版面布局有了第一步的認識。而CSS的格式化模型多又細微，無法在此一一舉立說明。唯有在實際操作過程中，若有需要再進一步去查詢。下一篇文章，將介紹內距、邊框、輪廓、邊界範圍。
![[第六週] CSS Part2 - 裝飾起來吧](/@peichang6/99c942d7337e406cab74d3e67d8d5057?utm_source=coderbridge-com&utm_medium=indie_related_post_img&utm_campaign=Day03 - CSS基本視覺格式_[第六週] CSS Part2 - 裝飾起來吧_@peichang6_https://static.coderbridge.com/images/covers/default-post-cover-3.jpg)
