HTML 第十一章總結
# 第十一章總結:
本章的標題為：layout and positioning Arranging Element
##前言：
這一章節，通過已經知道的 box model 的概念，進行講述關於 layout 的知識，並且通過這些知識進行創造專業的設計和 multicolumn layouts.
##談談Flow
###對於block element
* 對 block element 來說， Browser 通過從上到下的方式進行 flow。
* 在每個block element bottom和 top 之間的 margin 是通過 collapse 來計算的。
###對於 inline element
* 對 inline element 來說，是通過從左上角到右下角的方式使得它們 next to each other 。
* 在同一行的 inline element 之間的 margin 是兩個 element 的 margin 之和。
###其他
whenever you have two vertical elements touching, they will collapse.當在one element nested inside another 的時候也是這樣。特殊的情況是：如果一個元素有 border ，那麽他它們不會 collapse.
##關於 float
###How to make an element float
1. 首先在 HTML 中給這個 element 一個identification
2. 然後在 CSS 中給它設置寬度
3. 然後利用 float 這個 property 進行設置。
最終，在 HTML 中的代碼如下：
```
#id{
width:200px;
float:right;
}
```
###float 在 flow 中的原理和帶來的問題
float 的 element 從normal element 中拿了出來，然後剩下的normal element 對 float 的 element 進行 ignore,但是在 normal element 中的 inline element 不會 igonore ，而會respect the borders.
但是這樣會帶來一個問題，就是在float element 和 normal element 之間的 background 的部分會 overlap。
這個問題可以通過兩個辦法解決：
1. 計算然後設定 margin 來解決，從而有一個好看的 gutter.
2. 通過 clear 這個 property 來解決問題，clear 的思路是先 look if there is nothing on its left side or right side,if there is, 然後通過 move 這個 element down until there is nothing on its left or right side.代碼為：
```
#id{
clear:right
}
```
##jello layout
###frozen layout 和 liquid layout
在liquid layout 中，當你對窗口的頁面進行 resize 的時候，文本會跟著 move,但是frozen layout 不會。
介於fozen layout 和 liquid layout 的是 jello layout ，這種方式下，element 的 width 不會變化，並且總是在頁面的中央。
代碼如下：
```
#id{
width=800px;
.....
margin-left:auto;
margin-right:auto;
}
```
##關於position
position 有
###absolute positioning 的原理和代碼
當進行 absolute position 的時候，在 Browser 進行 flow 的時候，首先將其從 normal element 中拿出來，然後根據其 top,right(或者 bottom,left)將其放置在一個位置，其他的 normal element 則 ignore it totally,並且inline element 也不會進行 wrap.
在 absolute positioning 的時候，有時候會遇到層疊的時候，這個時候假象有一個 z 軸，越大的數值越在上面，也就是 z-index.
代碼如下：
```
#id{
position:absolute;
top:100px;
right:200px;
width:280px;
z-index=1
}
```
###其他
####關於 absoulute position 和 relative position
如果 absolute element is nested within another element,it‘s positioned relative to containing element rather than the sides of the page.
relative position first flow into the page as normal,and then offset by specified amout.
####關於 position 這個 property
position 這個 property 有四個可以設置的 value；
* static:browser dicides where it goes, you can‘t control
* absolute:have a pisition relative to page
* fixed: have a pisition relative to the browser window(viewport)
* relative:具有offset 的功能
####設置 position 的 top 等的 value
可以有兩種數字進行設置：
1. 通過 px 的數值來進行設置
2. 通過%來進行設置，在這種方法下，元素的寬度是通過 width of browser 來變化的
#### fixed 的代碼
```
#id{
position:fixed;
top:350px;
left:-90px;
}
```
###absolute 的缺陷
根據原理，由於其他 element 會忽略它的存在，所以可能會產生 overlap，同時無法利用 clear 來進行解決。
##關於CSS table display
###一些概念
可以將 CSS table display 想象成一個 spreadsheet,它有 row 也有 column，然後每個單位為一個 cell.
###設置的步驟
在 HTML 中的步驟：
1. 給整個表格一個 <div id:>,比如<div id="tableContainer">
2. 然後給表格中的行一個<div id:>,比如<div id="tableRow">
3. 最後，給每一個表格中的 cell 一個 <div id>
在 CSS 中的步驟
1. 先給整個 table 進行設置：代碼為
```
div#tableContainer{
display=table;
}
```
2，然後給 table 的行進行設置，代碼為
```
div#tableRow{
display:table-row;
}
```
3,然後再對每個 cell 進行設置，代碼為：
```
#main{
display:table-cell;
}
```
###在設置中的其他註意點：
* 在進行了 display;table 的設置後，應該設置其 border-spacing,代碼如下：
```
div#tableContainer{
display=table;
border-spacing:10px
}
```
這個 border-spacing 的 property 指的是 cell 之間的 spacing,相當於 normal element 中 margin 的功能。也就是會和其他的 element 產生 gutter.
所以設置了 border-spacing 之後，就不需要 margin 這個 property 了.
?如果有多行的列表，可以用 class 進行設置。
HTML 第十一章總結