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

weixin_33936401發表於2015-08-20

本文為閱讀《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（第二版）學習筆記
2018-06-10
HTMLCSS筆記
Head First HTML and CSS (八)
2018-11-16
HTMLCSS
head first java讀書筆記
2017-02-19
Java筆記
Head First jQuery讀書筆記
2015-06-03
jQuery筆記
Head First設計模式讀書筆記
2018-12-21
設計模式筆記
Head First Javascript 程式設計讀書筆記（一）
2017-09-25
JavaScript程式設計筆記
Head First Javascript 程式設計讀書筆記（二）
2017-09-26
JavaScript程式設計筆記
Head First Javascript 程式設計讀書筆記（三）
2017-09-28
JavaScript程式設計筆記
Head First Javascript 程式設計讀書筆記（四）
2017-09-28
JavaScript程式設計筆記
《CSS揭祕》讀書筆記
2019-05-02
CSS筆記
《Head First Java》20200927讀書筆記
2020-09-27
Java筆記
HTML/CSS基礎課程筆記————CSS結束篇
2021-09-09
HTMLCSS筆記
《Head First Java》20201017讀書筆記
2020-10-17
Java筆記
深度解讀Head First：公式篇
2013-04-23
公式
HTML+CSS筆記
2019-02-28
HTMLCSS筆記
《Head First Java》20201009讀書筆記
2020-10-09
Java筆記
《Head First C 中文版》審讀筆記（五）
2013-05-18
筆記
《Head First C 中文版》審讀筆記（三）
2013-05-07
筆記
《Head First C 中文版》審讀筆記（四）
2013-05-11
筆記
《Head First C 中文版》審讀筆記（二）
2013-05-04
筆記
《Head First C 中文版》審讀筆記（一）
2013-05-02
筆記
html&css面試筆記
2019-02-16
HTMLCSS面試筆記
html+CSS筆記（1）
2020-11-05
HTMLCSS筆記
【HTML CSS】筆記9日
2020-10-26
HTMLCSS筆記
讀“css世界”筆記
2018-11-22
CSS筆記
HTML/CSS篇
2018-05-16
HTMLCSS
《sed & awk》讀書筆記之 awk 篇
2013-01-01
筆記
HTML&CSS學習筆記
2021-09-05
HTMLCSS筆記
html,css前端開發筆記
2018-10-24
HTMLCSS前端筆記
html+css複習筆記
2018-06-02
HTMLCSS筆記
圖解CSS3 讀書筆記——選擇器
2015-11-14
圖解CSSS3筆記
《響應式Web設計——html5和css3實戰》讀書筆記
2013-01-07
WebHTMLCSSS3筆記
筆記-10.4、HTML-CSS濾鏡筆記
2016-03-31
筆記HTMLCSS
Head First Java學習筆記(7):繼承與多型
2020-11-22
Java筆記繼承多型
《Web前端開發修煉之道》-讀書筆記CSS部分
2017-10-18
Web前端筆記CSS
《CSS重構：樣式表效能調優》讀書筆記
2018-04-20
CSS筆記
前端筆記之CSS（上）
2019-03-17
前端筆記CSS
筆記-10.2、HTML-CSS選擇器筆記
2016-03-31
筆記HTMLCSS

《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元素和它的多重人格

偽類

佈局和定位

`padding`

`margin`

`border`

`background`

`字型`

`id`

`id`的作用

`padding` 內邊距

`border` 邊框

`border-style` 邊框樣式

`border-width` 邊框寬度

`border-color` 邊框顏色

`border-radius` 邊框圓角

`margin` 外邊距

`color` 顏色

`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`元素和它的多重人格

`float`

`clear`

凝膠布局 `Jello`