Day7 [CSS介紹-2]

2017 iT 邦幫忙鐵人賽

DAY 8

Modern Web

網頁程式設計so easy系列第 8 篇

2017鐵人賽 css

smallone1

2016-12-08 19:37:09

48862 瀏覽

表格框線

當我們寫一個表格希望它有框線時，我們通常會這樣寫

<table border="1">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
</table>

當寫了border="1"時會讓表格變成雙層框線

這時可以以下面幾種屬性來改變樣式。
border-collapse：這個屬性預設為seperate，意思就是像上圖一樣，讓兩層框線分開。當希望讓兩框線變成一層時可以這樣寫→ border-collapse:collapse;

border-style：可改變框線的style。可改變的值有

none(預設)
dotted
dashed
solid
double
groove
ridge
inset
outset

以下為各個值呈現出來的結果

border-color：在td時，可指定框線顏色，如遇到只需要上框線需要上色可使用border-top-color指定顏色。如果想要一次上四種顏色，border-color:上右下左，可依照這個順序上色。也可以寫三個屬性值，此時值為border-color:上垂直下；也可以寫兩個屬性值，此時為border-color:水平(上下) 垂直(左右)
border-width：在td時，可指定框線寬度。和border-color一樣可以分開設定。
border-spacing：
border-radius：可畫出圓角框線。設四個屬性值時順序為左上、右上、右下、左下。例：設定為border-radius: 10px 20px 30px 40px;則圖為：

border綜合：框線粗細、顏色、樣式等屬性值順序可隨意排列，且不一定要全部指定。也可以四周各自指定。
例：

border: 10px red ridge;
border-left:solid yellow 10px;

範例

清單樣式

list-style-type：設定項目符號樣式。
無序清單樣式可設之值：

disc：實心原點
circle：空心圓點
square：實心方塊
none：不顯示項目符號
圖示：

範例

有序清單樣式可設之值：
(可參考之前在html章節介紹的type，可以有多種樣式)
有序清單可透過html使用type屬性來設定樣式，也可使用css(html的style屬性來設樣式。)
html：

<ol type="1">
  <li>1</li>
  <li>2</li>
</ol>

css：

<ol style="list-style-type: cjk-ideographic">
  <li>1</li>
  <li>2</li>
</ol>

可設之值請參考W3schools或官方文件

範例

list-style-image：設定項目符號圖案。例：list-style-image: url("XXX.gif");
list-style-position：設定項目符號位置。
可設之值：

outside(預設)：表示項目符號放在項目li之外。
inside：表示項目符號放在項目li之內。

範例

list-style綜合：例→ list-style: disc inside;

BOX模型

在網頁文件中，每個元素都是被矩形包起來的。
以上面list-style-type範例為例，將CSS加上：

*{
 border: solid blue 1px; 
}

將每個元素都加上藍色、1px的框線。
結果如下：

margin：邊界
border：框線
padding：內距。元素內容與框線間留白的部分。如果元素有設置背景，則padding區域也會有背景。
content area：元素內容。

上下區塊元素 block的margin會以大的優先，此稱為margin collapse。

區塊元素是由上而下依序排列(ex: div, form, h1~h6, header, hr, nav, ol, p, table, ul, body, ...)，行內元素則會由左而右排列(span)

(此圖兩個區塊元素的padding, border, padding皆設為10px)
圖中兩個粉紅框框代表兩個區塊元素的border，兩個區塊元素的margin皆設為10px，但由圖可以看出上面區塊元素與下面區塊元素的間距不是10px，就是margin collapse的緣故，所以上面區塊元素與下面區塊元素的間距會被設為10px。

區塊元素左右不會出現margin collapse的問題。

關於行內元素 inline的margin collapse。
行內元素的border、padding與上下行、前後內容會重疊。
範例
關於行內區塊元素 inline-block的margin collapse(ex: img元素)
它與其他inline或inline-block元素在一起時，會呈現左右並列的效果。即使排列在行內，但它預設會像區塊元素一樣有一定的寬高。不像行內元素會與週邊元素重疊。
範例
width、height會成content的width、height。
html：

<body>
    <h1></h1>
    <p></p>
</body>

css：

body {
  width: 100px;
  height: 110px;
}

* {
  margin: 10px;
  border: solid pink 10px;
  padding: 10px;
  background-color: BlanchedAlmond;
}

結果：

藍色顯示區域為body區域。

開發者工具：

可以看得出來，我當初在body設的height為110px=h1 margin 10px * 2+ h1 border 10px * 2+ h1 padding 10px * 2+ p margin 10px * 2+ p border 10px * 2+ p padding 10px * 2- 10px(margin collapse)
由此可知，我們設的height是不包含body的padding、border、margin的。這是在設計網頁時要很注意的地方。常見的方式就是在CSS多加上以下程式碼：

* {
  box-sizing: border-box; (預設：box-sizing: content-box;)
}

這樣我們所設的width就包含content+ padding+ border了！如果margin對於計算px也有問題時，可以再多設一層元素來控制長度、寬度。

元素定位

float：當元素下了float後，它會離開原本的排序。ex: float: left;，則元素就會往左"飄"。反之，如值為right，則元素會往右飄。
clear：clear: left;若左邊出現float區塊，則將本區塊向下移，直到左邊沒有區塊為止。right為相同道理。如果為clear: both;左右任一邊出現float區塊則將本區塊向下移，直到兩邊都沒有float區塊為止。
範例
position：除了可以使用float來調整區塊排序外，也可使用position屬性來指定區塊位置。可設定的屬性值為

static：採預設的排版方式
relative：先依預設方式將區塊排好位置後，再依top, right, bottom, left屬性將區塊移至相對於原位置的新位置。
absolute：用最接近的非static定位之上層元素再依top, right, bottom, left來決定位置。如上層元素都是static定位，則用瀏覽器視窗來決定位置。
fixed：以top, right, bottom, left來決定其在畫面上的位置，即使捲動頁面也不會影響此fixed區塊。

範例

進階範例