1.塊級(jí)元素和行內(nèi)元素

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

2.屬性：寬高

• 只對(duì)塊級(jí)元素設(shè)置生效，對(duì)行內(nèi)元素設(shè)置無(wú)效。
• 例子：

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

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

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

3.屬性：邊框

1.邊框與背景

• CSS 規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要，因?yàn)橛行┻吙蚴恰伴g斷的”（例如，點(diǎn)線(xiàn)邊框或虛線(xiàn)框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見(jiàn)部分之間。
• CSS2 指出背景只延伸到內(nèi)邊距，而不是邊框。后來(lái) CSS2.1 進(jìn)行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。大多數(shù)瀏覽器都遵循 CSS2.1 定義，不過(guò)一些較老的瀏覽器可能會(huì)有不同的表現(xiàn)。

2.邊框的樣式

• 樣式是邊框最重要的一個(gè)方面，這不是因?yàn)闃邮娇刂浦吙虻娘@示（當(dāng)然，樣式確實(shí)控制著邊框的顯示），而是因?yàn)槿绻麤](méi)有樣式，將根本沒(méi)有邊框。
• 定義多種樣式
  您可以為一個(gè)邊框定義多個(gè)樣式，例如：

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

上面這條規(guī)則為類(lèi)名為 aside 的段落定義了四種邊框樣式：實(shí)線(xiàn)上邊框、點(diǎn)線(xiàn)右邊框、虛線(xiàn)下邊框和一個(gè)雙線(xiàn)左邊框。
我們看到了這里的值采用了 top-right-bottom-left 的順序。

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

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

注意：如果要使用第二種方法，必須把單邊屬性放在簡(jiǎn)寫(xiě)屬性之后。因?yàn)槿绻褑芜厡傩苑旁?border-style 之前，簡(jiǎn)寫(xiě)屬性的值就會(huì)覆蓋單邊值 none。

• 沒(méi)有邊框
  在前面的例子中，您已經(jīng)看到，如果希望顯示某種邊框，就必須設(shè)置邊框樣式，比如 solid 或 outset。
  那么如果把 border-style 設(shè)置為 none 會(huì)出現(xiàn)什么情況：
  p {border-style: none; border-width: 50px;}
  盡管邊框的寬度是 50px，但是邊框樣式設(shè)置為 none。在這種情況下，不僅邊框的樣式?jīng)]有了，其寬度也會(huì)變成 0。邊框消失了，為什么呢？
  這是因?yàn)槿绻吙驑邮綖?none，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣?dòng)設(shè)置為 0，而不論您原先定義的是什么。
  記住這一點(diǎn)非常重要。事實(shí)上，忘記聲明邊框樣式是一個(gè)常犯的錯(cuò)誤。根據(jù)以下規(guī)則，所有 h1 元素都不會(huì)有任何邊框，更不用說(shuō) 20 像素寬了：
  h1 {border-width: 20px;}
  由于 border-style 的默認(rèn)值是 none，如果沒(méi)有聲明樣式，就相當(dāng)于 border-style: none。因此，如果您希望邊框出現(xiàn)，就必須聲明一個(gè)邊框樣式。
• 各種border-style：

3.邊框的寬度

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

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

或者：

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

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

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

上面的例子也可以簡(jiǎn)寫(xiě)為（這樣寫(xiě)法稱(chēng)為值復(fù)制）：

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

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

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

4.邊框的顏色

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

3.屬性：邊距

盒模型

1.內(nèi)邊距

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

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

注意：上下內(nèi)邊距與左右內(nèi)邊距一致；即上下內(nèi)邊距的百分?jǐn)?shù)會(huì)相對(duì)于父元素寬度設(shè)置，而不是相對(duì)于高度。

2.外邊距

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

4.屬性：display

• display CSS屬性指定用于元素的呈現(xiàn)框的類(lèi)型。在 HTML 中，默認(rèn)的 display 屬性取決于 HTML 規(guī)范所描述的行為或?yàn)g覽器/用戶(hù)的默認(rèn)樣式表。在 XML中，其默認(rèn)值為 inline。
• 除了多種不同的生成的元素的盒類(lèi)型，值 none 可以關(guān)閉一個(gè)元素的顯示；當(dāng)你使用 none 所有的后代元素他們的顯示也會(huì)被關(guān)閉。文檔渲染的過(guò)程中就好像在文檔樹(shù)中這個(gè)元素不存在一樣。
• 初始值：inline
• 是否能繼承：否
• 塊級(jí)元素常用的display值：block, list-item, table。
• 行內(nèi)元素常用的display值：inline, inline-table, inline-block。
• display值查詢(xún)：display-CSS|MDN

5.屬性：font

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

1.文字的字體

• font-size 屬性設(shè)置文本的大小。
• 有能力管理文本的大小在 web 設(shè)計(jì)領(lǐng)域很重要。但是，您不應(yīng)當(dāng)通過(guò)調(diào)整文本大小使段落看上去像標(biāo)題，或者使標(biāo)題看上去像段落。
  請(qǐng)始終使用正確的 HTML 標(biāo)題，比如使用 <h1> - <h6> 來(lái)標(biāo)記標(biāo)題，使用 <p> 來(lái)標(biāo)記段落。
  font-size 值可以是絕對(duì)或相對(duì)值。
• 絕對(duì)值：
  將文本設(shè)置為指定的大小
  不允許用戶(hù)在所有瀏覽器中改變文本大?。ú焕诳捎眯裕?br> 絕對(duì)大小在確定了輸出的物理尺寸時(shí)很有用
• 相對(duì)大小：
  相對(duì)于周?chē)脑貋?lái)設(shè)置大小
  允許用戶(hù)在瀏覽器改變文本大小
• 注意：如果您沒(méi)有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。
  使用像素來(lái)設(shè)置字體大小
  通過(guò)像素設(shè)置文本大小，可以對(duì)文本大小進(jìn)行完全控制：
  實(shí)例

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

• chrome的最小字體：默認(rèn)字體大小16px, 最小字體 12px，可以在chrome的設(shè)置-工具-首選項(xiàng)-高級(jí)-字體中對(duì)最小字體和默認(rèn)字體進(jìn)行設(shè)置。

2.文字的字體

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

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

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

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

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

3.文字的風(fēng)格

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

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

• italic 和 oblique 的區(qū)別
• font-style 非常簡(jiǎn)單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點(diǎn)復(fù)雜的是明確 italic 文本和 oblique 文本之間的差別。
  斜體（italic）是一種簡(jiǎn)單的字體風(fēng)格，對(duì)每個(gè)字母的結(jié)構(gòu)有一些小改動(dòng)，來(lái)反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個(gè)傾斜版本。
  通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

4.文字的變形

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

5.文字的加粗

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

6.文字的縮寫(xiě)

• 字體縮寫(xiě)
  網(wǎng)頁(yè)中的字體css樣式代碼也有他自己的縮寫(xiě)方式，下面是給網(wǎng)頁(yè)設(shè)置字體的代碼：

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

這么多行的代碼其實(shí)可以縮寫(xiě)為一句：

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

• 注意：
  1、使用這一簡(jiǎn)寫(xiě)方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動(dòng)使用默認(rèn)值。
  2、在縮寫(xiě)時(shí) font-size 與 line-height 中間要加入“/”斜扛。
  一般情況下因?yàn)閷?duì)于中文網(wǎng)站，英文還是比較少的，所以下面縮寫(xiě)代碼比較常用：

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

只是有字號(hào)、行間距、中文字體、英文字體設(shè)置。

6.屬性：文本

1.水平對(duì)齊

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

2.縮進(jìn)文本

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

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

• 繼承
  text-indent 屬性可以繼承，請(qǐng)考慮如下標(biāo)記：

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>

以上標(biāo)記中的段落也會(huì)縮進(jìn) 50 像素，這是因?yàn)檫@個(gè)段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。

3.文本裝飾

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

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

對(duì)于給定的規(guī)則，所有 class 為 stricken 的 h2 元素都只有一個(gè)貫穿線(xiàn)裝飾，而沒(méi)有下劃線(xiàn)和上劃線(xiàn)，因?yàn)?text-decoration 值會(huì)替換而不是累積起來(lái)。

4.字符轉(zhuǎn)換

• text-transform 屬性處理文本的大小寫(xiě)。這個(gè)屬性有 4 個(gè)值：
  none
  uppercase
  lowercase
  capitalize
• 默認(rèn)值 none 對(duì)文本不做任何改動(dòng)，將使用源文檔中的原有大小寫(xiě)。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫(xiě)和全小寫(xiě)字符。最后，capitalize 只對(duì)每個(gè)單詞的首字母大寫(xiě)。
  作為一個(gè)屬性，text-transform 可能無(wú)關(guān)緊要，不過(guò)如果您突然決定把所有 h1 元素變?yōu)榇髮?xiě)，這個(gè)屬性就很有用。不必單獨(dú)地修改所有 h1 元素的內(nèi)容，只需使用 text-transform 為你完成這個(gè)修改：
  h1 {text-transform: uppercase}
• 使用 text-transform 有兩方面的好處。首先，只需寫(xiě)一個(gè)簡(jiǎn)單的規(guī)則來(lái)完成這個(gè)修改，而無(wú)需修改 h1 元素本身。其次，如果您以后決定將所有大小寫(xiě)再切換為原來(lái)的大小寫(xiě)，可以更容易地完成修改。

5.字間隔

• word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。
• word-spacing 屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。如果提供一個(gè)正長(zhǎng)度值，那么字之間的間隔就會(huì)增加。為 word-spacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近：

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 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。
• 與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長(zhǎng)度。默認(rèn)關(guān)鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長(zhǎng)度值會(huì)使字母之間的間隔增加或減少指定的量：

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

7.處理空白符

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

8.文本方向

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

9.文本溢出設(shè)置

• 設(shè)置 overflow 屬性：

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

• 可能的值

10.顏色

• 單詞:
  red
  blue
  pink
  yellow
  white
  black
• 十六進(jìn)制:

#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： 固定單位
百分比(寬高？文字大?。縧ine-height? position?)
em: 相對(duì)單位，相對(duì)于父元素字體大小
rem: 相對(duì)單位，相對(duì)于根元素(html)字體大小
vw vh: 相對(duì)單位，1vw 為屏幕寬度的1% 兼容性

7.屬性：背景

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

8.隱藏or透明

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

9.inline-block

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

10.盒模型

-使用css3新樣式box-sizing
box-sizing: content-box：w3c標(biāo)準(zhǔn)盒模型
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屬性?xún)H是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。并不具備其它的樣式屬性定義。要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果還須定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），也就是說(shuō) overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用，只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。

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

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

4、如果少了white-space:nowrap;文字會(huì)把容器的高度往下?lián)?；即使你定義了高度，省略號(hào)也不會(huì)出現(xiàn)，多余的文字會(huì)被裁切掉

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