本文爲閱讀《Head First HTML 與 CSS》的css部分的讀書筆記，方便回顧書上的知識，另一篇爲Head First HTML 與 CSS》讀書筆記之HTML篇

基本

常識與實踐

css的每一個語句包括一個場所，以及這個場所的一個屬性，還要應用到這個屬性一個樣式,一個典型的css規則如下:

p { // 需要增加樣式的元素: p,這稱爲選擇器(selector),匹配頁面中的所有p元素
	background-color: red; //背景色爲紅色      格式: < 屬性:值; >
	border: 1px solid gray; //邊框: 1像素,實線,灰色
}

css 的註釋: /* */
css驗證工具,你還可以把驗證圖標放到你的web頁面中

鏈接方式

內部鏈接

要爲html直接增加css樣式，需要在<head>元素中增加開始和結束style標記，css規則放在裏面

<style>
	p {
	   color: gray;
	}
</style>

css文件外置

另一種方式將css文件外置，如style.css,作爲樣式表(stylesheets),然後從html衆創建一個到這個文件的外部鏈接,用<link>元素,用外部樣式表的好處是要修改整個網站的樣式，只要進入這個樣式表，對css進行幾處修改即可。如:

<link type="text/css" rel="stylesheet" href="lounge.css" >
#放到<head>元素中,在html5中不再需要type這個屬性(可選),rel(relation)指定html與所鏈接文件間的關係,這裏指我們要鏈接到一個樣式表
#link是一個void元素

多樣式表

使用多個樣式表,順序很重要，一個樣式表會覆蓋在它上面鏈接的樣式表中的樣式,有時會有一個樣式表作爲頁面的基礎樣式，要修改樣式，鏈接這個樣式表，然後在下面提供自己的樣式表，指定要修改的樣式,如下所示:

<link rel="stylesheet" href="corperate.css">//總公司樣式
<link rel="stylesheet" href="beverage-division.css">//部門對總公司的樣式做了一些補充，甚至可以覆蓋公司的樣式
<link rel="stylesheet" href="lounge-seattle.css">//西雅圖休閒室對樣式表做了自己的調整

簡寫

css屬性太多，能不能不費吹灰之力就指定這些屬性呢？可以把同一屬性的值結合起來寫成一句,即簡寫。

簡寫格式

padding

padding: 0px 40px 30px 20px;,順序是上右下左,順時針有木有,如果都相同可以用padding: 20px;

padding-top: 0px;
padding-right: 40px;
padding-bottom:30px;
padding-left: 20px;

margin

上面的padding格式同樣對margin也適用,還有另一種方法,如果上下一樣，左右一致,可以這樣寫:margin: 0px 20px,前面指定上下，後面指定左右。

border

邊框屬性簡寫 border: thin solid #007e73;,可以用你喜歡的任何順序。

background

背景簡寫 background: white url(images/cocktail.gif) repeat-x;，同樣順序隨便

字體

字體簡寫的格式稍微複雜一些:

font : font-style font-variant font-weight font-size/line-height font-family

font的屬性中font-size必須有
font-size前的屬性是可選的，組合任意，不過必須出現在font-size之前
line-height是可選的，只要在font-size後加/然後指定行高即可
font-family名之間要使用逗號分隔
如: font : small/1.6em Verdana, Helvetica, Arial,sans-serif;

簡寫的優劣

不一定要用簡寫形式，有些人覺得長形式更可讀。
簡寫的好處: 縮寫css文件大小，輸入更快。
簡寫的不足: 如果存在問題，或者順序有誤，比較難調試
簡寫記起來複雜，可以用參考手冊

選擇

子孫選擇器

父元素和子孫元素名之間有一個空格，子孫選擇器會選擇所有子孫，包括這個元素中嵌套的所有，不管嵌套多深，例如

#elixirs h2 {//選擇elixirs子孫的所有h2
	color: black;
}

直接孩子

如果要選擇直接的孩子,用>

#elixirs>h2 {//選擇elixirs的直接孩子h2
	color: black;
}

複雜選擇

更復雜的選擇,方法還是一樣

#elixirs blockquote h2 {//選擇elixirs中的blockquote中的h2元素
	color: blue;
}

規則添加

要爲多個元素編寫一個規則，只需要在選擇器之間加上逗號，如 "h1,h2"。

h1,h2 {// 多個選擇器
 font-family: sans-serif;
 color: gray;
}

元素可以指定多次規則,例如我們想給h1添加下邊框，但是不想給h2頁也加上，也不想分解上面的規則，可以給h1再增加一個屬性:

h1,h2 {
 font-family: sans-serif;
 color: gray;
}
h1{
border-bottom: 1px solid black;
}

把元素的所有共同樣式歸組在一起(如果改變，只需要在一個規則中修改)，然後把一個元素特定的樣式寫在另一個規則中.

類

當我們用選擇器選擇元素使用一個規則時，會對所有該元素應用這個樣式，所以如何單獨地選擇這些元素呢？這裏就需要類class，class可以定義一類元素，對屬於該類的所有元素應用樣式.要將一個元素加入一個類，只需要增加屬性"class"，並提供類名,如"greentea":

<p class="greentea">
...
</p>

類元素選擇器

先選擇這個類中的元素,再用"."指定一個類,最後是類名,如:

p.greentea {
  color: green;
}

添加類元素

如果想對所有<blockquote>也做同樣的處理，可以:

blockquote.greentea,p.greentea {
  color: green;
}
<blockquote class = "greentea"

類選擇器

如果想把<h1>,<h2>,<h3>,<p>和<blockquote>都增加到greentea呢？要對類中的所有元素都用同一樣式可以用:

.greentea{
  color: green;
}
/*省略所有元素名,只有一個點,則會應用到所有成員*/

多類元素

元素可以有多個類,例如:

<p class="greentea raspberry blueberry"
#各個類名用空格分隔
#類中順序不重要

特定元素選擇器

如果多個選擇器都選擇了一個元素呢？例如上面的3個類都與p元素匹配，並且都定義了color屬性，那麼那個會勝出?

如果某個規則更特定，則選擇更特定的元素
如果特定程度相同，那麼會選擇css文件中最後列出的規則，例如下面的例子中會選擇p.blueberry的規則:

p { color : black;} // 對於所有段落
.greentea { color: green;} //對於所有greentea類，比上面特定
p.greentea { color : green;} //只選擇greentea類中的段落,比上面特定
p.raspberry { color : blue;} //同上,與greentea特定程度相同
p.blueberry { color : purple;} //同上,與greentea特定程度相同

id

id的作用

id屬性用來唯一地命名元素,通常你想對多個元素重用某些樣式，才能真正發揮類的作用。但是如果只有一個元素需要樣式，或者頁面上只有一個元素，那就應該使用id,每個元素只能有一個id，頁面中只能有一個元素擁有特定id,一個元素有一個id，同時可以屬於一個或多個類,id中不允許出現空格或其他特殊字符,如

<p id="footer">...</p>

選擇元素

用id選擇一個元素,需要在id前面使用一個#字符(類是[.]),id選擇器只與頁面中的一個元素匹配

#footer{
  color: red;
}//選擇id爲footer的任意元素
p#footer{
  color: red;
}//選擇id爲footer的<p>元素

實踐建議

在複雜頁面中，可能有些頁面把id指定給一個段落，有些頁面分配給了一個列表，那麼需要爲該id定義多個規則,根據頁面上不同類型的元素應用不同的規則,如p#someid和blockquote#someid
類名要以一個字母開頭，不過id名可以以一個數字或字母開頭，但它們都不能有空格

繼承

樣式繼承

爲p選擇器增加font-family屬性時，也會影響到<p>元素中內部元素的字體。
元素能夠從他們的父元素繼承樣式。
不是所有的樣式都能繼承,只有一部分,如font-family。
並不是所有元素都會繼承，如img沒有文本，所以不會受到字體影響。
繼承的樣式可以覆蓋,例如給<em>提供一個特定的規則來覆蓋body中指定font-family,瀏覽器會使用更特定的規則：

body {
  font-family : sans-serif;
}

em {
  font-family: serif;
}

那哪些元素能夠繼承

如果樣式會影響你的文本外觀，那麼所有這些樣式都能繼承,如color,font-family,font-size,font-weight,font-style等和字體相關的屬性
其他屬性不能繼承，如邊框，因爲如果body元素有邊框，不表示你希望body內的所有元素都有邊框
根據常識確定，或者試試看

層疊

瀏覽器會用多個樣式表組織樣式，首先是你的ccs所有樣式表，其次是用戶創建的樣式，最後瀏覽器本身會維護一組默認樣式
給定一組樣式表中的一組樣式，瀏覽器會以層疊的方式確定具體使用哪個樣式
讀者可以在他的css屬性上加上!important，那他就能覆蓋你的樣式
瀏覽器需要選擇最特定的規則進行顯示
特定性由3個數開始000：
第一位: 這個選擇器包含id嗎？每個id加1分
第二位: 這個選擇器包含類或僞類嗎？每個類和僞類加一分
第三位: 這個選擇器包含元素名嗎？一個元素名加一分
把它們讀作真正的數,100>010>001，例如h1.greentea的特定性值爲011,ol li p的特定性爲003。
瀏覽器首先收集樣式表找到所有的聲明,然後對所有匹配的規則按作者，讀者和瀏覽器排序，再按特定性對組內的所有聲明分別排序，
最後對於衝突的規則，按照他們在各個樣式表中出現的順序排序，如果兩個規則得分相同，最後出現的規則勝出。

媒體查詢

link媒體查詢

你可能想針對將要顯示頁面的設備調整頁面的樣式，可以用media屬性,在link元素中增加這個屬性.如

<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="lounge-print.css" media="print">
# 其他屬性包括min-device-width,max-device-width,orientation(橫向landscape,縱向portrait)

css媒體查詢

可以直接在css中增加媒體查詢,使用@media規則,把對所有媒體類型都通用的規則放在@media規則下面,例如

@media screen and (min-device-width: 481px){//當設備屏幕寬度大於480px時使用
#guarantee {
  margin-right: 250px;
}
}
@media screen and (max-device-width: 480px){//當設備屏幕小於等於480px時使用
 #guarantee {
   margin-right: 30px;
 }
}
@media print { // 如果要打印頁面，使用該規則
body {
  font-family: Times, "Times New Roman", serif;
}
}

實踐建議

如果css文件相當龐大，建議使用link元素
除了給出設備的媒體屬性，如果你更關心瀏覽器大小，可以用max-width和min-width

屬性

盒模型

盒模型是css看待元素的一種方式，css將每個元素看作由一個盒子表示,每個盒子由一個內容區以及可選的內邊距，邊框和外邊距組成。由內而外分別是:

內容區: content ,包含內容，如文本或圖像
透明內邊距: padding ,可選,包圍內容區
邊框: border ,可選,內邊距周圍
透明外邊距: margin,可選,包圍所有部分

內容區

內容區包含元素的內容，它的大小通常正好包含全部內容

padding 內邊距

使用內邊距可以在內容與盒子邊框之間創建一些看得到的空間
css可以控制內邊距的寬度，甚至任意一邊的寬度,上下左右
透明,無法指定樣式
元素的背景顏色或背景圖像會延伸到內邊距下面，但不會延伸到外邊距
設置padding的順序很重要，如果先設置padding-left再設置padding，剛纔設置的padding-left就會被覆蓋

padding: 25px;
padding-left: 80px;
# 我們首先有一個屬性來控制所有4個邊，另外再對每個邊單獨設置

border 邊框

他是圍繞內容的一條線
邊框可以有不同的寬度，顏色和樣式
內邊距將內容區與邊框隔開
可以指定任意一邊的邊框樣式 border-top-color,border-top-style,border-top-width等
鋸齒邊框(破折線＋白色):

border-style: dashed;
border-color: white;

border-style 邊框樣式

solid 實線
ridge 脊線
dashed 破折
dotted 虛線
double 雙線
groove 槽線
outset 外凸
inset 內凸

border-width 邊框寬度

關鍵字 thin medium thick
像素 5px;

border-color 邊框顏色

和color 類似,使用顏色名，rgb或16進制碼

border-radius 邊框圓角

可以爲4個角分別指定，如border-top-left-radius
可以用px或em(相對於元素字體大小)

border-radius: 15px;

margin 外邊距

用外邊距在同一個頁面上的不同元素之間增加空間
和內邊距一樣，css可以控制外邊距的寬度，甚至任意一邊的寬度,上下左右
透明,無法指定樣式
和padding一樣，設置margin的順序很重要

margin: 30px;
margin-right: 250px;

color 顏色

文本元素的字體顏色

color 元素實際控制着一個元素的前景色,他會控制文本和邊框顏色，不過你也可以用border-color屬性爲邊框指定自己的顏色
改變p的字體顏色不會影響裏面的鏈接顏色.
web顏色按構成顏色的紅，綠，藍三個分量所佔數量來指定,每種顏色會分別指定一個從0到100%的數值,然後把它們混合起來得到最終的顏色.如100%紅,100%綠，100%藍混合在一起是白色。所有指定web顏色的方法最終都是告訴瀏覽器：一個顏色的紅綠藍分量分別是多少.
對於文本和背景，要使用對比度最大的顏色，能提高可讀性

用16進制碼指定指定顏色

如#fc1257,這種方式最常用
以#開頭,分別用2位數字指定紅綠藍
例如:

body {
  background-color: #cc6600;
}

wiki的web顏色表
如果每一組分量中的兩位數字都相同，可以使用簡寫,例如#ccbb00可以簡寫成#cb0,不過如果是#ccbb10則不能簡寫

按名指定顏色

css只定義了大約150個顏色名,顏色名不區分大小寫
16種基本顏色,所有瀏覽器都有,以及150種擴展色,它們是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
例如:

body {
  background-color: silver;
}

用紅綠藍值指定顏色

以rgb開頭，在小括號裏指定紅綠藍的百分比,例如:

body{
  background-color: rgb(80%, 40% , 0%)//橙色
}

還可以指定0-255之間的一個數值,例如:

body{
  background-color: rgb(204, 102, 0)//和上面顏色一致,255*80% = 204...
}

font-family 字體

大多數計算機上通常只安裝了部分字體，所以選擇字體時要當心，通常指定的font-family包含一個候選字體列表，他們都來自同一個字體系列,候選字體用逗號分隔，大小寫字母必須一致，最後總是放一個通用的字體系列名，如果一個字體名中包含多個單詞，比如Courier New，如何指定？用引號,"Courier New"，如:

body{
  font-family: Verdana, Geneva, Arial, sans-serif;
}

字體系列

每個font-family包含一組有共同特徵的字體。共有5個字體系列:

Sans-serif : 無襯線體 , 在計算機上更容易識別, 很多人認爲在計算機顯示中最適合體文本,包括: [Verdana : 大多數pc上都有],[Geneva : 大多數Mac上都有],[Arial : 在PC和Mac上都很常見]
Serif : 有襯線體 , 新聞報紙的文字排版
Monospace : 固定寬度的字符,主要用於顯示軟件代碼示例
Cursive : 看似手寫的字體 , 有時會看到在標題中偶爾使用
Fantasy : 包含有某種風格的裝飾性字體

@font-face 指定字體

@font-face 允許你定義一種字體的名字和位置,然後可以在你的頁面中使用。
web字體標準: 字體文件使用".woff"文件擴展名,表示web開放字體格式(web open font format)
常用字體格式: ［TrueType : .ttf］，［OpenType : .otf 建立在tt之上］，［Embedded OpenType字體 : .eot otf的壓縮形式微軟專用，僅ie支持］，［SVG字體 : .svg 通用圖像格式］，［Web開放字體格式 : .woff 推薦使用,瀏覽器支持最廣泛］
缺點: 獲取字體需要花費時間，第一次獲取字體時頁面性能可能會受影響。管理多個字體文件痛苦，最後移動設備和小型設備不支持。
有字體託管服務可以爲你託管web字體。
瀏覽器會先在用戶計算機上查找Verdana字體，如果有，這個元素就使用這個字體，如果不可用，找Geneva,以此類推,
如果前面指定的字體都沒有找到，就用瀏覽器默認的Sans-serif字體，就是我們最後指定的通用字體。
利用font-family可以創建一個首選字體列表
把該規則增加到文件的最上面,放在body規則之上

@font-face {
font-family: "Emblema One"; //創建一個名字
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
     url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.tff");
//src屬性告訴瀏覽器到哪裏找到這個字體,瀏覽器會嘗試每一個src文件，直到找到它支持的一個文件。
}

@import

@import 允許導入其他CSS文件

font-weight 控制文本的粗細

lighter : 相對於繼承的值使文本稍細一點。
normal : 正常
bold : 粗體
bolder : 相對於繼承的值使文本稍粗一點。
還可以設置爲100到900之間的一個數（100的倍數),不過並沒有廣泛支持，通常不使用

font-size 讓文本更大或更小

像素px指定大小 : font-size: 14px; //告訴瀏覽器字母高度是多少像素.14px中間不能有空格
百分數%指定大小 : font-size: 150%; //指定相對於父元素的字體大小
em指定字體大小 : font-size: 1.2em; //指定相對於父元素的字體的比例因子,稱爲相對大小
好吧，百分數和em看上去差別不大，可能%更容易理解些,例子:

body {
   font-size: 14px;
}
h1 {
   font-size: 150%; //父元素body,這裏是14*150% = 21px
}
h2 {
   font-size: 1.2em; //父元素body,這裏是14*1.2 = 17px
}

關鍵字指定字體大小 : font-size: small;, small通常定義爲12px,下面每一級大小約比前一個大小大20%，包括:xx-small,x-small,small,medium,large,x-large,xx-large

指定字體大小的祕訣

(1)選擇一個關鍵字(推薦small或medium),作爲body的字體大小,爲頁面默認字體大小 (2)使用em或百分數,相對於body字體大小指定其他元素的字體大小(em或百分數)這樣改變web頁面中字體大小就很容易，只要改變body字體大小就可以了,例如:

body { font-size : small; }
h1 { font-size : 150%; }
h2 { font-size : 120%; }

注意老版IE不支持用像素指定的文本縮放

瀏覽器默認字體大小

大多數情況下，瀏覽器默認的body字體大小都是16像素
如果在body中指定字體大小爲90%,這將是默認字體的90%
h1 : 200%, 相對於默認字體,下同
h2 : 150%
h3 : 120%
h4 : 100%
h5 : 90%
h6 : 60%

text-decoration 文本裝飾

underline : 下劃線 ,下劃線文本通常被用戶誤認爲是鏈接文本，所以要謹慎使用
none : 無效果
overline : 上劃線
line-through : 刪除線,html有個<del>的元素可以將內容標記爲要刪除的內容
一次可以設置多個裝飾
如果文本繼承了你不想要的文本裝飾，可以使用值"none"來去除裝飾
如果em有兩個不同的規則，不會累加，要把這兩個值合併到一個規則中，才能同時得到這兩個文本裝飾.
例如:

em {
  text-decoration: line-through;
}

font-style 字體風格

italic : 斜體 ,斜體文本向右傾斜，另外襯線還有彎曲
oblique : 傾斜 ,並不是使用一組專門設計的傾斜字符，而是由瀏覽器將正常文字傾斜

list-style 改變列表中列表項的外觀

列表的主要屬性是list-style-type，利用這個屬性可以控制列表中使用的項目符號
- disc,默認
- circle,圓圈標記
- square,方塊標記
- none，刪除列表標記

定製列表標記

如果想定製列表的標記，可以用list-style-image爲列表設置標記圖像,如:

li{
  list-style-image: url(images/backpack.gif);
  padding-top: 5px;
  margin-left: 20px;
}

對於有序列表也一樣，可以用list-style-type控制一個有序列表標記:
decimal,十進制
upper-alpha,大寫字母
lower-alpha,小寫字母
upper-roman,大寫羅馬數字
lower-roman,小寫羅馬數字
列表項的項目符號的位置如何控制?用list-style-position，有兩個取值inside(標記在列表項裏)和outside（列表項外)。
區別如下:

其他屬性

left 指定一個元素的左邊所在位置

top 控制一個元素頂部的位置

background-image 在元素後面放置一個圖像,如

background-image: url(images/background.gif);
//用url括起來,注意沒有引號

background-repeat 背景圖像是否重複

默認在水平和垂直方向上重複
控制平鋪行爲,no-repeat,repeat-x,repeat-y,inherit;

background-repeat: no-repeat;

background-position 背景圖像的位置

可以按像素指定，或百分數,還可以用關鍵字,如top,left,right,bottom和center

background-position: top left;

background-color 控制元素的背景顏色

text-align 對齊

text-align會對塊元素中的所有內聯內容對齊,而不僅僅是文本
text-align只能在塊元素上設置，對內聯元素無效
left 左對齊
center 居中
right 右對齊

letter-spacing 在字母之間設置間距

line-height 設置文本元素中的行間距

body {
	font-size: small;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	line-height: 1.6em; //調整爲字體大小的1.6倍
}

line-height元素有點特殊,可以對它直接使用一個數,而不是相對度量,代表各元素行高是其自己字體大小的多少倍

#elixirs {
  line-height: 1;//代表elixirs中的所有元素的行間距爲其自己字體大小的1倍
}

設置line-height爲normal，允許瀏覽器選擇一個適當的行高大小,通常根據字體來確定。

border-bottom 下邊框

下邊框會延伸到頁面邊緣,但是文本的underline屬性的下劃線只會出現在文本下面
1px solid black

width 指定元素寬度

寬度永遠是設置的值
width屬性只指定內容區的寬度
要確定整個盒子的寬度，需要將內容區的寬度加上左和右內邊距,左右外邊距和邊框的寬度
一個塊的默認寬度爲"auto",它會延伸佔滿可用的空間
如果使用百分數，那麼寬度會計算爲元素所在容器寬度的一個百分比
高度也是默認的，也是"auto",一般，不用指定元素的高度，就讓它們默認爲auto

a元素和它的多重人格

頁面上的鏈接有多重顯示樣式，包括未訪問，已訪問或者處於懸停狀態等(還有focus和active),這裏需要用到僞類
foucs是指瀏覽器將焦點放在你的鏈接上時就是焦點狀態，瀏覽器允許用戶按下tab鍵輪流訪問時，瀏覽器訪問到某個鏈接，某個鏈接就擁有了"焦點"
active是指用戶第一次單擊一個鏈接時，就處於活動狀態。
－ a元素可能同時處於多個狀態，一般認爲適當的順序是link,visited,hover,focus,active
例子:

a:link {
  color: green;
}
a:visited {
  color: red;
}
a:hover {
  color: yellow;
}

僞類

上面的a:link,a:visited和a:hover就是僞類
它們都允許我指定樣式，就好像他們是類一樣，但是沒有人在html中真正輸入這些類
瀏覽器會仔細檢查所有a元素，把它們增加到正確的僞類中，如果一個鏈接已訪問過，會放到:visited類中，如果懸停，瀏覽器會把這個鏈接
扔到:hover僞類中。瀏覽器會在後臺向這些類增加和刪除元素.
僞類不止能處理鏈接，還能對其他類型的元素提供處理，如first-child對應元素的第一個子元素。

佈局和定位

流

流：瀏覽器從html文件最上面開始，從上到下沿着元素流逐個顯示所遇到的各個元素。
塊元素從上向下流，各元素之間有一個換行，內聯元素從左上方流向右下方,在水平方向上相互挨着擺放（只要右邊還有空間放的下）
文本是內聯函數的特殊情況，瀏覽器會把它分解成適當大小的內聯元素，以適應給定的空間。
對於外邊距，瀏覽器並排放置兩個內聯元素時，外邊距會相加，但是當上下放置兩個塊元素時，會把它們共同的外邊距摺疊在一起，高度爲最大的外邊距高度。
事實上只要兩個垂直外邊距碰到一起，它們就會摺疊，但是如果外面的元素有一個邊框，那麼兩個元素的外邊距就不會碰到一起，就不會摺疊

float

float屬性首先儘可能遠地向左或向右浮動一個元素，然後在它下面的所有內容會繞流這個元素。
對於所有浮動元素都有一個要求：它必須有一個寬度。
浮動元素的外邊距不會摺疊,因爲它只是浮在頁面上，注意到這一點可以避免常見css錯誤.
內聯元素也可以浮動，如浮動圖像
float屬性可以設置爲left或right,不能是中間

#amazing {
  width: 200px;
  float: right;
}

下面看瀏覽器如何處理float（想象一下word的圖片浮動):
(1)首先，瀏覽器像往常一樣，正常將元素流入頁面，從最上面開始。
(2)瀏覽器遇到浮動元素時，會把它儘可能放在最右邊，還會從流中刪除這個段落，好像它浮在頁面上一樣。
(3)由於該浮動段落已經從正常的流中刪除，所以其他塊元素會填在這裏，就好像沒有這個段落一樣。
(4)對於內聯元素定位時，它們會考慮浮動元素的邊界，因此會繞着浮動元素。

clear

當元素流入頁面時，在這個元素左邊，右邊或兩邊不允許有浮動內容,例如爲防止頁腳和右邊欄重疊，可以用clear設置:

#footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           10px;
  font-size:        90%;
  clear:            right;
}

現在瀏覽器放置元素時會查看右邊有沒有浮動元素，如果有就下移，直到沒有浮動元素爲止。

兩欄效果

把sidebar放在頁眉下面，然後用float將sidebar欄向右浮動,通過將main div的右外邊距設置得和sidebar的寬度相同，來創建兩欄效果,不過此時如果頁面太寬，頁腳會上移造成重疊問題,
這個問題可以在頁腳腫添加clear屬性解決。還有一個問題是因爲我們把sidebar放在主要內容前，所以在小的移動設備上會看到邊欄在最前面。
右緊左松，讓主內容向左浮動，設置仿照上面的。這樣div的順序是正確的，不過邊欄過於擴展不好，還是固定些好
使用絕對定位，類似浮動效果，當主內容區的垂直空間縮小，邊欄會向下覆蓋頁腳
使用css表格

流體與凍結設計

上面討論的都是流體佈局(liquid layouts)，下面討論凍結佈局(frozen layouts),凍結佈局會鎖定元素，
如將body中的所有內容都放到一個id爲#allcontent的div中

#allcontent {
  width: 800px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #675c47;
}

那麼頁面的寬度將被限制爲800px，無論瀏覽器寬度如何變化都不會移動,但這會導致瀏覽器很寬時，右邊有很多空白空間

凝膠布局 Jello

凝膠布局會鎖定頁面中內容區的寬度，不過會將它在瀏覽器中居中，將內容區的內外邊距設爲auto即可，瀏覽器會確定正確的外邊距是多少，確保左和右外邊距相同，所以內容會居中,如下所示

#allcontent {
  width: 800px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #675c47;
  margin-left: auto;
  margin-right: auto;
}

絕對定位

例如上面的邊欄，將邊欄絕對定位時，它會從流中刪除並根據制定的top，left，right或bottom屬性定位
由於邊欄在流之外，其他元素甚至不知道有這樣一個元素，它們會將它完全忽略,所以流中的內聯內容不會圍繞在一個絕對定位的元素周圍。
如將側邊欄絕對定位

#sidebar {
  position: absolute;
  top:  100px;
  right:  200px;
  width:  280px;
}

關於絕對定位還有一個分層放置的問題，一個元素可以放在另一個絕對定位元素上面，那如何分層？誰在上面？每個定位元素都有一個z-index的屬性，這會指定它在一個虛擬z軸上的位置（上面的元素“更靠近”你，z-index更大).
可以對任何元素指定絕對位置
position的默認值爲static，將元素放在正常的文檔流中。position共有4個值:static,absolute,fixed和relative。fixed將元素放在相對於瀏覽器窗口（區別頁面）的一個位置上，固定元素永遠不會移動。relative讓元素正常流入頁面，不過在頁面上顯示之前要進行偏移。
絕對元素不必像浮動元素一樣指定寬度，不過默認會佔瀏覽器的整個寬度，所以如果要改變這種行爲就要設置width屬性
指定元素位置還可以用百分數,相對於瀏覽器寬度.

css表格

類似電子表格，在表格中只放置塊元素，所以要把圖像包圍在一個div中。
爲整個表格創建一個div，然後爲每一行分別創建一個div，對於每一列，只要在行div中放置一個塊級元素。
例如一行兩列的表格可以按如下方式創建：

<div id="tableContainer">
  <div id="tableRow">
    <div id="main">
      ...
    </div>
    <div id="sidebar">
      ...
    </div>
  </div>
</div>

對應的css爲:

#tableContainer {
  display: table;
  border-spacing: 10px;//於是不再需要div中的外邊距
}
#tableRow {
  display: table-row;
}
#main {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  /*margin:           0px 10px 10px 10px;*/
  vertical-align: top;//確保表格兩個單元格中的所有內容相對於單元格上邊對齊，默認爲中間對齊,可以設置爲top,middle,bottom
}
#sidebar {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  /*margin:           0px 10px 10px 10px;*/
  vertical-align: top;
}

上面的border-spacing會在單元格之間增加10像素空間，另外在邊界周圍也會增加10像素空間，但是border-spacing和外邊距創建的空間不會摺疊！就會導致頁眉和頁腳與兩列之間有20像素的空間，如何修正？將頁眉（頁腳）的下邊距（上邊距）設爲0即可。

《Head First HTML 與 CSS》讀書筆記之CSS篇

基本

常識與實踐

鏈接方式

內部鏈接

css文件外置

多樣式表

簡寫

簡寫格式

padding

margin

border

background

字體

簡寫的優劣

選擇

子孫選擇器

直接孩子

複雜選擇

規則添加

類

類元素選擇器

添加類元素

類選擇器

多類元素

特定元素選擇器

id

id的作用

選擇元素

實踐建議

繼承

樣式繼承

那哪些元素能夠繼承

層疊

媒體查詢

link媒體查詢

css媒體查詢

實踐建議

屬性

盒模型

內容區

padding 內邊距

border 邊框

border-style 邊框樣式

border-width 邊框寬度

border-color 邊框顏色

border-radius 邊框圓角

margin 外邊距

color 顏色

文本元素的字體顏色

用16進制碼指定指定顏色

按名指定顏色

用紅綠藍值指定顏色

font-family 字體

字體系列

@font-face 指定字體

@import

font-weight 控制文本的粗細

font-size 讓文本更大或更小

指定字體大小的祕訣

瀏覽器默認字體大小

text-decoration 文本裝飾

font-style 字體風格

list-style 改變列表中列表項的外觀

定製列表標記

其他屬性

left 指定一個元素的左邊所在位置

top 控制一個元素頂部的位置

background-image 在元素後面放置一個圖像,如

background-repeat 背景圖像是否重複

background-position 背景圖像的位置

background-color 控制元素的背景顏色

text-align 對齊

letter-spacing 在字母之間設置間距

line-height 設置文本元素中的行間距

border-bottom 下邊框

width 指定元素寬度

a元素和它的多重人格

僞類

佈局和定位