2015.01.22 CSS學習(顏色、Box Model)

CSS的顏色可以使用文字表達，也可使用16進制的顏色代碼
#FFFF00

前面2個設定紅色
中間2個設定綠色
後面2個設定藍色
每個顏色範圍從0~255(10進位)或00~FF(16進位)

16進位簡介：範圍從0~15
A=10 B=11 … F=15

頁面要如何知道在tag中間有多少水平和垂直的空格？
ANS：使用box model

block-level tags包含跟container相同寬度的隱形框架(box)
每個新的box會依照順序排下來

not block-level = inline-level
inline-level tags 不會設定超過他所需求的寬度
常見的inline-level tags <a><img><input><label>

如何將block-level轉為inline-level？
將block-level tags 的display屬性設定為inline

box model就是描述每個tag的box的外框、boxes之間的空格

box model有4個部分
1. content area實際顯示的內容
2. padding(top,right,bottom,left content area四周的空格)
3. border 加在上、下、左、右padding外
4. margin(top,right,bottom,left border四周的空格)

如何計算box的大小
the full box width = content area width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
the full box height = content area height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

如果想要在一段文字上方或右方加上一些空白，
一個選擇是調整padding
例：
h2{
padding-top: 6px;
padding-right: 3px;
padding-bottom: 0;
padding-left: 0;
}

或是直接寫成一行

h2{
padding: 6px 3px 0 0
}
例：
將一段文字加上外框
h2{
border-width: 6px;
border-style: solid;
border-color: black;
}

或

h2{
border: 6px solid black;
}

也可以只加其中一邊框線
h2{
border-bottom: 6px solid black;
}

margin與padding的使用方法相同
h2{
margin-top: 6px;
margin-right: 0;
margin-bottom: 6px;
margin-left: 0;
}

或

h2{
margin: 6px 0 6px 0
}

使用padding的時機？
不想用調整內容大小來調整box的大小時，就要使用padding用來控制box大小

使用margin的時機？
控制2個box之間的距離

以底下這個範例來看，可以很明顯的看出padding是在內容前加上空白，margin是整個內容連同框線一起往後退。

沒有設定任何margin和padding，為何會有空白？

ANS：
瀏覽器實際上會為沒有設定CSS的網頁設定一個預設的樣式若不想讓瀏覽器自動套用樣式，要在CSS的檔案最上方加上下面這段(要將不想自動套用樣式的頁面中所有使用到的tag列出)
html, body, h1, h2, h3, p, ol, ul, li, a{
padding: 0;
margin: 0;
border: 0;
}

padding也被用來調整每個清單項目(list item)之間的縮排
例：
ul{
padding: 0 0 0 50px;
}

ol {
padding: 0 0 0 50px;
}