初識CSS

文字排版

名稱	代碼
字體	font-family
大小	font-size
顏色	color
粗體	font-weight:bold
斜體	font-style:italic
下劃線	text-decoration:underline
刪除線	text-decoration:line-through

段落排版

縮進	text-indent:2em
行間距（行高）	line-height:1.5em
中文字間距、字母間距	letter-spacing:50px
單詞間距	word-spacing:50px;
對齊（塊狀元素）	text-align:center

元素分類

經常使用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

經常使用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

經常使用的內聯塊狀元素有：

<img>、<input>

什麼是塊級元素

設置display:block能夠將元素顯示爲塊級元素

塊級元素特色：

一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

固然塊狀元素也能夠經過代碼display:inline將元素設置爲內聯元素

內聯元素特色：

一、和其餘元素都在一行上；

二、元素的高度、寬度及頂部和底部邊距不可設置；

三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

內聯塊狀元素（inline-block）就是同時具有內聯元素、塊狀元素的特色，代碼display:inline-block就是將元素設置爲內聯塊狀元素。(css2.1新增)，<img>、<input>標籤就是這種內聯塊狀標籤。

inline-block 元素特色：

一、和其餘元素都在一行上；

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

盒子模型

• Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
• Border(邊框) - 圍繞在內邊距和內容外的邊框。
• Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
• Content(內容) - 盒子的內容，顯示文本和圖像。

一、border-style（邊框樣式）常見樣式有：

dashed（虛線）| dotted（點線）| solid（實線）

二、border-color（邊框顏色）中的顏色可設置爲十六進制顏色，如:

border-color:#888;//前面的井號不要忘掉。

三、border-width（邊框寬度）中的寬度也能夠設置爲：

thin | medium | thick（但不是很經常使用），最常仍是用像素（px）

css佈局模型

一、流動模型（Flow）
二、浮動模型 (Float)
三、層模型（Layer）

流動模型

第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，由於在默認狀態下，塊狀元素的寬度都爲100%。實際上，塊狀元素都會以行的形式佔據位置。如右側代碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示爲100%。

第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

右側代碼編輯器中內聯元素標籤a、span、em、strong都是內聯元素。

浮動模型

float

什麼是層模型

如何讓html元素在網頁中精肯定位，就像圖像軟件PhotoShop中的圖層同樣能夠對每一個圖層可以精肯定位操做。CSS定義了一組定位（positioning）屬性來支持層佈局模型。

一、絕對定位(position: absolute)

二、相對定位(position: relative)

三、固定定位(position: fixed)

層模型--絕對定位

若是想爲元素設置層模型中的絕對定位，須要設置position:absolute(表示絕對定位)，這條語句的做用將元素從文檔流中拖出來，而後使用left、right、top、bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行絕對定位。若是不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。

層模型--相對定位(保留自身位置)

若是想爲元素設置層模型中的相對定位，須要設置position:relative（表示相對定位），它經過left、right、top、bottom屬性肯定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(而且元素像層同樣浮動了起來)，而後相對於之前的位置移動，移動的方向和幅度由left、right、top、bottom屬性肯定，偏移前的位置保留不動。

從效果圖中能夠明顯的看出，雖然div元素相對於之前的位置產生了偏移，可是div元素之前的位置仍是保留着，因此後面的span元素是顯示在了div元素之前位置的後面。

層模型--固定定位

fixed：表示固定定位，與absolute定位類型相似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）自己。因爲視圖自己是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，所以固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。如下代碼能夠實現相對於瀏覽器視圖向右移動100px，向下移動50px。而且拖動滾動條時位置固定不變。

Relative與Absolute組合使用

參照定位的元素必須是相對定位元素的前輩元素：

參照定位的元素必須加入position:relative;

盒模型代碼簡寫

margin:10px 15px 12px 14px;/*上設置爲10px、右設置爲15px、下設置爲12px、左設置爲14px*/
margin:10px;/*上設置爲10px、右設置爲10px、下設置爲10px、左設置爲10px*/
margin:10px 20px;/*上設置爲10px、右設置爲20px、下設置爲10px、左設置爲20px*/
margin:10px 20px 30px;/*上設置爲10px、右設置爲20px、下設置爲30px、左設置爲20px*/

字體縮寫

body{
    font:12px/1.5em  "宋體",sans-serif;
}

顏色

16進制	顏色
000
f00
0f0
00f
0ff
f0f
ff0
fff(白)
ccc

長度

px:像素點

em:參照文字大小單位,好比如今的字體大小是16px,那麼1em=16px

百分比:參照文字大小,好比50%=16px*50%=8px