如果此時你也在自學中，請使用 FireWorks CS6 進行切圖測距等，百度一下吧~
Fireworks的基本使用
新建文件 ctrl+n
打開文件 ctrl+o
調出和隱藏標尺 ctrl+r
清除輔助線： 視圖---輔助線----清除輔助線
放大鏡 z 放大鏡狀態下alt+鼠標左鍵 縮小
抓手 快捷鍵 空格
測量距離 ★先拉出2根輔助線 再在抓手的狀態下按下shift即可；
CSS行高 line-height
瀏覽器默認文字大小：
瀏覽器默認文字大小： 16px ；
行高 ： 是基線與基線之間的距離
行高 = 文字高度 + 上下邊距
一行文字行高和父元素高度一致的時候，垂直居中顯示。
行高的單位：
| 行高單位 |
父元素文字大小 |
子元素文字大小 |
行高 |
給父元素設置行高 |
子元素行高結果 |
| 20PX |
20px |
30px |
20px |
行高單位是px |
行高=父元素行高 |
| 2em |
20px |
30px |
40px |
行高單位是em |
行高=父元素文字大小*行高值（與子元素文字大小無關 |
| 150% |
20px |
30px |
30px |
行高單位是% |
同上 |
| 2 |
20px |
30px |
40px |
行高單位無 |
行高=子元素文字大小*行高值 |
總結： 不帶單位的時候，行高是和子元素文字大小相乘
Em和 % 的行高是和父元素文字大小相乘
推薦使用像素為單位
盒子模型
盒子模型：把html整個頁面元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。
每個矩形都由元素的 內容·內邊距（padding）·邊框（border）和外邊距（margin）組成
邊框 border
語法： boder : border-width | border-style | border-color
Border-width 設置邊框寬度單位以px為主 12px
Border-style 設置邊框樣式 solid 實線 dotted 點線 dashed 虛線
Border-color 設置邊框顏色
Border - top -style ：solid ； 上邊框線型
Border- top - color：red ； 上邊框顏色
Border- top - width：5px ； 上邊框寬度
Border-bottom-style：dotted； 下邊框為點線型
Border-bottom-width：5px ； 下邊框寬度為5px
border-left- style：dashed ； 左邊框為虛線型
Border-left-width：5px ； 左邊框寬度
Border-right-style：dotted ； 右邊框為點線型
邊框的連寫 沒有順序要求，線型為必寫項:
Border-top：red solid 5px ；
四個邊框相同的寫法：
Border ： 12px solid red ；
邊框合並： border-collapse ：collapse 摧毀本框與其交叉的地方
此處一直搞不懂為什么合並之后就突然變細了 ，仔細琢磨之后發現：
邊框與表格是分別建立的，表格每個都有獨立的4條框，因此在合並后，兩條線合並為了1條。（真TM簡單...） 具體演示如下
此時隱藏了表格
此時隱藏邊框
此時可看出，表格在邊框內部，在合並之后 就變成了細線表格 且表格的顏色，覆蓋了父系邊框的顏色
| 輪廓線 |
outline-style:none 取消輪廓線 |
| 獲取焦點 |
:focus 獲取鼠標光標狀態 |
| 取消表單邊框 |
border:0 none; 兼容性好 |
| label標簽 |
<label for="ID名"> 友好性 |
盒模型之內邊距 padding
| padding:10px |
上，下，左，右距離分別是10px |
| padding:10px 40px |
上下10px 左右40px |
| padding:10px 40px 20px |
上10px 左右40px 下20px |
| padding:10px 20px 30px 40px |
上10 右20px 下30px 左40px |
Padding-top： 上內邊距 padding-right： 右內邊距
Padding-bottom：下內邊距 padding-left：左內邊距
內邊距撐大盒子的問題
width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
影響盒子寬度的因素
內邊距影響盒子的寬度
邊框影響盒子的寬度
盒子的寬度= 定義的跨度+邊框寬度+左右內邊距
集成的盒子一般不會被撐大
包含（嵌套）的盒子，如果盒子沒有定義寬度，給子盒子設置左右內邊距，一般不會撐大盒子
盒子寬度 = 盒子的寬度 + 盒子左右內邊距padding + 邊框左右寬度 border
盒子模型之外邊距（maigin）
用法與padding一樣，margin對盒子寬度不會有影響
Margin - top / right / bottom / left margin：0 auto； auto設置為相對邊的值
外邊距合並疊加：當兩個外邊距相遇時，他們將星恆一個外邊距，合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者/
當一個元素出現在另1個元素上面的時候，第一個元素的下邊距與第二個元素的上邊距會發生合並。 邊距合並問題只發生在塊級元素之間
解決問題：1 給父元素設置邊框 2 給父元素設置overflow：hidden