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

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

2.屬性：寬高

• 只對塊級元素設(shè)置生效岁钓，對行內(nèi)元素設(shè)置無效。
• 例子：

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

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

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

3.屬性：邊框

1.邊框與背景

• CSS 規(guī)范指出，邊框繪制在“元素的背景之上”罩旋。這很重要啊央，因為有些邊框是“間斷的”（例如眶诈，點線邊框或虛線框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見部分之間劣挫。
• CSS2 指出背景只延伸到內(nèi)邊距册养，而不是邊框。后來 CSS2.1 進(jìn)行了更正：元素的背景是內(nèi)容压固、內(nèi)邊距和邊框區(qū)的背景球拦。大多數(shù)瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現(xiàn)帐我。

2.邊框的樣式

• 樣式是邊框最重要的一個方面坎炼，這不是因為樣式控制著邊框的顯示（當(dāng)然，樣式確實控制著邊框的顯示）拦键，而是因為如果沒有樣式谣光，將根本沒有邊框。
• 定義多種樣式
  您可以為一個邊框定義多個樣式芬为，例如：

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

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

• 定義單邊樣式
  如果希望為元素框的某一個邊設(shè)置邊框樣式，而不是設(shè)置所有 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唯袄。

• 沒有邊框
  在前面的例子中，您已經(jīng)看到蜗帜，如果希望顯示某種邊框恋拷，就必須設(shè)置邊框樣式，比如 solid 或 outset厅缺。
  那么如果把 border-style 設(shè)置為 none 會出現(xiàn)什么情況：
  p {border-style: none; border-width: 50px;}
  盡管邊框的寬度是 50px蔬顾，但是邊框樣式設(shè)置為 none。在這種情況下店归，不僅邊框的樣式?jīng)]有了，其寬度也會變成 0酪我。邊框消失了消痛，為什么呢？
  這是因為如果邊框樣式為 none都哭，即邊框根本不存在秩伞，那么邊框就不可能有寬度逞带，因此邊框?qū)挾茸詣釉O(shè)置為 0，而不論您原先定義的是什么纱新。
  記住這一點非常重要展氓。事實上，忘記聲明邊框樣式是一個常犯的錯誤脸爱。根據(jù)以下規(guī)則遇汞，所有 h1 元素都不會有任何邊框，更不用說 20 像素寬了：
  h1 {border-width: 20px;}
  由于 border-style 的默認(rèn)值是 none簿废，如果沒有聲明樣式空入，就相當(dāng)于 border-style: none。因此族檬，如果您希望邊框出現(xiàn)歪赢，就必須聲明一個邊框樣式。
• 各種border-style：

3.邊框的寬度

• 您可以通過 border-width 屬性為邊框指定寬度媳拴。
• 為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em兆览；或者使用 3 個關(guān)鍵字之一屈溉，它們分別是 thin 、medium（默認(rèn)值） 和 thick抬探。
  注釋：CSS 沒有定義 3 個關(guān)鍵字的具體寬度子巾，所以一個用戶代理可能把 thin 、medium 和 thick 分別設(shè)置為等于 5px小压、3px 和 2px线梗，而另一個用戶代理則分別設(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;}

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

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

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

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

4.邊框的顏色

• 設(shè)置邊框顏色非常簡單蜻牢。CSS 使用一個簡單的 border-color 屬性烤咧。
• 它一次可以接受最多 4 個顏色值偏陪。可以使用任何類型的顏色值煮嫌，例如可以是命名顏色笛谦，也可以是十六進(jìn)制和 RGB 值：
  p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
• 如果顏色值小于 4 個，值復(fù)制就會起作用昌阿。例如下面的規(guī)則聲明了段落的上下邊框是藍(lán)色饥脑，左右邊框是紅色：
  p { border-style: solid; border-color: blue red; }
  注釋：默認(rèn)的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色宝泵，它將與元素的文本顏色相同好啰。另一方面，如果元素沒有任何文本儿奶，假設(shè)它是一個表格框往，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為 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; }
• 透明邊框
  我們剛才講過茬祷，如果邊框沒有樣式清焕，就沒有寬度。不過有些情況下您可能希望創(chuàng)建一個不可見的邊框祭犯。
  CSS2 引入了邊框顏色值 transparent秸妥。這個值用于創(chuà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;}
• 從某種意義上說沃粗，利用 transparent粥惧，使用邊框就像是額外的內(nèi)邊距一樣；此外還有一個好處最盅，就是能在你需要的時候使其可見突雪。這種透明邊框相當(dāng)于內(nèi)邊距，因為元素的背景會延伸到邊框區(qū)域（如果有可見背景的話）涡贱。
• 重要事項：在 IE7 之前咏删，IE/WIN 沒有提供對 transparent 的支持。在以前的版本问词，IE 會根據(jù)元素的 color 值來設(shè)置邊框顏色督函。

3.屬性：邊距

盒模型

1.內(nèi)邊距

• 元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。控制該區(qū)域最簡單的屬性是 padding 屬性侨核。
• CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域。
• CSS padding 屬性
  CSS padding 屬性定義元素的內(nèi)邊距灌灾。padding 屬性接受長度值或百分比值搓译，但不允許使用負(fù)值。
  例如锋喜，如果您希望所有 h1 元素的各邊都有 10 像素的內(nèi)邊距些己，只需要這樣：
  h1 {padding: 10px;}
• 您還可以按照上、右嘿般、下段标、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：
  h1 {padding: 10px 0.25em 2ex 20%;}
• 單邊內(nèi)邊距屬性
• 也通過使用下面四個單獨的屬性炉奴，分別設(shè)置上逼庞、右、下瞻赶、左內(nèi)邊距：
  padding-top
  padding-right
  padding-bottom
  padding-left
• 也許已經(jīng)想到了赛糟，下面的規(guī)則實現(xiàn)的效果與上面的簡寫規(guī)則是完全相同的：
  h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
• 內(nèi)邊距的百分比數(shù)值
  前面提到過，可以為元素的內(nèi)邊距設(shè)置百分?jǐn)?shù)值砸逊。百分?jǐn)?shù)值是相對于其父元素的 width 計算的璧南，這一點與外邊距一樣。所以师逸，如果父元素的 width 改變司倚，它們也會改變。
  下面這條規(guī)則把段落的內(nèi)邊距設(shè)置為父元素 width 的 10%：
  p {padding: 10%;}
  例如：如果一個段落的父元素是 div 元素篓像，那么它的內(nèi)邊距要根據(jù) div 的 width 計算动知。

<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ù)會相對于父元素寬度設(shè)置杯矩，而不是相對于高度。

2.外邊距

• 圍繞在元素邊框的空白區(qū)域是外邊距恼琼。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”屈暗。設(shè)置外邊距的最簡單的方法就是使用 margin 屬性拆讯，這個屬性接受任何長度單位、百分?jǐn)?shù)值甚至負(fù)值养叛。
• CSS margin 屬性
  設(shè)置外邊距的最簡單的方法就是使用 margin 屬性
  margin 屬性接受任何長度單位种呐，可以是像素、英寸弃甥、毫米或 em爽室。
  margin 可以設(shè)置為 auto。更常見的做法是為外邊距設(shè)置長度值淆攻。下面的聲明在 h1 元素的各個邊上設(shè)置了 1/4 英寸寬的空白：
  h1 {margin : 0.25in;}
  下面的例子為 h1 元素的四個邊分別定義了不同的外邊距阔墩，所使用的長度單位是像素 (px)：
  h1 {margin : 10px 0px 15px 5px;}
• 與內(nèi)邊距的設(shè)置相同嘿架，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉(zhuǎn)的：
  margin: top right bottom left
• 另外，還可以為 margin 設(shè)置一個百分比數(shù)值：
  p {margin : 10%;}
  百分?jǐn)?shù)是相對于父元素的 width 計算的啸箫。上面這個例子為 p 元素設(shè)置的外邊距是其父元素的 width 的 10%耸彪。
• margin 的默認(rèn)值是 0，所以如果沒有為 margin 聲明一個值忘苛，就不會出現(xiàn)外邊距蝉娜。但是，在實際中扎唾，瀏覽器對許多元素已經(jīng)提供了預(yù)定的樣式召川，外邊距也不例外。例如胸遇，在支持 CSS 的瀏覽器中荧呐，外邊距會在每個段落元素的上面和下面生成“空行”。因此纸镊，如果沒有為 p 元素聲明外邊距坛增，瀏覽器可能會自己應(yīng)用一個外邊距。當(dāng)然薄腻，只要你特別作了聲明收捣，就會覆蓋默認(rèn)樣式。
• 單邊外邊距屬性
  您可以使用單邊外邊距屬性為元素單邊上的外邊距設(shè)置值庵楷。假設(shè)您希望把 p 元素的左外邊距設(shè)置為 20px罢艾。不必使用 margin（需要鍵入很多 auto），而是可以采用以下方法：
  p {margin-left: 20px;}
  您可以使用下列任何一個屬性來只設(shè)置相應(yīng)上的外邊距尽纽，而不會直接影響所有其他外邊距：
  margin-top
  margin-right
  margin-bottom
  margin-left
  一個規(guī)則中可以使用多個這種單邊屬性咐蚯，例如：
  h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
  當(dāng)然，對于這種情況弄贿，使用 margin 可能更容易一些：
  p {margin: 20px 30px 30px 20px;}
  不論使用單邊屬性還是使用 margin春锋，得到的結(jié)果都一樣。一般來說差凹，如果希望為多個邊設(shè)置外邊距期奔，使用 margin 會更容易一些。不過危尿，從文檔顯示的角度看呐萌，實際上使用哪種方法都不重要，所以應(yīng)該選擇對自己來說更容易的一種方法谊娇。
• 注意：對于塊級元素設(shè)置屬性：margin：0 auto肺孤；可以設(shè)置該塊級元素格式為居中。
• *{margin: 0;padding: 0}:消除當(dāng)前瀏覽器的默認(rèn)邊距樣式，瀏覽器的默認(rèn)樣式為：user agent stylesheet赠堵。

4.屬性：display

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

5.屬性：font

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

1.文字的字體

• font-size 屬性設(shè)置文本的大小赌躺。
• 有能力管理文本的大小在 web 設(shè)計領(lǐng)域很重要狼牺。但是，您不應(yīng)當(dāng)通過調(diào)整文本大小使段落看上去像標(biāo)題礼患，或者使標(biāo)題看上去像段落是钥。
  請始終使用正確的 HTML 標(biāo)題，比如使用 <h1> - <h6> 來標(biāo)記標(biāo)題缅叠，使用 <p> 來標(biāo)記段落悄泥。
  font-size 值可以是絕對或相對值。
• 絕對值：
  將文本設(shè)置為指定的大小
  不允許用戶在所有瀏覽器中改變文本大蟹袅弧（不利于可用性）
  絕對大小在確定了輸出的物理尺寸時很有用
• 相對大械簟：
  相對于周圍的元素來設(shè)置大小
  允許用戶在瀏覽器改變文本大小
• 注意：如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)领曼。
  使用像素來設(shè)置字體大小
  通過像素設(shè)置文本大小鸥鹉，可以對文本大小進(jìn)行完全控制：
  實例

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

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

2.文字的字體

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

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

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

• 這樣的規(guī)則同時會產(chǎn)生另外一個問題凯楔，如果用戶代理上沒有安裝 Georgia 字體窜骄，就只能使用用戶代理的默認(rèn)字體來顯示 h1 元素。
  我們可以通過結(jié)合特定字體名和通用字體系列來解決這個問題：
  h1 {font-family: Georgia, serif;}
• 如果讀者沒有安裝 Georgia摆屯，但安裝了 Times 字體（serif 字體系列中的一種字體）邻遏，用戶代理就可能對 h1 元素使用 Times。盡管 Times 與 Georgia 并不完全匹配虐骑，但至少足夠接近准验。
  因此，我們建議在所有 font-family 規(guī)則中都提供一個通用字體系列廷没。這樣就提供了一條后路糊饱，在用戶代理無法提供與規(guī)則匹配的特定字體時，就可以選擇一個候選字體颠黎。
  如果您對字體非常熟悉济似，也可以為給定的元素指定一系列類似的字體。要做到這一點盏缤，需要把這些字體按照優(yōu)先順序排列砰蠢，然后用逗號進(jìn)行連接：
  p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
  根據(jù)這個列表，用戶代理會按所列的順序查找這些字體唉铜。如果列出的所有字體都不可用台舱，就會簡單地選擇一種可用的 serif 字體。
• 使用引號
  您也許已經(jīng)注意到了潭流，上面的例子中使用了單引號竞惋。只有當(dāng)字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號灰嫉，才需要在 font-family 聲明中加引號拆宛。
  單引號或雙引號都可以接受。但是讼撒，如果把一個 font-family 屬性放在 HTML 的 style 屬性中浑厚，則需要使用該屬性本身未使用的那種引號：

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

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

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

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

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

4.文字的變形

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

5.文字的加粗

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

6.文字的縮寫

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

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)如未指定將自動使用默認(rèn)值扇雕。
  2拓售、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
  一般情況下因為對于中文網(wǎng)站镶奉，英文還是比較少的础淤，所以下面縮寫代碼比較常用：

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

只是有字號崭放、行間距、中文字體值骇、英文字體設(shè)置莹菱。

6.屬性：文本

1.水平對齊

• text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式吱瘩。它的前 3 個值相當(dāng)直接道伟，不過第 4 個和第 5 個則略有些復(fù)雜。
• 值 left使碾、right 和 center 會導(dǎo)致元素中的文本分別左對齊蜜徽、右對齊和居中。
• 西方語言都是從左向右讀票摇，所有 text-align 的默認(rèn)值是 left拘鞋。文本在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文本）矢门。對于希伯來語和阿拉伯語之類的的語言盆色，text-align 則默認(rèn)為 right，因為這些語言從右向左讀祟剔。不出所料隔躲，center 會使每個文本行在元素中居中。
• 提示：將塊級元素或表元素居中物延，要通過在這些元素上適當(dāng)?shù)卦O(shè)置左宣旱、右外邊距來實現(xiàn)。
  text-align:center 與 <CENTER>
• text-align:center 與 <CENTER> 的區(qū)別：
  <CENTER> 不僅影響文本叛薯，還會把整個元素居中浑吟。text-align 不會控制元素的對齊，而只影響內(nèi)部內(nèi)容耗溜。元素本身不會從一段移到另一端组力，只是其中的文本受影響。
• justify
  最后一個水平對齊屬性是 justify抖拴。
  在兩端對齊文本中忿项，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后城舞，調(diào)整單詞和字母間的間隔轩触，使各行的長度恰好相等。您也許已經(jīng)注意到了家夺，兩端對齊文本在打印領(lǐng)域很常見脱柱。
  需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸拉馋，以填滿父元素左右邊界之間的空間榨为。如需了解詳情惨好，請參閱 CSS text-align 屬性參考頁。

2.縮進(jìn)文本

• 把 Web 頁面上的段落的第一行縮進(jìn)随闺，這是一種最常用的文本格式化效果日川。
• CSS 提供了 text-indent 屬性，該屬性可以方便地實現(xiàn)文本縮進(jìn)矩乐。
• 通過使用 text-indent 屬性龄句，所有元素的第一行都可以縮進(jìn)一個給定的長度，甚至該長度可以是負(fù)值散罕。
• 這個屬性最常見的用途是將段落的首行縮進(jìn)分歇，下面的規(guī)則會使所有段落的首行縮進(jìn) 5 em：
  p {text-indent: 5em;}
• 注意：一般來說，可以為所有塊級元素應(yīng)用 text-indent欧漱，但無法將該屬性應(yīng)用于行內(nèi)元素职抡，圖像之類的替換元素上也無法應(yīng)用 text-indent 屬性。不過误甚，如果一個塊級元素（比如段落）的首行中有一個圖像缚甩，它會隨該行的其余文本移動。
• 提示：如果想把一個行內(nèi)元素的第一行“縮進(jìn)”窑邦，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果擅威。
• 使用負(fù)值
  text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù)奕翔，可以實現(xiàn)很多有趣的效果裕寨，比如“懸掛縮進(jìn)”浩蓉，即第一行懸掛在元素中余下部分的左邊派继。
  p {text-indent: -5em;}
  不過在為 text-indent 設(shè)置負(fù)值時要當(dāng)心，如果對一個段落設(shè)置了負(fù)值捻艳，那么首行的某些文本可能會超出瀏覽器窗口的左邊界驾窟。為了避免出現(xiàn)這種顯示問題，建議針對負(fù)縮進(jìn)再設(shè)置一個外邊距或一些內(nèi)邊距：
  p {text-indent: -5em; padding-left: 5em;}
• 使用百分比值
  text-indent 可以使用所有長度單位认轨，包括百分比值绅络。
  百分?jǐn)?shù)要相對于縮進(jìn)元素父元素的寬度。換句話說嘁字，如果將縮進(jìn)值設(shè)置為 20%恩急，所影響元素的第一行會縮進(jìn)其父元素寬度的 20%。
  在下例中纪蜒，縮進(jìn)值是父元素的 20%衷恭，即 100 個像素：

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

• 繼承
  text-indent 屬性可以繼承，請考慮如下標(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)記中的段落也會縮進(jìn) 50 像素纯续，這是因為這個段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值随珠。

3.文本裝飾

• 接下來灭袁，我們討論 text-decoration 屬性，這是一個很有意思的屬性窗看，它提供了很多非常有趣的行為茸歧。
  text-decoration 有 5 個值：
  none
  underline
  overline
  line-through
  blink
• 不出所料，underline 會對元素加下劃線显沈，就像 HTML 中的 U 元素一樣软瞎。overline 的作用恰好相反，會在文本的頂端畫一個上劃線构罗。值 line-through 則在文本中間畫一個貫穿線铜涉，等價于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍遂唧，類似于 Netscape 支持的頗招非議的 blink 標(biāo)記芙代。
• none 值會關(guān)閉原本應(yīng)用到一個元素上的所有裝飾。通常盖彭，無裝飾的文本是默認(rèn)外觀纹烹，但也不總是這樣。例如召边，鏈接默認(rèn)地會有下劃線铺呵。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點：
  a {text-decoration: none;}
• 注意：如果顯式地用這樣一個規(guī)則去掉鏈接的下劃線隧熙，那么錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認(rèn)是這樣的片挂，不過也不能完全保證其顏色肯定有區(qū)別）。還可以在一個規(guī)則中結(jié)合多種裝飾贞盯。如果希望所有超鏈接既有下劃線音念，又有上劃線，則規(guī)則如下：a:link a:visited {text-decoration: underline overline;}不過要注意的是躏敢，如果兩個不同的裝飾都與同一元素匹配闷愤，勝出規(guī)則的值會完全取代另一個值。請考慮以下的規(guī)則：

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

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

4.字符轉(zhuǎn)換

• text-transform 屬性處理文本的大小寫旬渠。這個屬性有 4 個值：
  none
  uppercase
  lowercase
  capitalize
• 默認(rèn)值 none 對文本不做任何改動，將使用源文檔中的原有大小寫端壳。顧名思義告丢，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。最后更哄，capitalize 只對每個單詞的首字母大寫芋齿。
  作為一個屬性腥寇，text-transform 可能無關(guān)緊要，不過如果您突然決定把所有 h1 元素變?yōu)榇髮懨倮Γ@個屬性就很有用赦役。不必單獨地修改所有 h1 元素的內(nèi)容，只需使用 text-transform 為你完成這個修改：
  h1 {text-transform: uppercase}
• 使用 text-transform 有兩方面的好處栅炒。首先掂摔，只需寫一個簡單的規(guī)則來完成這個修改，而無需修改 h1 元素本身赢赊。其次乙漓，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改释移。

5.字間隔

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

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 屬性的可取值包括所有長度误窖。默認(rèn)關(guān)鍵字是 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 字符的處理霹俺。
• 通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式萍膛。從某種程度上講吭服，默認(rèn)的 XHTML 處理已經(jīng)完成了空白符處理：它會把所有空白符合并為一個空格嚷堡。所以給定以下標(biāo)記蝗罗，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格蝌戒，同時忽略元素中的換行：
  <p>This paragraph has many spaces in it.</p>
  可以用以下聲明顯式地設(shè)置這種默認(rèn)行為：
  p {white-space: normal;}
• 上面的規(guī)則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符串塑。如果給定這個值，換行字符（回車）會轉(zhuǎn)換為空格北苟，一行中多個空格的序列也會轉(zhuǎn)換為一個空格桩匪。
• 值 pre
  不過，如果將 white-space 設(shè)置為 pre友鼻，受這個屬性影響的元素中傻昙，空白符的處理就有所不同闺骚，其行為就像 XHTML 的 pre 元素一樣；空白符不會被忽略妆档。
  如果 white-space 屬性的值為 pre僻爽，瀏覽器將會注意額外的空格，甚至回車贾惦。在這個方面胸梆，而且僅在這個方面，任何元素都可以相當(dāng)于一個 pre 元素须板。
  注意：經(jīng)測試碰镜，IE 7 以及更早版本的瀏覽器不支持該值，因此請使用非 IE 的瀏覽器來查看上面的實例习瑰。
• 值 nowrap
  與之相對的值是 nowrap绪颖，它會防止元素中的文本換行，除非使用了一個 br 元素甜奄。
• 值 pre-wrap 和 pre-line
  CSS2.1 引入了值 pre-wrap 和 pre-line菠发，這在以前版本的 CSS 中是沒有的。這些值的作用是允許創(chuàng)作人員更好地控制空白符處理贺嫂。
  如果元素的 white-space 設(shè)置為 pre-wrap滓鸠，那么該元素中的文本會保留空白符序列，但是文本行會正常地?fù)Q行第喳。如果設(shè)置為這個值糜俗，源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反曲饱，會像正常文本中一樣合并空白符序列悠抹，但保留換行符。
  注意：我們在 IE7 和 FireFox2.0 瀏覽器中測試了上面的兩個實例扩淀，但是結(jié)果是楔敌，值 pre-wrap 和 pre-line 都沒有得到很好的支持。
• 總結(jié)：

8.文本方向

• 如果您閱讀的是英文書籍驻谆，就會從左到右卵凑、從上到下地閱讀，這就是英文的流方向胜臊。不過勺卢，并不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的象对，當(dāng)然還包括希伯來語和阿拉伯語等等黑忱。CSS2 引入了一個屬性來描述其方向性。
• direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向甫煞、內(nèi)容水平填充其元素框的方向菇曲、以及兩端對齊元素中最后一行的位置。
  注釋：對于行內(nèi)元素抚吠，只有當(dāng) unicode-bidi 屬性設(shè)置為 embed 或 bidi-override 時才會應(yīng)用 direction 屬性羊娃。
• direction 屬性有兩個值：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： 固定單位
百分比(寬高？文字大兴肝住署隘？line-height? position?)
em: 相對單位，相對于父元素字體大小
rem: 相對單位亚隙，相對于根元素(html)字體大小
vw vh: 相對單位磁餐，1vw 為屏幕寬度的1% 兼容性

7.屬性：背景

• 屬性 描述
  background:簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中
  background-attachment :背景圖像是否固定或者隨著頁面的其余部分滾動
  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)整圖片寬度剛好充滿框阿弃。
  cover：調(diào)整圖片高度剛好充滿框诊霹。
• 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
  指將不同的圖片/圖標(biāo)合并在一張圖上。
  使用CSS Sprite 可以減少網(wǎng)絡(luò)請求恤浪，提高網(wǎng)頁加載性能畅哑。

8.隱藏or透明

opacity: 0 ; 透明度為0肴楷，整體
visibility: hidden ; 和opacity:0 類似水由，看不見元素的存在，但是占用位置赛蔫。
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時，兩個元素如果高度不一樣声离，對齊的位置是文字底部的基線芒炼，修改方法是使用：vertical-align=top／bottom來設(shè)置對齊的位置。
• 縫隙問題
  兩個元素之間有空白字符术徊，很多個空白字符和換行被識別為一個空格本刽。
  可以將父元素的字體設(shè)置為0 ，然后再將本元素的字體大小變回去赠涮。
  或者通過設(shè)置空白字符的屬性來消去空格子寓。
  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屬性僅是注解垃它，當(dāng)文本溢出時是否顯示省略標(biāo)記蝙寨。并不具備其它的樣式屬性定義。要實現(xiàn)溢出時產(chǎn)生省略號的效果還須定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）嗤瞎，也就是說 overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用墙歪，只有這樣才能實現(xiàn)溢出文本顯示省略號的效果。

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

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

4、如果少了white-space:nowrap;文字會把容器的高度往下?lián)蔚敉患词鼓愣x了高度毕源，省略號也不會出現(xiàn)，多余的文字會被裁切掉

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