1.塊級元素和行內元素

• 塊級(block-level)元素；行內(內聯、inline-level)元素。
• 塊元素的特點：
  a.總是在新行上開始；
  b.高度、行高以及外邊距和內邊距都可控制；
  c.寬度默認是它容器的100%，除非設定一個寬度；
  d.他可以容納內聯元素和其他塊元素。
• 內聯元素的特點：
  a.和其他元素都在同一行；
  b.高，行高及外邊距和內邊距不可改變；
  c.寬度就是它的文字和圖片的寬度，不可改變；
  d.內聯元素只能容納文本或者其他內聯元素。
• 行內元素智能設置左右內外邊距，設置上下邊距會把面積撐開，但是不會影響該元素的實際大小。
• 常見的塊級元素：
  address - 地址
  blockquote - 塊引用
  center - 舉中對齊塊
  dir - 目錄列表
  div - 常用塊級容易，也是css layout的主要標簽
  dl - 定義列表
  fieldset - form控制組
  form - 交互表單
  h1 - 大標題
  h2 - 副標題
  h3 - 3級標題
  h4 - 4級標題
  h5 - 5級標題
  h6 - 6級標題
  hr - 水平分隔線
  isindex - input prompt
  menu - 菜單列表
  noframes - frames可選內容（對于不支持frame的瀏覽器顯示此區塊內容）
  noscript - 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
  ol - 排序列表
  p - 段落
  pre - 格式化文本
  table - 表格
  ul - 非排序列表
• 常見的行內元素：
  a - 錨點
  abbr - 縮寫
  acronym - 首字
  b - 粗體（不推薦）
  bdo - bidi override
  big - 大字體
  br - 換行
  cite - 引用
  code - 計算機代碼（在引用源碼的時候需要）
  dfn - 定義字段
  em - 強調
  font - 字體設定（不推薦）
  i - 斜體
  img - 圖片
  input - 輸入框
  kbd - 定義鍵盤文本
  label - 表格標簽
  q - 短引用
  s - 中劃線（不推薦）
  samp - 定義范例計算機代碼
  select - 項目選擇
  small - 小字體文本
  span - 常用內聯容器，定義文本內區塊
  strike - 中劃線
  strong - 粗體強調
  sub - 下標
  sup - 上標
  textarea - 多行文本輸入框
  tt - 電傳文本
  u - 下劃線
  var - 定義變量

2.屬性：寬高

• 只對塊級元素設置生效，對行內元素設置無效。
• 例子：

<style>
  .box {
    width: 200px;
    height: 100px;
    background-color: red;
  }
</style>

<div class="box"></div>

• width為元素的寬度，height為元素的高度。
• 這種方式設置的是元素的寬高，不包括內邊距、外邊距和邊框。

3.屬性：邊框

1.邊框與背景

• CSS 規范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。
• CSS2 指出背景只延伸到內邊距，而不是邊框。后來 CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景。大多數瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現。

2.邊框的樣式

• 樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。
• 定義多種樣式
  您可以為一個邊框定義多個樣式，例如：

p.aside {border-style: solid dotted dashed double;}

上面這條規則為類名為 aside 的段落定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。
我們看到了這里的值采用了 top-right-bottom-left 的順序。

• 定義單邊樣式
  如果希望為元素框的某一個邊設置邊框樣式，而不是設置所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：
  border-top-style
  border-right-style
  border-bottom-style
  border-left-style
  因此這兩種方法是等價的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。

• 沒有邊框
  在前面的例子中，您已經看到，如果希望顯示某種邊框，就必須設置邊框樣式，比如 solid 或 outset。
  那么如果把 border-style 設置為 none 會出現什么情況：
  p {border-style: none; border-width: 50px;}
  盡管邊框的寬度是 50px，但是邊框樣式設置為 none。在這種情況下，不僅邊框的樣式沒有了，其寬度也會變成 0。邊框消失了，為什么呢？
  這是因為如果邊框樣式為 none，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框寬度自動設置為 0，而不論您原先定義的是什么。
  記住這一點非常重要。事實上，忘記聲明邊框樣式是一個常犯的錯誤。根據以下規則，所有 h1 元素都不會有任何邊框，更不用說 20 像素寬了：
  h1 {border-width: 20px;}
  由于 border-style 的默認值是 none，如果沒有聲明樣式，就相當于 border-style: none。因此，如果您希望邊框出現，就必須聲明一個邊框樣式。
• 各種border-style：

3.邊框的寬度

• 您可以通過 border-width 屬性為邊框指定寬度。
• 為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值） 和 thick。
  注釋：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶代理可能把 thin 、medium 和 thick 分別設置為等于 5px、3px 和 2px，而另一個用戶代理則分別設置為 3px、2px 和 1px。
  所以，我們可以這樣設置邊框的寬度：

p {border-style: solid; border-width: 5px;}

或者：

p {border-style: solid; border-width: thick;}

• 定義單邊寬度
  您可以按照 top-right-bottom-left 的順序設置元素的各邊邊框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以簡寫為（這樣寫法稱為值復制）：

p {border-style: solid; border-width: 15px 5px;}

您也可以通過下列屬性分別設置邊框各邊的寬度：
border-top-width
border-right-width
border-bottom-width
border-left-width
因此，下面的規則與上面的例子是等價的：

p { 
border-style: solid; 
border-top-width: 15px; 
border-right-width: 5px; 
border-bottom-width: 15px; 
border-left-width: 5px; 
}

4.邊框的顏色

• 設置邊框顏色非常簡單。CSS 使用一個簡單的 border-color 屬性。
• 它一次可以接受最多 4 個顏色值。可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進制和 RGB 值：
  p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
• 如果顏色值小于 4 個，值復制就會起作用。例如下面的規則聲明了段落的上下邊框是藍色，左右邊框是紅色：
  p { border-style: solid; border-color: blue red; }
  注釋：默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。這個父元素很可能是 body、div 或另一個 table。
• 定義單邊顏色
  還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：
  border-top-color
  border-right-color
  border-bottom-color
  border-left-color
• 要為 h1 元素指定實線黑色邊框，而右邊框為實線紅色，可以這樣指定：
  h1 { border-style: solid; border-color: black; border-right-color: red; }
• 透明邊框
  我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創建一個不可見的邊框。
  CSS2 引入了邊框顏色值 transparent。這個值用于創建有寬度的不可見邊框。請看下面的例子：
  <a href="#">AAA</a><a href="#">BBB</a><a href="#">CCC</a>
  我們為上面的鏈接定義了如下樣式：
  a:link, a:visited { border-style: solid; border-width: 5px;border-color: transparent;}
a:hover {border-color: gray;}
• 從某種意義上說，利用 transparent，使用邊框就像是額外的內邊距一樣；此外還有一個好處，就是能在你需要的時候使其可見。這種透明邊框相當于內邊距，因為元素的背景會延伸到邊框區域（如果有可見背景的話）。
• 重要事項：在 IE7 之前，IE/WIN 沒有提供對 transparent 的支持。在以前的版本，IE 會根據元素的 color 值來設置邊框顏色。

3.屬性：邊距

盒模型

1.內邊距

• 元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。
• CSS padding 屬性定義元素邊框與元素內容之間的空白區域。
• CSS padding 屬性
  CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。
  例如，如果您希望所有 h1 元素的各邊都有 10 像素的內邊距，只需要這樣：
  h1 {padding: 10px;}
• 您還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：
  h1 {padding: 10px 0.25em 2ex 20%;}
• 單邊內邊距屬性
• 也通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：
  padding-top
  padding-right
  padding-bottom
  padding-left
• 也許已經想到了，下面的規則實現的效果與上面的簡寫規則是完全相同的：
  h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
• 內邊距的百分比數值
  前面提到過，可以為元素的內邊距設置百分數值。百分數值是相對于其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。
  下面這條規則把段落的內邊距設置為父元素 width 的 10%：
  p {padding: 10%;}
  例如：如果一個段落的父元素是 div 元素，那么它的內邊距要根據 div 的 width 計算。

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div> 

注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對于父元素寬度設置，而不是相對于高度。

2.外邊距

• 圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
• CSS margin 屬性
  設置外邊距的最簡單的方法就是使用 margin 屬性
  margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。
  margin 可以設置為 auto。更常見的做法是為外邊距設置長度值。下面的聲明在 h1 元素的各個邊上設置了 1/4 英寸寬的空白：
  h1 {margin : 0.25in;}
  下面的例子為 h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：
  h1 {margin : 10px 0px 15px 5px;}
• 與內邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的：
  margin: top right bottom left
• 另外，還可以為 margin 設置一個百分比數值：
  p {margin : 10%;}
  百分數是相對于父元素的 width 計算的。上面這個例子為 p 元素設置的外邊距是其父元素的 width 的 10%。
• margin 的默認值是 0，所以如果沒有為 margin 聲明一個值，就不會出現外邊距。但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋默認樣式。
• 單邊外邊距屬性
  您可以使用單邊外邊距屬性為元素單邊上的外邊距設置值。假設您希望把 p 元素的左外邊距設置為 20px。不必使用 margin（需要鍵入很多 auto），而是可以采用以下方法：
  p {margin-left: 20px;}
  您可以使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距：
  margin-top
  margin-right
  margin-bottom
  margin-left
  一個規則中可以使用多個這種單邊屬性，例如：
  h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
  當然，對于這種情況，使用 margin 可能更容易一些：
  p {margin: 20px 30px 30px 20px;}
  不論使用單邊屬性還是使用 margin，得到的結果都一樣。一般來說，如果希望為多個邊設置外邊距，使用 margin 會更容易一些。不過，從文檔顯示的角度看，實際上使用哪種方法都不重要，所以應該選擇對自己來說更容易的一種方法。
• 注意：對于塊級元素設置屬性：margin：0 auto；可以設置該塊級元素格式為居中。
• *{margin: 0;padding: 0}:消除當前瀏覽器的默認邊距樣式，瀏覽器的默認樣式為：user agent stylesheet。

4.屬性：display

• display CSS屬性指定用于元素的呈現框的類型。在 HTML 中，默認的 display 屬性取決于 HTML 規范所描述的行為或瀏覽器/用戶的默認樣式表。在 XML中，其默認值為 inline。
• 除了多種不同的生成的元素的盒類型，值 none 可以關閉一個元素的顯示；當你使用 none 所有的后代元素他們的顯示也會被關閉。文檔渲染的過程中就好像在文檔樹中這個元素不存在一樣。
• 初始值：inline
• 是否能繼承：否
• 塊級元素常用的display值：block, list-item, table。
• 行內元素常用的display值：inline, inline-table, inline-block。
• display值查詢：display-CSS|MDN

5.屬性：font

• CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。
• 文字的各種屬性都可以繼承給后代元素。

1.文字的字體

• font-size 屬性設置文本的大小。
• 有能力管理文本的大小在 web 設計領域很重要。但是，您不應當通過調整文本大小使段落看上去像標題，或者使標題看上去像段落。
  請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來標記標題，使用 <p> 來標記段落。
  font-size 值可以是絕對或相對值。
• 絕對值：
  將文本設置為指定的大小
  不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）
  絕對大小在確定了輸出的物理尺寸時很有用
• 相對大小：
  相對于周圍的元素來設置大小
  允許用戶在瀏覽器改變文本大小
• 注意：如果您沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。
  使用像素來設置字體大小
  通過像素設置文本大小，可以對文本大小進行完全控制：
  實例

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

• chrome的最小字體：默認字體大小16px, 最小字體 12px，可以在chrome的設置-工具-首選項-高級-字體中對最小字體和默認字體進行設置。

2.文字的字體

• 使用 font-family 屬性 定義文本的字體系列。
• 使用通用字體系列
  如果你希望文檔使用一種 sans-serif 字體，但是你并不關心是哪一種字體，以下就是一個合適的聲明：
  body {font-family: sans-serif;}
  這樣用戶代理就會從 sans-serif 字體系列中選擇一個字體（如 Helvetica），并將其應用到 body 元素。因為有繼承，這種字體選擇還將應用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。
• 指定字體系列
  除了使用通用的字體系列，您還可以通過 font-family 屬性設置更具體的字體。
  下面的例子為所有 h1 元素設置了微軟雅黑字體：
  h1 {font-family: '微軟雅黑';}
• 中文字體為了避免亂碼，應該盡量應用unicode來表示字體。如：
  宋體 | SimSun | \5B8B\4F53 黑體 | SimHei | \9ED1\4F53 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1

• 如何得到中文字體的unicode：利用谷歌瀏覽器的開發者選項中的console，輸入escape('微軟雅黑')，如下圖所示：

  得到的就是該字體的unicode碼將其中的%u換為\即可使用。

• 這樣的規則同時會產生另外一個問題，如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認字體來顯示 h1 元素。
  我們可以通過結合特定字體名和通用字體系列來解決這個問題：
  h1 {font-family: Georgia, serif;}
• 如果讀者沒有安裝 Georgia，但安裝了 Times 字體（serif 字體系列中的一種字體），用戶代理就可能對 h1 元素使用 Times。盡管 Times 與 Georgia 并不完全匹配，但至少足夠接近。
  因此，我們建議在所有 font-family 規則中都提供一個通用字體系列。這樣就提供了一條后路，在用戶代理無法提供與規則匹配的特定字體時，就可以選擇一個候選字體。
  如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點，需要把這些字體按照優先順序排列，然后用逗號進行連接：
  p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
  根據這個列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。
• 使用引號
  您也許已經注意到了，上面的例子中使用了單引號。只有當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。
  單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

3.文字的風格

• font-style 屬性最常用于規定斜體文本。
• 該屬性有三個值：
  normal - 文本正常顯示
  italic - 文本斜體顯示
  oblique - 文本傾斜顯示
• 實例

p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}

• italic 和 oblique 的區別
• font-style 非常簡單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點復雜的是明確 italic 文本和 oblique 文本之間的差別。
  斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。
  通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

4.文字的變形

• 字體變形
  font-variant 屬性可以設定小型大寫字母。
  小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。
• 實例p {font-variant:small-caps;}

5.文字的加粗

• font-weight 屬性設置文本的粗細。
• 使用 bold 關鍵字可以將文本設置為粗體。
• 關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價于 normal，而 700 等價于 bold。
• 如果將元素的加粗設置為 bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。
  實例
  p.normal {font-weight:normal;}p.thick {font-weight:bold;}p.thicker {font-weight:900;}

6.文字的縮寫

• 字體縮寫
  網頁中的字體css樣式代碼也有他自己的縮寫方式，下面是給網頁設置字體的代碼：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}

這么多行的代碼其實可以縮寫為一句：

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

• 注意：
  1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值。
  2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
  一般情況下因為對于中文網站，英文還是比較少的，所以下面縮寫代碼比較常用：

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

只是有字號、行間距、中文字體、英文字體設置。

6.屬性：文本

1.水平對齊

• text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。它的前 3 個值相當直接，不過第 4 個和第 5 個則略有些復雜。
• 值 left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。
• 西方語言都是從左向右讀，所有 text-align 的默認值是 left。文本在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。對于希伯來語和阿拉伯語之類的的語言，text-align 則默認為 right，因為這些語言從右向左讀。不出所料，center 會使每個文本行在元素中居中。
• 提示：將塊級元素或表元素居中，要通過在這些元素上適當地設置左、右外邊距來實現。
  text-align:center 與 <CENTER>
• text-align:center 與 <CENTER> 的區別：
  <CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而只影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。
• justify
  最后一個水平對齊屬性是 justify。
  在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然后，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文本在打印領域很常見。
  需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。如需了解詳情，請參閱 CSS text-align 屬性參考頁。

2.縮進文本

• 把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。
• CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。
• 通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。
• 這個屬性最常見的用途是將段落的首行縮進，下面的規則會使所有段落的首行縮進 5 em：
  p {text-indent: 5em;}
• 注意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用于行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。
• 提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。
• 使用負值
  text-indent 還可以設置為負值。利用這種技術，可以實現很多有趣的效果，比如“懸掛縮進”，即第一行懸掛在元素中余下部分的左邊。
  p {text-indent: -5em;}
  不過在為 text-indent 設置負值時要當心，如果對一個段落設置了負值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距：
  p {text-indent: -5em; padding-left: 5em;}
• 使用百分比值
  text-indent 可以使用所有長度單位，包括百分比值。
  百分數要相對于縮進元素父元素的寬度。換句話說，如果將縮進值設置為 20%，所影響元素的第一行會縮進其父元素寬度的 20%。
  在下例中，縮進值是父元素的 20%，即 100 個像素：

div {width: 500px;}p {text-indent: 20%;}<div><p>this is a paragragh</p></div>

• 繼承
  text-indent 屬性可以繼承，請考慮如下標記：

div#outer {width: 500px;}div#inner {text-indent: 10%;}p {width: 200px;}<div id="outer"><div id="inner">some text. some text. some text.<p>this is a paragragh.</p></div></div>

以上標記中的段落也會縮進 50 像素，這是因為這個段落繼承了 id 為 inner 的 div 元素的縮進值。

3.文本裝飾

• 接下來，我們討論 text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行為。
  text-decoration 有 5 個值：
  none
  underline
  overline
  line-through
  blink
• 不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標記。
• none 值會關閉原本應用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但也不總是這樣。例如，鏈接默認地會有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點：
  a {text-decoration: none;}
• 注意：如果顯式地用這樣一個規則去掉鏈接的下劃線，那么錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認是這樣的，不過也不能完全保證其顏色肯定有區別）。還可以在一個規則中結合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規則如下：a:link a:visited {text-decoration: underline overline;}不過要注意的是，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值。請考慮以下的規則：

h2.stricken {text-decoration: line-through;}h2 {text-decoration: underline overline;}

對于給定的規則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因為 text-decoration 值會替換而不是累積起來。

4.字符轉換

• text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：
  none
  uppercase
  lowercase
  capitalize
• 默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。
  作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改：
  h1 {text-transform: uppercase}
• 使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。

5.字間隔

• word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。
• word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那么字之間的間隔就會增加。為 word-spacing 設置一個負值，會把它拉近：

p.spread {
word-spacing: 30px;
}
p.tight {
word-spacing: -0.5em;
}
<p class="spread">
This is a paragraph. The spaces between words will be increased.</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.</p>

6.字母間隔

• letter-spacing 屬性與 word-spacing 的區別在于，字母間隔修改的是字符或字母之間的間隔。
• 與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。默認關鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會使字母之間的間隔增加或減少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

7.處理空白符

• white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。
• 通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的 XHTML 處理已經完成了空白符處理：它會把所有空白符合并為一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：
  <p>This paragraph has many spaces in it.</p>
  可以用以下聲明顯式地設置這種默認行為：
  p {white-space: normal;}
• 上面的規則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個值，換行字符（回車）會轉換為空格，一行中多個空格的序列也會轉換為一個空格。
• 值 pre
  不過，如果將 white-space 設置為 pre，受這個屬性影響的元素中，空白符的處理就有所不同，其行為就像 XHTML 的 pre 元素一樣；空白符不會被忽略。
  如果 white-space 屬性的值為 pre，瀏覽器將會注意額外的空格，甚至回車。在這個方面，而且僅在這個方面，任何元素都可以相當于一個 pre 元素。
  注意：經測試，IE 7 以及更早版本的瀏覽器不支持該值，因此請使用非 IE 的瀏覽器來查看上面的實例。
• 值 nowrap
  與之相對的值是 nowrap，它會防止元素中的文本換行，除非使用了一個 br 元素。
• 值 pre-wrap 和 pre-line
  CSS2.1 引入了值 pre-wrap 和 pre-line，這在以前版本的 CSS 中是沒有的。這些值的作用是允許創作人員更好地控制空白符處理。
  如果元素的 white-space 設置為 pre-wrap，那么該元素中的文本會保留空白符序列，但是文本行會正常地換行。如果設置為這個值，源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反，會像正常文本中一樣合并空白符序列，但保留換行符。
  注意：我們在 IE7 和 FireFox2.0 瀏覽器中測試了上面的兩個實例，但是結果是，值 pre-wrap 和 pre-line 都沒有得到很好的支持。
• 總結：

8.文本方向

• 如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，并不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。
• direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最后一行的位置。
  注釋：對于行內元素，只有當 unicode-bidi 屬性設置為 embed 或 bidi-override 時才會應用 direction 屬性。
• direction 屬性有兩個值：ltr 和 rtl。大多數情況下，默認值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl。

9.文本溢出設置

• 設置 overflow 屬性：

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

• 可能的值

10.顏色

• 單詞:
  red
  blue
  pink
  yellow
  white
  black
• 十六進制:

#000000
#fff
#eee
#ccc
#666
#333
#f00
#0f0
#00f

• rgb:
  rgb(255, 255, 255)
  , rgb(0, 255, 0)
• rgba:
  rgba(0,0,0,0.5)，a為透明度。
• 更多

11.單位

px： 固定單位
百分比(寬高？文字大小？line-height? position?)
em: 相對單位，相對于父元素字體大小
rem: 相對單位，相對于根元素(html)字體大小
vw vh: 相對單位，1vw 為屏幕寬度的1% 兼容性

7.屬性：背景

• 屬性 描述
  background:簡寫屬性，作用是將背景屬性設置在一個聲明中
  background-attachment :背景圖像是否固定或者隨著頁面的其余部分滾動
  background-color :設置元素的背景顏色
  background-image: 把圖像設置為背景
  background-position :設置背景圖像的起始位置
  background-repeat :設置背景圖像是否及如何重復
  background-size :設置背景的大小(兼容性)
• background-position：默認左上角
  x y
  x% y%
  [top | center | bottom] [left | center | right]
• background-repeat
  no-repeat：背景圖片在規定位置
  repeat-x：圖片橫向重復
  repeat-y：圖片縱向重復
  repeat：全部重復
• background-size
  100px 100px
  contain：調整圖片寬度剛好充滿框。
  cover：調整圖片高度剛好充滿框。
• background-color: #F00;
  background-image: url(background.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
  可以縮寫為一句：
  background: #f00 url(background.gif) no-repeat fixed 0 0;
• CSS Sprite
  指將不同的圖片/圖標合并在一張圖上。
  使用CSS Sprite 可以減少網絡請求，提高網頁加載性能。

8.隱藏or透明

opacity: 0 ; 透明度為0，整體
visibility: hidden ; 和opacity:0 類似，看不見元素的存在，但是占用位置。
display:none; 消失，不占用位置
background-color: rgba(0，0，0，0.2) 只是背景色透明，0.2位透明度。

9.inline-block

• 既呈現 inline 特性(不占據一整行，寬度由內容寬度決定)
  又呈現 block 特性 (可設置寬高，內外邊距)
  inline-block時，兩個元素如果高度不一樣，對齊的位置是文字底部的基線，修改方法是使用：vertical-align=top／bottom來設置對齊的位置。
• 縫隙問題
  兩個元素之間有空白字符，很多個空白字符和換行被識別為一個空格。
  可以將父元素的字體設置為0 ，然后再將本元素的字體大小變回去。
  或者通過設置空白字符的屬性來消去空格。
  10.line-height
• 用于設置單行文本的行
• line-height:2意思是它本身字體高度的兩倍。
• line-height：200%是它父容器的兩倍。
• 用line-height可以使文本垂直居中。

10.盒模型

-使用css3新樣式box-sizing
box-sizing: content-box：w3c標準盒模型
box-sizing: border-box：“IE盒模型”
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>

• text-overflow
  1、text-overflow屬性僅是注解，當文本溢出時是否顯示省略標記。并不具備其它的樣式屬性定義。要實現溢出時產生省略號的效果還須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），也就是說 overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用，只有這樣才能實現溢出文本顯示省略號的效果。

2、一定要給容器定義寬度.

3、如果少了overflow: hidden;文字會橫向撐到容器的外面

4、如果少了white-space:nowrap;文字會把容器的高度往下撐；即使你定義了高度，省略號也不會出現，多余的文字會被裁切掉

5、如果少了text-overflow:ellipsis;多余的文字會被裁切掉，就相當于你這樣定義text-overflow:clip.