一、css基礎教程

1.選擇器等級

樣式表允許以多種方式規定樣式資訊，樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 檔案中，甚至可以在同一個 HTML 檔案內部參考多個外部樣式表，

1.1層疊次序

當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？

一般而言，所有的樣式會根據下面的規則層疊于一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權，

1. 瀏覽器預設設定
2. 外部樣式表 <link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
3. 內部樣式表（位于 標簽內部）
4. 行內樣式（在 HTML 元素內部，具有最高選擇等級)

因此，行內樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先于以下的樣式宣告： 標簽中的樣式宣告，外部樣式表中的樣式宣告，或者瀏覽器中的樣式宣告（預設值），

1.2css三大特性

層疊性、繼承性、優先級

層疊性原則

樣式沖突時，就近原則，選擇離樣式結構近的樣式

不沖突，不會重疊

繼承性

子元素可以繼承父元素的樣式(text,font,ine這些元素開頭的可以繼承，以及 color屬性)以及行高

一般文字方面的會被繼承

優先級

型別	權重
! important	無窮
行間樣式	1000
id	100
class/屬性選擇器/偽類	10
標簽選擇器	1
通配符	0

• 注意，選擇器不會進位，從左到右（忘記的話不太好理解），就是可以理解為11個類選擇器沒有一個id選擇器等級高
• 繼承的權重為零：如果該元素沒有直接選中,不管父元素權重多高,元素得到的權重都是0，

2.基礎語法

CSS 規則由兩個主要的部分構成：選擇器，以及一潭訓多條宣告，

selector {declaration1; declaration2; ... declarationN }
//選擇器{宣告1；宣告2；宣告3；......宣告n}

2.1宣告

**定義：**宣告是由一個屬性和一個值所構成，屬性和值之間用冒號隔開，

注意事項：宣告需要用花括號來包括，并且如果是多個宣告，則前面的幾個宣告結束都需要加一個分號，最后一個可加可不加，但是建議加上，方便以后繼續添加宣告，

**建議 **：每個宣告都單獨成行，這樣書寫看著美觀，以便于后期的修改，

屬性： 我們想要設定的樣式屬性， 例如：顏色，字體樣式，字體大小，下劃線等等，

**值 **: 每個屬性我們要設定的具體的數值， 例如： 顏色的值紅色，字體的大小16等等，

selector {property: value;}
//選擇器{屬性：值}
／／一個屬性和一個值稱之為一個屬性

2.2值的寫法和單位

2.2.1顏色的幾種寫法(用紅色舉例)

1. 英語單詞

   p{color: red;}
   

2. 16進制的顏色值

   p{color: #ff0000;}
   

3. 簡寫16進制表示（從第二種演變而來）

   p{color: #f00;}
   

4. 使用rgb值

   p{color: rgb(255,0,0);}
   p{color: rgb(100%,0%,0%);}
   

2.2.2值的注意事項

如果值的單詞為多個則由如下兩種方式表示：

• 用引號括起來，

• 用短橫線連接，

  sans-serif
  “sans serif”
  

  這是兩種不同風格的表示方式，可根據個人喜好來進行選擇，

  注意：在一個或者一組網頁書寫的使用同一種的書寫規范來表示，

2.2.3大小寫問題

css一般對大小寫不敏感，但是當遇到于HTML合作的時候的class和id是對帶小寫敏感的，

3.高級語法

3.1選擇器的分組

可以對選擇器進行分組，被分組的選擇器就可以分享相同的宣告，

分組方法：用逗號將需要分組的選擇器分開，宣告用同一個大括號括住，

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

3.2曾經存在過的繼承問題

通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd），在曾經有一些特定的瀏覽器會忽略繼承，例如net space4就忽略了繼承，所以通過冗余法則的方式解決，

解決方法：

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

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

4.選擇器

選擇器的優先級：

id選擇器 > 類選擇器 > 標簽選擇器

4.1、派生選擇器

通過依據元素在其位置的背景關系關系來定義樣式，你可以使標記更加簡潔，

例如：希望串列中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

這樣做之后我們在串列當中的粗體就會是斜體而不需要使用class或者id來進行特殊的標記，這樣之后的代碼更加簡潔，

4.2、id選擇器

id的命名規則

id 值必須以字母或者下劃線開始；不能以數字開始，雖然 W3C 驗證不會捕獲這個錯誤，但是 XML 決議器會的，同時，如果你將 id 與 JavaScript 在表單中配合使用，那么 id 名稱和值必須是合法的 JavaScript 變數，空格和連字號，特別是連字號，是不被允許的，不僅如此，將下劃線用于 class 或者 id 名都不是個好主意，這是由于在 CSS2.0（以及某些瀏覽器）中的限制，

定義的時候語法如下：

#red {color: red;}
#blue {color: blue;}

使用方法如下：

<p id="red">這個段落是紅色的</p>
<p id="blue">這個段落是藍色的</p>

id選擇器可以與派生選擇器共同使用

討論：為什么相同id的值在每個 HTML 檔案中只能出現一次？

1. 解釋一：在某一些我們只是為了特定的只使用一次的盒子之類的東西定義一些屬性的時候就可以用id來進行標記，因為id的目的就是為了是一些東西具有唯一性，

2. 解釋二：id 屬性對于 XHTML 并不新鮮；class 屬性或者 div 元素也一樣，它們都可以回溯到 HTML 時代，id 屬性為一個元素分配一個唯一的名字，每個名字只能在被賦予的頁面使用一次，（例如，假如你的頁面包含 id 為 content 的 div，那么另外一個 div 或者其他別的元素都不能使用這個名字，相反地，class 屬性可以被一遍又一遍地使用在頁面中（例如，頁面中的五個段落都可以使用名為 “small” 或者"footnote" 的 class 名稱）

3. 解釋三：這個和資料庫里面的primary key 一樣
   作為身份的標識，只能出現一個
   name為什么可以多 就像劉德華人人都可以叫一樣
   但是你認識那個劉德華只有一個，ID就是標識這個唯一的途徑

4. 解釋四：id 就是唯一標識, id 的作用就是唯一標識元素, id 在html 中出現多次也不會報錯, 但是使用 javascript 訪問id 時就會有問題了

5. 解釋五：其實 id 選擇器, 和class 選擇器沒有什么區別, 有時只是怕使用 javascript 的時候, 造成重復, 或無法標識, 通常使用 class 的情況下比較多

6. 解釋六：把 id 屬性比作粘性貼紙來進行思考應該是有幫助的，我會在冰箱上拍一張貼紙來提醒自己去買牛奶，電話上面也會貼一張，提醒我給一位逾期繳納的客戶打電話，還有一個，被貼在賬本夾上面，來提醒我這個月 15 號之前必須繳納的賬單，

   id同樣會標注檔案中的特殊區域，以便提醒你哪個區域需要特殊的處理，在這點上，id屬性與粘性貼紙是相似的，為了實作所謂的特殊處理，你需要使用這個特殊的id在樣式表中撰寫若干規則，或者在JavaScript檔案中添加幾行代碼，比方說，你的CSS檔案中有一些特定的規則，這些規則只應用于id名為searchform的div內的元素，該解釋告訴我們為什么要用id

7. 總結：id和class在選擇的時候如果不是這個元素具有唯一性，那么就用class來對這個元素進行標識，如果元素具有唯一性那么就用id進行標識，因為在HTML當中id或許重復使用不會報錯但是在JavaScript當中就會出現問題

這里面是對w3c的一些引文，便于理解

div、id 和其他幫手

如果被正確地使用，div 可以成為結構化標記的好幫手，而 id 則是一種令人驚訝的小工具，它使你有能力撰寫極其緊湊的 XHTML，以及巧妙地利用 CSS，并通過標準檔案物件模型 (DOM) 向站點添加復雜精巧的行為，

W3C 在其最新的 XHTML2 草案的 XHTML 結構模型中這樣定義 div：

div 元素，通過與 id、class 及 role 屬性配合，提供向檔案添加額外結構的通用機制，這個元素不會將表現的風格定義于內容，所以，創作者可以通過將這個元素與樣式表、xml:lang、屬性等配合使用，使 XHTML 適應他們自身的需求和口味，

div 是 division 的簡寫，division 意為分割、區域、分組，比方說，當你將一系列的鏈接組合在一起，就形成了檔案的一個 division，

確定結構的通用機制

所有撰寫 HTML 的人對段落和標題這類常見的元素都很熟悉，但是有些人對 div 就可能不那么熟悉了，在W3C的描述中我們可以找到理解 div 元素的關鍵，“一種添加結構的通用機制，”

在本站的首頁，我們將教程目錄串列封裝于一個 div 之中，這是因為教程目錄并不是正文的任何元素的一部分，其中，h2元素標記每個教程的標題，同時 ul 串列元素標記每個教程的詳細串列，但是在更大更具體的意義中，這個教程目錄扮演了一個結構化的角色，即二級導航組件，為了強調這個角色，我們使用 navsecond 這個 id 標注這個 div，

<div id="navsecond">

<h2>HTML教程</h2>
<ul>
<li><a href="/html/index.asp" title="HTML教程">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML教程">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS教程">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP教程">TCP/IP</a></li>
</ul>

<h2>XML教程</h2>
<ul>
<li><a href="/xml/index.asp" title="XML教程">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL語言">XSL</a></li>
... ...
... ...

</div>

你可以使用任何命名，“Gladys” 和 "orangebox"都完全符合 XHTML 的命名規則，但是語意的 (semantic) 或者元結構化 (meta-structural) 的命名是最好的（即能夠解釋其中元素所執行功能的命名），

當客戶決定使用藍色時，你會覺得將站點某部分命名為 orangebox（橙色框）會非常地傻，下面的這種情況中，你會覺得自己更傻，當距離最后交付只有六個月時，你開始調校樣式表，卻怎么也想不起來 “Gladys”（格拉迪斯，女子名）到底代表導航區、側欄還是搜索框，這里告訴我們id的命名應該怎么做

因此，將 id 標注為 “menu”、“content” 或者 "searchform"會幫助你回憶，進一步講，標記不等同于設計，結構良好的的頁面可以被格式化為你希望的任何樣子，這樣做的結果是，無論你使用純粹 CSS 布局或者混合布局，你都會徹底改掉使用表現標記進行思考和創作的習慣，

id Vs. class

id 屬性對于 XHTML 并不新鮮；class 屬性或者 div 元素也一樣，它們都可以回溯到 HTML 時代，id 屬性為一個元素分配一個唯一的名字，每個名字只能在被賦予的頁面使用一次，（例如，假如你的頁面包含 id 為 content 的 div，那么另外一個 div 或者其他別的元素都不能使用這個名字，相反地，class 屬性可以被一遍又一遍地使用在頁面中（例如，頁面中的五個段落都可以使用名為 “small” 或者"footnote" 的 class 名稱），下面的標記將有助于闡明 id 和 class 的差異：

<div id="searchform">Search form components go here. This
section of the page is unique.</div>
<div class="blogentry">
<h2>Today's blog post</h2>
<p>Blog content goes here.</p>
<p>Here is another paragraph of blog content.</p>
<p>Just as there can be many paragraphs on a page, so too
there may be many entries in a blog. A blog page could use
multiple instances of the class "blogentry" (or any other
class).</p>
</div>

<div class="blogentry">
<h2>Yesterday's blog post</h2>
<p>In fact, here we are inside another div of class
"blogentry."</p>
<p>They reproduce like rabbits.</p>
<p>If there are ten blog posts on this page, there might
be ten divs of class "blogentry" as well.</p>
</div>

在這個例子中，名為 searchform 的 div 被用來封裝包含搜索表單的頁面區域，而 div class=“blogentry” 則用來封裝 blog 中的每個文章入口，在頁面中只有一個搜索表單，所以我們選擇 id 標注這個唯一的組件，但是 blog 則擁有許多的（文章）入口，所以 class 屬性被應用于這種情況，同樣地，新聞站點通常擁有多個 div，這些 div 的 class 可以命名為 “newsitem” 或者別的什么，

然而不是所有的站點都需要 div，blog 站點可以僅僅使用 h1, H2, 和 h2 標題和

段落，新聞站點也一樣，我們在這里展示 class 為 blogentry 的 div，并不是鼓勵你在站點中塞滿 div，而僅僅是為了向你展示這個原則：在同一個 HTML 檔案中，使用多次 class，但只能使用一次 id，

粘性貼紙理論

把 id 屬性比作粘性貼紙來進行思考應該是有幫助的，我會在冰箱上拍一張貼紙來提醒自己去買牛奶，電話上面也會貼一張，提醒我給一位逾期繳納的客戶打電話，還有一個，被貼在賬本夾上面，來提醒我這個月 15 號之前必須繳納的賬單，

id同樣會標注檔案中的特殊區域，以便提醒你哪個區域需要特殊的處理，在這點上，id屬性與粘性貼紙是相似的，為了實作所謂的特殊處理，你需要使用這個特殊的id在樣式表中撰寫若干規則，或者在JavaScript檔案中添加幾行代碼，比方說，你的CSS檔案中有一些特定的規則，這些規則只應用于id名為searchform的div內的元素，

當某一 id 屬性作為一個有磁性的東西（磁鐵）被用于一系列特定的 CSS 規則時，它被稱為CSS選擇器，有許多創建選擇器的方法，不過 id 是很容易使用的，并且有多的用途，

來源：https://www.w3school.com.cn/xhtml/xhtml_structural_02.asp

4.3類選擇器（元素選擇器）

定義方法： 在 CSS 中，類選擇器以一個點號顯示：

.center {text-align: center}
//所有擁有 center 類的 HTML 元素均為居中，

使用方法：

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>
//在下面的 HTML 代碼中，h1 和 p 元素都有 center 類，這意味著兩者都將遵守 ".center" 選擇器中的規則，

**注意：**類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用，

類選擇器也可以作為派生選擇器使用

用法如下：

//第一種
.fancy td {
	color: #f60;
	background: #666;
	}
//在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字，（名為 fancy 的更大的元素可能是一個表格或者一個 div）
//第二種
td.fancy {
	color: #f60;
	background: #666;
	}

4.4屬性選擇器

注釋：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器，在 IE6 及更低的版本中，不支持屬性選擇，

定義方法：

[屬性]{宣告;}

//下面的例子為帶有 title 屬性的所有元素設置樣式：
[title]
{
color:red;
}

屬性和值選擇器

? 定義方法：

[屬性=值]{宣告;}

//下面的例子為 title="W3School" 的所有元素設定樣式：
[title=W3School]
{
border:5px solid blue;
}

屬性和值選擇器 - 多個值

定義方法：

[屬性~=值]{宣告} 注意：適用于由空格分隔的屬性值，不識別連字符分割的屬性

//下面的例子為包含指定值的 title 屬性的所有元素設定樣式，適用于由空格分隔的屬性值：
[title~ =hello] { color:red; }

[屬性|=值]{宣告} 注意：適用于由連字符分隔的屬性值，不識別空格分隔的屬性

//下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式，適用于由連字符分隔的屬性值：
[lang|=en] { color:red; }

注意：包含指定值的 XXX屬性的所有元素設定樣式，這里的指定值是值得單詞而不是某個字母，是以單詞形式為最小單位的多個值也就是完全匹配，

[title~ =hello] {color:red;}   	//識別一個單詞
[title~ =wor] {color:green;}       //不識別單詞中的區域字母

<h1>可以應用樣式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>無法應用樣式：</h1>
<h2 title="hello-world">Hello world</h2>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
<p lang="zh en">Hao!</p>

設定表單的樣式

定義方法：

屬性[型別=“值”]{宣告}

//屬性選擇器在為不帶有 class 或 id 的表單設定樣式時特別有用：
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

使用方法：

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>

CSS 選擇器參考手冊

選擇器	描述
[attribute]	用于選取帶有指定屬性的元素，
[attribute=value]	用于選取帶有指定屬性和值的元素，
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素，
[attribute|=value]	用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞，
[attribute^=value]	匹配屬性值以指定值開頭的每個元素，
[attribute$=value]	匹配屬性值以指定值結尾的每個元素，
[attribute*=value]	匹配屬性值中包含指定值的每個元素，

5.插入樣式表的方法

外部樣式 內部樣式 行內樣式 這就是給HTML匯入css樣式表的三種方法

<!--第一種  鏈接式-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<!--第二種   匯入式-->
<sytle>
@import url("")
</sytle>

注:匯入式有一個弊端，在網頁較大的時候會先顯示一個網頁的骨架，然后再進行渲染，這樣會導致用戶的體驗感降低，所以現在推薦使用的式link標簽式方式插入css表

5.1外部樣式表

通過標簽來進行鏈接，而標簽的位置應該位于檔案的頭部，

外部樣式表可以在任何文本編輯器中進行編輯，檔案不能包含任何的 html 標簽，樣式表保存的時候以.css結尾，

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

5.2內部樣式表

當單個檔案需要特殊的樣式時，就應該使用內部樣式表，你可以使用

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

5.3行內樣式(一般不建議使用）

由于要將表現和內容混雜在一起，行內樣式會損失掉樣式表的許多優勢，請慎用這種方法，例如：當樣式僅需要在一個元素上應用一次時，要使用行內樣式，你需要在相關的標簽內使用樣式（style）屬性，Style 屬性可以包含任何 CSS 屬性，這時候可以選擇使用行內樣式，

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

注意: 屬性和單位之間不要加空格

5.4總結

? 在幾種樣式進行選擇的時候瀏覽器會遵從層疊覆寫原則即為后面定義的會覆寫過前面定義的樣式，就像Java中的繼承和重寫一樣，

優先級： 行內樣式優先級最高，然后內部樣式和外部樣式的優先級使用就近原則

6.塊級元素和行內元素

元素模式	元素排列	設定樣式	默認寬度	包含
塊級元素	行只能放一個塊級元素	可以設定寬高	容器的100%	容器可以包含任何元素
行內元素	行可以放多個行內元素	不可以直接設定寬高	它本身內容的寬度	只能容納行內元素
行內塊元素	行放多個行內塊元素	可以設定寬高	它本身內容的寬度

討論： 行內級元素可以設定寬高嗎？

不會為自身內容形成新的塊，而讓內容分布在多行中的元素叫做行內級元素，此類元素可以與其它行內級元素在同一行中顯示而不會另起一行，例如span，strong，在面試時，當被問到行內級元素可否設定寬高時，根據我們的經驗往往會回答不能，但是這樣往往著了面試官的道，因為有一些特殊的行內元素，比如img，input，select等等，是可以被設定寬高的，一個內容不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素，比如img是一個置換元素，當不對它設定寬高時，它會按照本身的寬高進行顯示，所以這個問題的正確答案應該是置換元素可以，非置換元素不可以，

二、css樣式

1.背景色

頁面背景色：給body的樣式添加一個為background-color的標簽

color和background-color的區別：

color時設定的字體的顏色，background時設定的背景的顏色

背景色外延：如果想要在設定顏色的文本之外讓顏色向外延伸一點，那么就是用padding屬性，padding要和前面的背景顏色合并使用， 例如：p {background-color: gray; padding: 20px;}

值的取值范圍：在padding中指的取值范圍非負數，

背景透明：如果一個元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見，background:transparent 這個是背景透明屬性

圖片背景重復：背景影像平鋪，可以使用 background-repeat 屬性repeat的引數有no-repeat，repeat-x,repeat-y,repeat，用法如下：

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

背景定位：可以是相對定位也可以是絕對定位，屬性為background-position，相對定位的引數有top、bottom、left、right 和 center，絕對定位有 100px 或 5cm，最后也可以使用百分數值，

• 相對定位可以同時使用兩個，兩兩組合表示八個方位，
• 使用絕對定位的時候，兩個數值的分割使用空格來分割橫坐標和縱坐標，
• 使用百分數，這個時候的便宜標準是包裹元素的尺寸減掉背景圖片的尺寸作為基數進行偏移，而不是以包裹元素的寬高作為基數偏移，
  • 舉例說明：background-position：50% 50%解釋：假設包裹層寬度300px，背景圖寬度200px，則第一個50%實際上對應偏移像素值為（300px - 200px）*50%，顯然，這樣就是居中顯示了，

總結：CSS 背景屬性

屬性	描述
background	簡寫屬性，作用是將背景屬性設定在一個宣告中，
background-attachment	背景影像是否固定或者隨著頁面的其余部分滾動，引數fixed（一直在螢屏中間固定） 和scroll（跟隨滾動）
background-color	設定元素的背景顏色，
background-image	把影像設定為背景，
background-position	設定背景影像的起始位置，
background-repeat	設定背景影像是否及如何重復，

2.css文本

文本縮進：

屬性text-indent，取值可正可負可為零也可小數，例子首行縮進 5em

p {text-indent: 5em;}
//其中em是字符，1em=1中文字符=1.5英文字符， 1em = 16px
//注：16 等于父元素的默認字體大小，假設父元素的 font-size 為 20px，那么公式需改為：pixels/20=em

• 注意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用于行內元素，影像之類的替換元素上也無法應用 text-indent 屬性，不過，如果一個塊級元素（比如段落）的首行中有一個影像，它會隨該行的其余文本移動，

• 提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果，

文本域禁止拖拽

resize :none;

字符間隔

letter-spacing

文本書寫方式

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | lr-tb | tb-rl

• horizontal-tb：水平方向自上而下的書寫方式，即 left-right-top-bottom
• vertical-rl：垂直方向自右而左的書寫方式，即 top-bottom-right-left
• vertical-lr：垂直方向內內容從上到下，水平方向從左到右
• sideways-rl：內容垂直方向從上到下排列
• sideways-lr：內容垂直方向從下到上排列
• lr-tb：左-右，上-下，物件中的內容在水平方向上從左向右流入，后一行在前一行的下面， 所有的字形都是豎直向上的，這種布局是羅馬語系使用的（IE）
• tb-rl：上-下，右-左，物件中的內容在垂直方向上從上向下流入，自右向左，后一豎行在前一豎行的左面，全角字符是豎直向上的，半角字符如拉丁字母或片假名順時針旋轉90度，這種布局是東亞語系通常使用的（IE）

文本對齊：

西方語言都是從左向右讀，所有 text-align 的默認值是 left，文本在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文本），對于希伯來語和阿拉伯語之類的的語言，text-align 則默認為 right，因為這些語言從右向左讀，不出所料，center 會使每個文本行在元素中居中，

text-align:使用的注意點

• 提示：將塊級元素或表元素居中，要通過在這些元素上適當地設定左、右外邊距來實作，
• text-align是會使行內元素居中
  • 如果父級元素是塊級元素那么就給父級元素設定text-align：center；
  • 如果父級元素不是塊級元素，那么就讓父級元素變為塊級元素，然后你后再添加text-align：center

討論：text-align:center 與center標簽的區別

您可能會認為 text-align:center 與

元素的作用一樣，但實際上二者大不相同，

<CENTER> 不僅影響文本，還會把整個元素居中，text-align 不會控制元素的對齊，而只影響內部內容，元素本身不會從一段移到另一端，只是其中的文本受影響，

	text-align
元素	不影響	影響
內容	影響	影響

字符大小寫轉換：text-transform 屬性處理文本的大小寫，這個屬性有 4 個值：

• none 不變
• uppercase 大寫
• lowercase 小寫
• capitalize 每個單詞首字母大寫

文本裝飾：text-decoration ：

• none 無裝飾
• underline 下劃線
• overline 上劃線
• line-through 洗掉線
• blink （未知，不知道咋回事）

空白的兩種格式:white-space屬性 默認值normal

• 值	空白符	換行符	自動換行	換行方式
  pre-line	合并	保留	允許	正常
  normal	合并	忽略	允許	<br>
  nowrap	合并	忽略	不允許	<br>
  pre	保留	保留	不允許	正常
  pre-wrap	保留	保留	允許	正常

總結：CSS 文本屬性

屬性	描述	tip
color	設定文本顏色
direction	設定文本方向，
line-height	設定行高，	單行文字上下居中方法，讓行高等于height
letter-spacing	設定字符間距，
text-align	對齊元素中的文本，
text-decoration	向文本添加修飾，
text-indent	縮進元素中文本的首行，
text-shadow	設定文本陰影，CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性，	text- shadow: h- shadow v-shadow blur color; 上下，左右，模糊程度，顏色
text-transform	控制元素中的字母，
unicode-bidi	設定文本方向，
white-space	設定元素中空白的處理方式，
word-spacing	設定字間距，

3.css字體

font的可能的值以及順序

可以按順序設定如下屬性：

• font-style 風格
• font-variant 大小寫
• font-weight 粗細
• font-size/line-height 大小和行高
• font-family 體系

p {font :  bold   10px/50px   "Times New Roman",Georgia,Serif }

字體體系

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>

字體風格：　font-style

屬性值

• normal - 文本正常顯示
• italic - 文本斜體顯示
• oblique - 文本傾斜顯示

討論：italic 和 oblique 的區別

font-style 非常簡單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇，唯一有點復雜的是明確 italic 文本和 oblique 文本之間的差別，

斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀，與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本，

總結：通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣，

字體大小

font-size 值可以是絕對或相對值，

絕對值：

• 將文本設定為指定的大小
• 不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）
• 絕對大小在確定了輸出的物理尺寸時很有用

相對大小：

• 相對于周圍的元素來設定大小
• 允許用戶在瀏覽器改變文本大小

注意：如果您沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)，

注：16 等于父元素的默認字體大小，假設父元素的 font-size 為 20px，那么公式需改為：pixels/20=em）

總結：CSS 字體屬性

屬性	描述	用法
font	簡寫屬性，作用是把所有針對字體的屬性設定在一個宣告中，
font-family	設定字體系列，
font-size	設定字體的尺寸，
font-size-adjust	當首選字體不可用時，對替換字體進行智能縮放，（CSS2.1 已洗掉該屬性，）
font-stretch	對字體進行水平拉伸，（CSS2.1 已洗掉該屬性，）
font-style	設定字體風格，
font-variant	以小型大寫字體或者正常字體顯示文本，
font-weight	設定字體的粗細，

4.css鏈接

a標簽：

• 跳轉鏈接
• <a></a>：超鏈接標簽，用于定義一個超鏈接，
  • href屬性：指定點擊當前超鏈接后，頁面所跳轉到的地址，
  • target屬性：指定打開新頁面的方式
    • _slef：在當前瀏覽器正在瀏覽的頁面中打開新的頁面，
    • _blank：另起一個新的頁面，打開想要訪問的內容，
• 錨鏈接
  • href屬性：屬性值以#開頭，后面加上要跳轉到的位置的內容控制元件id屬性值即可，這種寫法叫做“錨點”，
    例如：
    • 點擊跳轉到當前頁面中的某個位置<a href="#b">點擊跳轉到</a>，這個#b即是錨點，
    • 點擊跳轉到另一個頁面的指定位置<a href="d.html#b">點擊跳轉到</a>，d.html是要跳轉到的頁面，#b是存在于b.html頁面的一個指定的錨點位置，
• 功能性鏈接
  • 如下例舉一些功能性鏈接：
    • 觸發發送電子郵件：<a href="mailto:chrischenjl@163.com">給我發郵件</a>
    • 觸發撥打電話：<a href="tel:18888888888">給我打電話</a>
    • 觸發發送短信：<a href="sms:18888888888">給我發短信</a>
    • 觸發內容播放：<a href="a.mp4">播放視頻</a>

這種超鏈接使用場景并不多，一般用于點擊后觸發某些功能，用途是鏈接到第三方資源；如下例舉一些功能性鏈接，

四種狀態：

鏈接的四種狀態：

• a:link - 普通的、未被訪問的鏈接
• a:visited - 用戶已訪問的鏈接
• a:hover - 滑鼠指標位于鏈接的上方
• a:active - 鏈接被點擊的時刻

注意：

當為鏈接的不同狀態設定樣式時，請按照以下次序規則：

• a:hover 必須位于 a:link 和 a:visited 之后
• a:active 必須位于 a:hover 之后

提示：鏈接一般會去掉下劃線

5.css串列

串列型別

在一個無序串列中，串列項的標志 (marker) 是出現在各串列項旁邊的圓點，在有序串列中，標志可能是字母、數字或另外某種計數體系中的一個符號，

總結： CSS 串列屬性(list)

屬性	描述	用法	可能引數
list-style	簡寫屬性，用于把所有用于串列的屬性設定于一個宣告中，	li {list-style : url(example.gif) square inside}	在前面屬
list-style-image	將圖象設定為串列項標志，	ul li {list-style-image : url(xxx.gif)}	性里面的
list-style-position	設定串列中串列項標志的位置，	ul { list-style-position:inside; }	超鏈接
list-style-type	設定串列項標志的型別，	ul {list-style-type : square}
marker-offset

6.css表格

表格默認為雙線框，如果想要改變為單線框則需要使用

table是表格，最外面包括著的標簽，

tr是行，有幾個就是幾行，包括著td標簽

td是列，有幾個就是幾列

th是加粗行的列的開頭，同td的位置一樣，都是被td包

border是table屬性，代表邊框，數字為0，就沒有邊框，數字越大，邊框越寬

cellspacing是單元格之間的間距

cellpadding是單元格和外邊框的距離

bgcolor是背景顏色

align是位置

總結：CSS Table 屬性

屬性	描述	用法
border-collapse	設定是否把表格邊框合并為單一的邊框，	table { border-collapse:collapse; }
border-spacing	設定分隔單元格邊框的距離，	table { width:100%; } th { height:50px; }
caption-side	設定表格標題的位置，
empty-cells	設定是否顯示表格中的空單元格，
table-layout	設定顯示單元、行和列的演算法，
text-align	表格中文本對齊方式	td { text-align:right; }

7css輪廓

總結：CSS 邊框屬性

屬性	描述
outline	在一個宣告中設定所有的輪廓屬性，
outline-color	設定輪廓的顏色，
outline-style	設定輪廓的樣式，
outline-width	設定輪廓的寬度，

三、css框模型

1. 邊框概述

在 CSS 中，width 和 height 指的是內容區域的寬度和高度，增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸，

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距，如果希望這個元素框達到 100 個像素，就需要將內容的寬度設定為 70 像素，請看下圖：

術語翻譯

• element : 元素，
• padding : 內邊距，也有資料將其翻譯為填充，不能為負
• border : 邊框，
• margin : 外邊距，也有資料將其翻譯為空白或空白邊，取值可為負數

在 w3school，我們把 padding 和 margin 統一地稱為內邊距和外邊距，邊框內的空白是內邊距，邊框外的空白是外邊距，很容易記吧：）

設定方法：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

2.內邊框

CSS padding 屬性：CSS padding 屬性定義元素的內邊距，padding 屬性接受長度值或百分比值，但不允許使用負值，

內邊距的百分比數值：可以為元素的內邊距設定百分數值，百分數值是相對于其父元素的 width 計算的，這一點與外邊距一樣，所以，如果父元素的 width 改變，它們也會改變，

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

總結： CSS 內邊距屬性

屬性	描述	用法
padding	簡寫屬性，作用是在一個宣告中設定元素的所內邊距屬性，順序：上右下左	h1 {padding: 10px 0.25em 2ex 20%;}
padding-bottom	設定元素的下內邊距，	h1 { padding-bottom: 2ex; }
padding-left	設定元素的左內邊距，	h1 { padding-left: 20%; }
padding-right	設定元素的右內邊距，	h1 { padding-right: 0.25em; }
padding-top	設定元素的上內邊距，	h1 { padding-top: 10px; }

3.邊框

定義多種樣式

您可以為一個邊框定義多個樣式，例如：

p.aside {border-style: solid dotted dashed double;}
//                      top   right  bottom left
//               實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框

上面這條規則為類名為 aside 的段落定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框，

我們又看到了這里的值采用了 top-right-bottom-left 的順序，用多個值設定不同內邊距時也見過這個順序，

沒有邊框

在前面的例子中，您已經看到，如果希望顯示某種邊框，就必須設定邊框樣式，比如 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，因此，如果您希望邊框出現，就必須宣告一個邊框樣式，

邊框的顏色

邊框的顏色最多可以附上四個值，如果小于四個值則會進行復制，復制其對邊的顏色，

順序：上右下左

總結：CSS 邊框屬性

屬性	描述	用法
border	簡寫屬性，用于把針對四個邊的屬性設定在一個宣告，	p { border:5px solid red; } 順序： border-width border-style border-color
border-style	用于設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式，	p { border-style:solid; }
border-width	簡寫屬性，用于為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度，	p { border-style:solid; border-width:15px; }
border-color	簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色，	p { border-style:solid; border-color:#ff0000 #0000ff; }
border-bottom	簡寫屬性，用于把下邊框的所有屬性設定到一個宣告中，
border-bottom-color	設定元素的下邊框的顏色，
border-bottom-style	設定元素的下邊框的樣式，
border-bottom-width	設定元素的下邊框的寬度，
border-left	簡寫屬性，用于把左邊框的所有屬性設定到一個宣告中，
border-left-color	設定元素的左邊框的顏色，
border-left-style	設定元素的左邊框的樣式，
border-left-width	設定元素的左邊框的寬度，
border-right	簡寫屬性，用于把右邊框的所有屬性設定到一個宣告中，
border-right-color	設定元素的右邊框的顏色，
border-right-style	設定元素的右邊框的樣式，
border-right-width	設定元素的右邊框的寬度，
border-top	簡寫屬性，用于把上邊框的所有屬性設定到一個宣告中，
border-top-color	設定元素的上邊框的顏色，
border-top-style	設定元素的上邊框的樣式，
border-top-width	設定元素的上邊框的寬度，

4.外邊框

CSS margin 屬性

body的外邊距默認為8

很多元素是有默認外邊距的，

設定外邊距的最簡單的方法就是使用 margin 屬性，

margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em，

margin 可以設定為 auto，auto可以理解為居中的意思，更常見的做法是為外邊距設定長度值，這個屬性接受任何長度單位、百分數值甚至負值，

margin折疊常規認知：

• margin折疊只發生在塊級元素上；
• 浮動元素的margin不與任何margin發生折疊；
• 設定了屬性overflow且值不為visible的塊級元素，將不與它的子元素發生margin折疊；
• 絕對定位元素的margin不與任何margin發生折疊；
• 根元素的margin不與其它任何margin發生折疊；

討論：margin：auto為什么只能實作水平居中，不能垂直居中？

當一個常規流中塊級元素的margin屬性左右值設為關鍵字auto，且它擁有固定寬度時，它便會平分剩余的水平空間，居中顯示，然而如果設定上下值為auto，瀏覽器得到的計算值為0，并不起任何的效果，那么問題來了，為什么垂直方向的auto不生效？

與上一問類似，這與布局相關，網頁排版時，常規流的塊級元素水平方向總是鋪滿瀏覽器視窗，垂直方向各塊級元素按照先后順序從上往下排列，當頁面內容過多時網頁會出現縱向滾動條，因此原理上縱向是可以無限擴展的，計算時找不到一個固定的參考值，所以縱向的auto無法生效，

討論：css有關值復制的問題

這兩個值可以取代前面 4 個值，這是如何做到的呢？CSS 定義了一些規則，允許為外邊距指定少于 4 個值，規則如下：

• 如果缺少左外邊距的值，則使用右外邊距的值，
• 如果缺少下外邊距的值，則使用上外邊距的值，
• 如果缺少右外邊距的值，則使用上外邊距的值，

下圖提供了更直觀的方法來了解這一點：

換句話說，如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）復制得到，如果給定了兩個值，第 4 個值會從第 2 個值復制得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）復制得到，最后一個情況，如果只給定一個值，那么其他 3 個外邊距都由這個值（上外邊距）復制得到，

總結：CSS 外邊距屬性

屬性	描述
margin	簡寫屬性，在一個宣告中設定所有外邊距屬性，
margin-bottom	設定元素的下外邊距，
margin-left	設定元素的左外邊距，
margin-right	設定元素的右外邊距，
margin-top	設定元素的上外邊距，

5.css定位

css定位機制： 普通流（默認）、浮動和絕對定位，

1、position 屬性（定位方式）

position 屬性：使用定位方式屬性可以控制瀏覽器如何定位html元素

屬性值	說明
static	默認值，如果我們的position的屬性值設定為static，那么我們可以認為這個元素根本沒有定位，
absolute	使用絕對定位，需要同時使用left、right、top、bottom等屬性進行定位，（常用）
fixed	固定定位，當前瀏覽器視窗滾動的時候元素不跟著滾動
relative	采用相對定位，物件不可重疊，（常用）
sticky	粘性定位的元素是基于用戶的滾動位置，在 position: relative 與 position: fixed 定位之間切換，

絕對定位

絕對定位盒子居中

left:50%;                 （讓他在水平方向上居中）
margin-left: -xxxpx;  xxx(需要居中的盒子的寬度的一半)
<<<<<<--------------進階------------------>>>>>>>>>>>
position：absolute；
left:50%;                    
top:50%;
transform:translate(-50%,-50%);
/* 講解： 先水平平移和豎直外邊盒子的50%
然后再反方向平移自身盒子的百分之五十
translate平移的大小是相對與自身盒子而言的*/

絕對定位的特性

絕對定位之后，行內元素可以直接設定寬度和高度，塊級元素如果不設定寬度和高度，那么他的寬度和高度默認是內容的大小

討論:子絕父相的理解

相對定位（relative）：相對定位是相對于自身位置進行偏移，當設了相對的偏移量之后，這個DIV原來所占據的位置（檔案流）不 會被下面的DIV塊擠占，而是空在那里；當偏移后向下或者向右的內容會被隱藏，而 這一點區別于絕對定 位，絕對定位會出現滾動條，

絕對定位（absolute）：絕對定位是相對于父容器中含有定位屬性的元素進行定位（直接父容器沒有他會一層一層往上找，沒有的話就相對body），一個DIV塊的位置被定義為絕對定位的時候，也就意味著它失去了檔案流的位置，后面的檔案流會緊跟著補上來接替它的位置，

固定定位（fixed）：固定定位是相對于瀏覽器的位置進行偏移，當設了相對的偏移量之后，這個DIV原來所占據的位置（檔案流）不 會被下面的DIV塊擠占，

子絕父相：子元素絕對定位，父元素相對定位，讓子元素 以其父元素為標準來定位，（如果不這么做，子元素就會相對body或瀏覽器定位產生不好的效果，）

注意：這里主要是因為絕對定位的參照物是父容器中含有定位屬性的fong父容器，

浮動

浮動**：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止，**

由于浮動框不在檔案的普通流中，所以檔案的普通流中的塊框表現得就像浮動框不存在一樣，

創建浮動框可以使文本圍繞影像：

要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性，clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框，

為了實作這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：

浮動的使用

1，浮動的元素，常與標準檔案流的父級盒子聯合使用，

浮動的問題

• 浮動之后，元素會按照行內元素的方法排列、

• 一個元素浮動之后，他不會影響他前面的元素，但是他會影響他后邊的標準流元素

  • 建議： 一個盒子當中如果有一個浮動，那么其余兄弟元素也要浮動
  • 關于浮動的幾種常見問題

清除浮動（clear）

就可以理解為禁止在某個區域浮動

一般原因：父元素不適合設定高度，子元素有需要浮動

例如：

• 我在設定浮動之前，圖片效果為如下：

設定浮動之后，效果如下：

img { float:left; }

當我清除左側浮動之后，效果如下：

img { float:left; clear:left; }

討論：清除浮動有N種方式，他們間有什么共同點嗎？

所謂清除浮動，一般是為了解決子元素浮動導致父容器高度坍塌，目前有多種方式來解決這個問題，最常見的有after偽元素，父元素設定“overflow:hidden”，等等，請看DEMO：七種清除浮動的方法，

還有：增加父級元素的高度也可以解決浮動塌陷問題（不建議使用）

其實按照原理，這幾種方法可以歸納為兩種：clear:both法和構造BFC法，

方法	分類
浮動末尾添加新標簽，設定樣式為clear:both （又名：隔墻法）	clear:both
浮動末尾添加<br />標簽	clear:both
使用::after偽元素 {額外標簽法升級版}	clear:both
父元素設定display:table	構造BFC
父元素設定overflow:auto	構造BFC
父元素設定overflow:hidden	構造BFC
讓父元素也浮動	構造BFC

BFC

什么是BFC

Block formatting contexts(BFC)，塊級格式化背景關系是在CSS2.1中提出的一個概念，在布局中，BFC自成體系，對自己內部的元素負責，不會與浮動元素重疊，相鄰BFC上下margin也不會重疊，所以我們會通過構造一個BFC來防止margin重疊，清除浮動或者實作一個雙欄布局，

如何構造一個BFC呢？

• 1.float設定為非none值；
• 2.overflow設定為非visible；
• 3.display設定為table-cell，table-caption，inline-block；
• 4.position設定為absolute或fixed，

這些方法剛好與上面提到構造BFC來清除浮動的方法相呼應，

需要特別注意的是，在IE6，7下沒有BFC這個概念，但是有一個與BFC性質相似的概念：layout，在IE6，7中遇到的很多bug都可以通過讓元素has layout來解決，比如浮動margin雙邊距，躲貓貓，3像素間距等等，

有些元素例如table，input本身就has layout，那么如何讓一個普通元素擁有 layout呢？包括但不限于以下幾種方法：

那么如何讓一個普通元素擁有 layout

1. position:absolute；
2. float不為none；
3. display:inline-block；
4. height：除auto外任意值；
5. width：除auto外任意值；
6. zoom：除normal外任意值；
7. overflow非visible(僅限IE7)，

這也是為什么我們會在IEhack中經常看到“height:1%”、“zoom:1”、“display:inline-block”、“overflow:hidden”這些字眼的主要原因，其實就是為了讓元素has layout嘛！

所以在IE6-7下，清除浮動除了可以使用clear:both外（::after偽元素無法使用），另一種方法就是讓父元素has layout，

關于清除浮動更多的探討可以在一絲冰涼的博客中看到：那些年我們一起清除過的浮動，

.clear:after 的使用方法

.clear:after{    content:'';
 display:block;
 clear:both;
　}

只要給需要解決塌陷問題的父級添加一個.clear即可

補充BFC

BFC的布局規則

• 內部的Box會在垂直方向，一個接一個地放置，
• Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊，
• 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)，即使存在浮動也是如此，
• BFC的區域不會與float box重疊，
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也如此，
• 計算BFC的高度時，浮動元素也參與計算，

zoom：1；用法和說明

在老版本IE中使用 zoom : 1;清除浮動；

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框，

（重點）當設定了zoom的值之后，所設定的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題，

Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性，然而，zoom現在已經被逐步標準化，出現在 CSS 3.0 規范草案中，也就是CSS3中的transform: scale這個屬性來實作

用法：ie下子元素浮動時候父元素不隨著自動擴大的問題，使用下面的CSS寫法

.父元素 { overflow: auto; zoom: 1 },關于更多清楚浮動的用法.
可以戳這里，這是原創作者的博客，里面的第十問解釋的很詳細，

6.css選擇器

元素選擇器（又稱類選擇器）

使用方法：

p{color:red;}

說明：類選擇器允許以一種獨立于檔案元素的方式來指定樣式，

該選擇器可以單獨使用，也可以與其他元素結合使用，

選擇器分組

body, h2, p, table, th, td, pre, strong, em {color:gray;}

類選擇器

id選擇器

i的選擇器：區分大小寫

類選擇器還是 ID 選擇器？

在類選擇器這一章中我們曾講解過，可以為任意多個元素指定類，前一章中類名 important 被應用到 p 和 h1 元素，而且它還可以應用到更多元素，

區別 1：只能在檔案中使用一次

與類不同，在一個 HTML 檔案中，ID 選擇器會使用一次，而且僅一次，

區別 2：不能使用 ID 詞串列

不同于類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞串列，

區別 3：ID 能包含更多含義

類似于類，可以獨立于元素來選擇 ID，有些情況下，您知道檔案中會出現某個特定 ID 值，但是并不知道它會出現在哪個元素上，所以您想宣告獨立的 ID 選擇器，例如，您可能知道在一個給定的檔案中會有一個 ID 值為 mostImportant 的元素，您不知道這個最重要的東西是一個段落、一個短語、一個串列項還是一個小節標題，您只知道每個檔案都會有這么一個最重要的內容，它可能在任何元素中，而且只能出現一個，在這種情況下，可以撰寫如下規則：

#mostImportant {color:red; background:yellow;}

這個規則會與以下各個元素匹配（這些元素不能在同一個檔案中同時出現，因為它們都有相同的 ID 值）：

<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

屬性選擇器

子串匹配屬性選擇器

型別	描述
[abc^=“def”]	選擇 abc 屬性值以 “def” 開頭的所有元素
[abc$=“def”]	選擇 abc 屬性值以 “def” 結尾的所有元素
[abc*=“def”]	選擇 abc 屬性值中包含子串 “def” 的所有元素

特定屬性選擇型別

最后為您介紹特定屬性選擇器，請看下面的例子：

*[lang|="en"] {color: red;}

上面這個規則會選擇 lang 屬性等于 en 或以 en- 開頭的所有元素，因此，以下示例標記中的前三個元素將被選中，而不會選擇后兩個元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

總結：CSS 屬性選擇器參考手冊

選擇器	描述
[attribute]	用于選取帶有指定屬性的元素，
[attribute=value]	用于選取帶有指定屬性和值的元素，
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素，
[attribute|=value]	用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞，
[attribute^=value]	匹配屬性值以指定值開頭的每個元素，
[attribute$=value]	匹配屬性值以指定值結尾的每個元素，
[attribute*=value]	匹配屬性值中包含指定值的每個元素，

后代選擇器

p em{}

所有的后代都可以使用

子代選擇器

p>em{}

只有子代可以使用

相鄰兄弟選擇器

p+em{}

向下相鄰兄弟選擇器

通用兄弟選擇器

.abc~p{}

當前選中元素的向下所有兄弟

總結： 后代 子代 兄弟 通用兄弟 都屬于層次選擇器

討論：什么是子代什么是后代選擇器？

二、后代選擇器

-寫一段 style 樣式，設定ul的em元素為紅色

<style type="text/css">
ul em{
  color:red;
}
</style>
<body>
<ul>
<li><em>被選擇了</em>
  <ol>
      <li><em>被選擇了</em>
          <ol>
              <li>
                  <em>被選擇了</em>
              </li>
          </ol>
      </li>
  </ol>
</li>
</ul>
</body>

-ul和ol的區別在其符號的不同，可通過type屬性更改符號

-ul元素與后代元素em之間的層次間隔可以無限

-****任意后代em元素****都被設為紅色

三、子選擇器【>】

-style樣式設定子元素的顏色為****綠色****，字體大小為20像素

<style type="text/css">
h1>em{
  color: green;
  font-size:20px;
}
</style>
<body>
<h1>
<em>我是第一個em</em>
<p><em>我是第二個em</em></p>
<h2><em>我是第三個em</em></h2>
</h1>
</body>

-觀察效果圖，第一個子元素em被選中，第二第三個em元素都沒有選中

-父元素與子元素之間有層次間隔會破壞子選擇器的作用效果

四、相鄰選擇器【+】

-相鄰選擇器語法規則：相鄰兄弟選擇器使用了加號（+）

<style type="text/css">
li+li{
  font-weight:bold;
}
</style>
<body>
<div>
<ul>
  <li>List item1</li>
  <li>List item2</li>
  <li>List item3</li>
</ul>
<ol>
  <li>List item1</li>
  <li>List item2</li>
  <li>List item3</li>
</ol>
</div>

-效果圖如下：item1的兄弟是item2，item2的兄弟是iem3，item2與item3都被選中

-再看看w3School上的demo，以下內容出自W3School

This is a heading.

This is paragraph.

This is paragraph.

This is paragraph.

This is paragraph.

This is paragraph.

-效果圖：h1的兄弟是第一個

被選中，字體變為紅色

-結合其他選擇器
相鄰兄弟結合符還可以結合其他結合符：
html > body table + ul {margin-top:20px;}
這個選擇器解釋為：選擇緊接在 table 元素后出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素，

偽類

語法

偽類的語法：

selector : pseudo-class {property: value}

CSS 類也可與偽類搭配使用，

selector.class : pseudo-class {property: value}

錨偽類

在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠懸停狀態，

a:link {color: #FF0000}		/* 未訪問的鏈接 */
a:visited {color: #00FF00}	/* 已訪問的鏈接 */
a:hover {color: #FF00FF}	/* 滑鼠移動到鏈接上 */
a:active {color: #0000FF}	/* 選定的鏈接 */

CSS2 - :first-child 偽類

您可以使用 :first-child 偽類來選擇元素的第一個子元素，這個特定偽類很容易遭到誤解，所以有必要舉例來說明，考慮以下標記：

<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

在上面的例子中，作為第一個元素的元素包括第一個 p、第一個 li 和 strong 和 em 元素，

給定以下規則：

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

第一個規則將作為某元素第一個子元素的所有 p 元素設定為粗體，第二個規則將作為某個元素（在 HTML 中，這肯定是 ol 或 ul 元素）第一個子元素的所有 li 元素變成大寫，

請訪問該鏈接，來查看這個 :first-child 實體的效果，

提示：最常見的錯誤是認為 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素，

注釋：必須宣告 <!DOCTYPE>，這樣 :first-child 才能在 IE 中生效，

selector:nth-child(n) {} （注：向下查找的時候不會去區分元素的型別，）

會從父類的第一個元素開始向下查找，然后查找到第n個元素，然后去識別第n個元素是否跟選擇器的元素型別相同，如果相同則生效，如果不相同，則選擇器將不生效，

selector :nth-of-type(n) {} (注：向下查找的時候會去區分元素的型別)

會從父類的第一個該選擇器的元素開始向下查找該類元素，然后修改第n個該類元素，

<html>
    <head>
        <style type="text/css">
           p:nth-child(2){
 			   background-color:yellow;
				}
        </style>
    </head>
<body>
<p>p1</p>
    <!-- 其中p2的背景顏色變為黃色，因為p的父級元素為body，body的第二個元素是p，并且第二個元素跟當前選擇器的元素是同一元素，所以標簽生效，假如body的第二個元素是h1則選擇器就不會生效-->
    <p>
        p2
    </p>
    <p>
        p3
    </p>
</body>
</html>

總結： 偽類

W3C：“W3C” 列指示出該屬性在哪個 CSS 版本中定義（CSS1 還是 CSS2），

屬性	描述	CSS
:active	向被激活的元素添加樣式，	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式，	2
:hover	當滑鼠懸浮在元素上方時，向元素添加樣式，	1
:link	向未被訪問的鏈接添加樣式，	1
:visited	向已被訪問的鏈接添加樣式，	1
:first-child	向元素的第一個子元素添加樣式，	2
:last-child	向元素的最后一個元素添加樣式，
:lang	向帶有指定 lang 屬性的元素添加樣式，
:nth-child(n)	選擇當前元素的父級元素，選中父類元素的第n個元素，并且第n個元素是當前元素才生效，
:nth-of-type	跟上面的效果差不多，只不過是向下查找的時候會去區分型別

偽元素

W3C：“W3C” 列指示出該屬性在哪個 CSS 版本中定義（CSS1 還是 CSS2），

屬性	描述	CSS
:first-letter	向文本的第一個字母添加特殊樣式，	1
:first-line	向文本的首行添加特殊樣式，	1
:before	在元素之前添加內容，	2
:after	在元素之后添加內容，	2

討論：偽類，偽元素

引題：CSS -::before 和:before有什么區別？

• 相同點

1. 1. 都可以用來表示偽類物件，用來設定物件前的內容
   2. :befor和::before寫法是等效的

• 不同點

1. 1. :befor是Css2的寫法，::before是Css3的寫法
   2. :before的兼容性要比::before好 ，不過在H5開發中建議使用::before比較好

   解釋：

   偽類和偽元素都是CSS1和CSS2中的概念，CSS1和CSS2中對偽類的偽元素的區別比較模糊，CSS3才對這兩個概念做了相對較清晰的概念，下面看看css2和css3中對這兩個概念的定義：

   偽類 - pseudo classes

   css2定義： CSS 偽類用于向某些選擇器添加特殊的效果，

   css3定義：偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的資訊以及不能被常規CSS選擇器獲取到的資訊，

   偽類由一個冒號:開頭，冒號后面是偽類的名稱和包含在圓括號中的可選引數，

   任何常規選擇器可以再任何位置使用偽類，偽類語法不區別大小寫，一些偽類的作用會互斥，另外一些偽類可以同時被同一個元素使用，并且，為了滿足用戶在操作DOM時產生的DOM結構改變，偽類也可以是動態的，

   偽元素 - Pseudo-elements

   CSS2中對偽元素的定義：

   CSS 偽元素用于向某些選擇器設定特殊效果，

   CSS3中偽元素的定義：

   偽元素在DOM樹中創建了一些抽象元素，這些抽象元素是不存在于檔案語言里的（可以理解為html原始碼），比如：documen介面不提供訪問元素內容的第一個字或者第一行的機制，而偽元素可以使開發者可以提取到這些資訊，并且，一些偽元素可以使開發者獲取到不存在于源檔案中的內容（比如常見的::before,::after），

   偽元素的由兩個冒號::開頭，然后是偽元素的名稱，

   使用兩個冒號::是為了區別偽類和偽元素（CSS2中并沒有區別），當然，考慮到兼容性，CSS2中已存的偽元素仍然可以使用一個冒號:的語法，但是CSS3中新增的偽元素必須使用兩個冒號::，

   一個選擇器只能使用一個偽元素，并且偽元素必須處于選擇器陳述句的最后，

   注：不排除未來會加入同時使用多個偽元素的機制，

7.css高級

CSS 尺寸屬性

CSS 尺寸屬性允許你控制元素的高度和寬度，同樣，還允許你增加行間距，

屬性	描述
height	設定元素的高度，
line-height	設定行高，
max-height	設定元素的最大高度，
max-width	設定元素的最大寬度，
min-height	設定元素的最小高度，
min-width	設定元素的最小寬度，
width	設定元素的寬度，

單行文字可以使用行高（line-height）等于height來實作上下居中

css分類

如何將元素顯示為行內元素？

p{display: inline;}

如何讓某個元素不顯示？

div{display: none;}

如何讓某個元素以塊級元素顯示？

span{display: block}

如何讓選單欄橫向顯示？

寫成一個串列用<li>標簽，然后讓<li>標簽從塊級元素變為行內元素，

如何改變游標？

改變游標

<html>

<body>
<p>請把滑鼠移動到單詞上，可以看到滑鼠指標發生變化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>

四、css3應用

新的邊框屬性

input新增屬性

required：內容不能為空

placeholder ：提示字體

圓形圖片

可以通過border-radius來實作

屬性	描述	CSS	用法
border-image	設定所有 border-image-* 屬性的簡寫屬性，	3	border-image:url(/i/border.png) 30 30 round;例子為下面的圖片
border-radius	設定所有四個 border-*-radius 屬性的簡寫屬性，	3	border-radius:25px; 25可以理解為半徑
box-shadow	向方框添加一個或多個陰影，	3	box-shadow: 2px 20px 5px #888888; 三個引數分別為 陰影向右寬度，陰影向下寬度 陰影顏色

例如 ： 該圖片的一個小菱形的上下邊界為第一個引數，左右邊界為第二個引數，第三個引數 為型別下圖第一個為round 第二個為stretch

新的背景屬性

屬性	描述	CSS	用法
background-clip	規定背景的繪制區域，	3
background-origin	規定背景圖片的定位區域，	3	background-origin:content-box;
background-size	規定背景圖片的尺寸，	3	background-size:63px 100px; 或者background-size:40% 100%;

CSS3 background-origin 屬性

background-origin 屬性規定背景圖片的定位區域，

背景圖片可以放置于 content-box、padding-box 或 border-box 區域，

新的轉換屬性

下面的表格列出了所有的轉換屬性：

屬性	描述	CSS
transform	向元素應用 2D 或 3D 轉換，	3
transform-origin	允許你改變被轉換元素的位置，	3

2D Transform 方法

函式	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣，
translate(x,y)	定義 2D 轉換，沿著 X 和 Y 軸移動元素，
translateX(n)	定義 2D 轉換，沿著 X 軸移動元素，
translateY(n)	定義 2D 轉換，沿著 Y 軸移動元素，
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度，
scaleX(n)	定義 2D 縮放轉換，改變元素的寬度，
scaleY(n)	定義 2D 縮放轉換，改變元素的高度，
rotate(angle)	定義 2D 旋轉，在引數中規定角度，
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿著 X 和 Y 軸，
skewX(angle)	定義 2D 傾斜轉換，沿著 X 軸，
skewY(angle)	定義 2D 傾斜轉換，沿著 Y 軸，

綜合寫法：transform ：寫在一起的話，如果有位移先寫位移，然后再寫旋轉等等

居中方法

transform：translate(50%);

過渡transition

在過渡的時候如果transition屬性寫在原本的元素里面，Hover的時候有影片效果，在滑鼠移出之后hover消失，通史消失的二級選單也有影片，

如果把transition屬性放在hover之后的二級選單的css當中，hover的時候有影片，在移除滑鼠之后，就沒有影片

漸變

一個用來調漸變顏色的網站https://www.grabient.com/

透視

在2D平面產生近大遠小視覺立體,但是只是效果二維的

• 如果想要在網頁產生 3D效果需要透視(理解成3D物體投影在2D平面內).
• 模擬人類的視覺位置 ,可認為安排- -只眼睛去看
• 透視我們也稱為視距:視距就是人的眼睛到螢屏的距離
• 距離視覺點越近的在電腦平面成像越大 ,越遠成像越小
• 透視的單位是像素
• 下面的d就是設定的透視的值
• d越小影像顯示的就越大，d越大現實的就越小

透視的要求

• 透視與在被觀條元系的父盒子上面的

• d :就是視距,視距就是一個距離人的眼睛到螢屏的距離，

• z :就是z軸,物體距離螢屏的距離, z軸越大(正值)我們看到的物體就越大，
  

  3D效果

  如果想要保持3D效果必須給父元素加上tranform-style: preserve-3D;

  目的就是使子級元素保持3D效果

五、實操技巧

1.CSS實作背景圖片螢屏自適應 <----摘抄的文章鏈接

1 .bgimg{
2     position:fixed;
3     top: 0;
4     left: 0;
5     width:100%;
6     height:100%;
7     min-width: 1000px;
8     z-index:-10;
9     zoom: 1;
10     background-color: #fff;
11     background: url(../img/bg_login.jpg) no-repeat;
12     background-size: cover;
13     -webkit-background-size: cover;
14     -o-background-size: cover;
15     background-position: center 0;
16 }

分析一下css代碼中的作用：

position:fixed;
top: 0;	
left: 0;

這三句是讓整個div固定在螢屏的最上方和最左方

width:100%;
height:100%;
min-width: 1000px;

上面前兩句是讓整個div跟螢屏大小一樣，從而達到全屏效果，而min-width是為了實作讓螢屏寬度在1000px以內時，div的大小保持不變，也就是圖片不縮放，

z-index:-10;　　

這個的目的是讓整個div在HTML頁面中各個層級的下方，正常情況下，默認創建的層級z-index的值是0，所以如果我們這里寫成-1也可以實作，不過這里寫-10是確保整個div在最下面，因為如果頁面中層級太多了，有的時候用-1不一定在最下面，但如果寫成-100這樣大數字的也沒有什么意義，用-10 以此能達到看上去像背景圖片，其實是一個最普通的div，只是層級關系變了，才讓人看上去看是背景圖片，

zoom: 1;

zoom是CSS hack中專對IE6起作用的部分，IE6瀏覽器會執行zoom:1表示物件的縮放比例，兼容IE6、IE7、IE8瀏覽器，經常會遇到一些問題，可以使用zoom:1來解決，zoom有如下作用：1.觸發IE瀏覽器的haslayout； 2.解決ie下的浮動，margin重疊等一些問題，

background-repeat: no-repeat;

圖片平鋪，不重復

background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

上面三句是一個意思，就是讓圖片隨螢屏大小同步縮放，但是有部分可能會被裁切，不過不至于會露白，下面兩句是為chrome和opera瀏覽器作兼容，

background-position: center 0;

上面這句的意思就是圖片的位置，居中，靠左對齊

2. css雪碧圖

什么是雪碧圖？

雪碧圖是根據CSS sprite音譯過來的，就是將很多很多的小圖示放在一張圖片上，就稱之為雪碧圖，

使用雪碧圖的目的：有時為了美觀，我們會使用一張圖片來代替一些小圖示，但是一個網頁可能有很多很多的小圖示，瀏覽器在顯示頁面的時候，就需要像服務器發送很多次訪問請求，這樣一來，一是造成資源浪費，二是會導致訪問速度變慢，這時候，把很多小圖片（需要使用的小圖示）放在一張圖片上，按照一定的距離隔開，就解決了上述的兩個問題，

顯示雪碧圖的條件：

1）需要一個設定好寬和高的容器

2）需要設定background-position的值（默認為（0，0），也就是圖片的左上角），即移動圖片到自己想要的圖示位置，

除錯方法:可以用瀏覽器自帶的除錯工具進行除錯（如chrome瀏覽器按f12即可進行除錯，慢慢移動background-position的值來達到理想的效果）

案例如下圖所示：

我們把表情放在一張圖片上，圖片的背景色為透明！

照片中有標記部分表情的位置為（0，0）；也就是說我們想要顯示圖中標記的表情只需將background-position設定為（0，0）即可！

下面問題來了，如果我們想顯示其他表情，應該怎樣調整圖片的background-position呢？

注意點：我們在一個頁面上設定了盒子的寬高，想要將一個表情顯示在盒子內，**我們是不能移動盒子的位置的，我們只能改變圖片的位置，**比如我想顯示下面表情

操作步驟：將圖片向左移X個單位，然后向上移Y個單位，其中XY的具體數值是需要個人除錯至合適位置得出的！

代碼為：background-position：-xpx -ypx;

3. HTML嵌套規則

我們都知道，html中有大量的標簽，div、ul、li、dl、dt、dd、h1~h6、p、a、span、 strong……，我們在運用這些標簽進行頁面搭建的時候，是可以嵌套起來來使用的（可能面試程序中，有的面試官也會問到相關的標簽嵌套規則的問題），但是，嵌套也需要有一定規則，不能任由自己的個人習慣胡亂嵌套，那么，html標簽的嵌套規則有哪些呢？我們今天就來簡單地給大家說一說，

首先，HTML 標簽包括兩種 塊級元素(block)、內嵌元素（inline）【注意：具體的來說應該是三種，另外一種是行內塊元素，常用的就是img和input,這里放在內嵌元素里了】

1、塊級元素

一般用來搭建網站架構、布局、承載內容……它包括以下這些標簽：

常用的有：　div、p、ul、ol、li、dl、dt、dd、fieldset、form、h1~h6、hr、table

另外還有：address、isindex、menu、noframes、noscript、pre、blockquote、center、dir、

2、內嵌元素

一般用在網站內容之中的某些細節或部位，用以“強調、區分樣式、上標、下標、錨點”等等，下面這些標簽都屬于內嵌元素：

常用的有：　span、a、b、strong、i、em、label、textarea、small、img、input（img和input,這里放在內嵌元素里了）

另外還有：abbr、acronym、bdo、big、br、cite、code、dfn、font、kbd、q、s、samp、select、strike、sub、sup、tt、u、var

二、HTML 標簽的嵌套規則

1. 塊元素可以包含行內元素或某些塊元素，但行內元素卻不能包含塊元素，它只能包含其它的行內元素：

例如：

　　 <div><h1></h1><p></p></div> —— 對
　　 <a href=”#”><span></span></a> —— 對
　　 <span><div></div></span> —— 錯

2. 塊級元素不能放在

里面：

例如：

　　 <p><ol><li></li></ol></p> —— 錯
　　 <p><div></div></p> —— 錯

3. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是：

h1、h2、h3、h4、h5、h6、p、dt

4. li 內可以包含 div 標簽 —— 這一條其實不必單獨列出來的，但是網上許多人對此有些疑惑，就在這里略加說明：

li 和 div 標 簽都是裝載內容的容器，地位平等，沒有級別之分（例如：h1、h2 這樣森嚴的等級制度^_），要知道，li 標簽連它的父級 ul 或者是 ol 都 可以容納的，為什么有人會覺得 li 偏偏容納不下一個 div 呢？別把 li 看得那么小氣嘛，別看 li 長得挺瘦小，其實 li 的胸襟很大 滴……

5. 塊級元素與塊級元素并列、內嵌元素與內嵌元素并列：

例如：

<div><h2></h2><p></p></div> —— 對
<div><a href=”#”></a><span></span></div> —— 對
<div><h2></h2><span></span></div> —— 錯

4. label 和input 聯合使用

當用戶選擇label標簽時，瀏覽器會自動將焦點轉移到個label相關的input上

1.通過為input設定屬性id，在label標簽中設定for=id使label文本與對應的inpu他結合起來，

<label for="name">Name:</label>

<input id="name" type="text"/>

2.label標簽包裹input標簽，點擊label時，label兩次回應，即label本身觸發和input觸發后冒泡到label上，

<label for="name">
<input id="name" type="text"/>
</label>

5. 關于權重問題

解釋一

型別	權重
! important	無窮
行間樣式	1000
id	100
class/屬性選擇器/偽類	10
標簽選擇器	1
通配符	0

使用后代選擇器時，每一級不同的表述方式，直接進行相加，最后進行權重的比較，
ps：CSS的選擇器進制是256進制，

解釋二：

一、優先級分類

通常可以將css的優先級由高到低分為6組：

1. 第一優先級：無條件優先的屬性只需要在屬性后面使用！important，它會覆寫頁面內任何位置定義的元素樣式，ie6不支持該屬性，
2. 第二優先級：在html中給元素標簽加style，即行內樣式，該方法會造成css難以管理，所以不推薦使用，
3. 第三優先級：由一個或多個id選擇器來定義，例如，#id{margin:0;}會覆寫.classname{margin:3pxl}
4. 第四優先級：由一個或多個類選擇器、屬性選擇器、偽類選擇器定義，如.classname{margin:3px}會覆寫div{margin:6px;}
5. 第五優先級：由一個或多個型別選擇器定義，如div{marigin:6px;}覆寫*{margin:10px；}
6. 第六優先級：通配選擇器，如*{marigin:6px;}

二、選擇器的權重及優先規則

在css中，會根據選擇器的特殊性來決定所定義的樣式規則的次序，具有更特殊選擇器的規則優先于一般選擇器的規則，如果兩個規則的特殊性相同，那么后定義的規則優先，

那么如何計算選擇器的特殊性呢？那就要用到選擇器的權重計算了，計算規則如下圖：

我們把特殊性分為4個等級，每一個等級代表一類選擇器，沒個等級的值相加得出選擇器的權重，

4個等級的定義如下：

• 第一等級：代表行內樣式，如style=""，權值為 1000
• 第二等級：代表id選擇器，如#content，權值為100
• 第三等級：代表類，偽類和屬性選擇器，如.content，權值為10
• 第四等級：代表標簽選擇器和偽元素選擇器，如div p，權值為1

注意：通用選擇器（*），子選擇器（>），和相鄰同胞選擇器（+）并不在這個等級中，所以他們的權值為0

如上圖，整個選擇器運算式的特殊值為113

三、優先級不起作用

如果遇到了似乎沒有起作用的css規則，很可能是出現了特殊性沖突，這時可以在選擇器中添加他的一個父元素的id，從而提高他的特殊性，如果這能解決問題，就說明樣式表中其他地方很可能有更特殊的規則，他覆寫了你的規則，此時需要檢查代碼，解決特殊性沖突，讓代碼盡可能的簡潔，

6. 獨立區域

1. 當div中的元素只有一個，并且該元素為塊級元素的時候，div則可以去掉，
2. 背景與其他地方顯著不同，則是一個獨立區域
3. 被邊框圈住的區域是一個獨立區域
4. 如果瀏覽器寬度調整，有寬度居中效果的區域，說明有一個居中盒子

7. 關于行高的問題

在一般情況下，建議不設定行高，讓內容自行撐開盒子，再有圖片的情況下可以設定行高，讓盒子與圖片契合，

8. 圖示與文字位置問題

圖示如果實在左側，那么就可以設定文字的左側使用padding，建議加入的做內邊距稍微

9.HTML5中的新屬性

結構性元素主要負責web背景關系結構的定義

<section>：在 web 頁面應用中，該元素也可以用于區域的章節描述，

<header>：頁面主體上的頭部， header 元素往往在一對 body 元素中，

<footer>：頁面的底部（頁腳），通常會標出網站的相關資訊，

<nav>：專門用于選單導航、鏈接導航的元素，是 navigator 的縮寫，

<article>：用于表現一篇文章的主體內容，一般為文字集中顯示的區域，

 

級塊性元素主要完成web頁面區域的劃分，確保內容的有效分割，

<aside>：用于表達注記、貼士、側欄、摘要、插入的參考等作為補充主體的內容，

<figure>：是對多個元素進行組合并展示的元素，通常與 ficaption 聯合使用，

<code>：表示一段代碼塊，

<dialog>：用于表達人與人之間的對話，該元素包含 dt 和 dd 這兩個組合元素， dt 用于表示說話者，而 dd 用來表示說話內容，

行內語意性元素主要完成web頁面具體內容的參考和描述，是豐富內容展示的基礎，

<meter>：表示特定范圍內的數值，可用于工資、數量、百分比等，

<time>：表示時間值，

<progress>：用來表示進度條，可通過對其 max 、 min 、 step 等屬性進行控制，完成對進度的表示和監事，

<video>：視頻元素，用于支持和實作視頻檔案的直接播放，支持緩沖預載和多種視頻媒體格式，

<audio>：音頻元素，用于支持和實作音頻檔案的直接播放，支持緩沖預載和多種音頻媒體格式，

 

互動性元素主要用于功能性的內容表達，會有一定的內容和資料的關聯，是各種事件的基礎，

<details>：用來表示一段具體的內容，但是內容默認可能不顯示，通過某種手段（如單擊）與 legend 互動才會顯示出來，

<datagrid>：用來控制客戶端資料與顯示，可以由動態腳本及時更新，

<menu>：主要用于互動選單（曾被廢棄又被重新啟用的元素），

<command>：用來處理命令按鈕，

10.去掉input默認樣式

input{
  /*去除陰影*/
  box-shadow:none;
  /*聚焦input的藍色邊框*/
  outline: none;
  /*textarea 禁止拖拽*/
  resize: none; 
  /*去除邊框*/
  border: none; 
  /*常用于IOS下移除原生樣式*/
  -webkit-appearance: none;
  /*點擊高亮的顏色*/
  -webkit-tap-highlight-color:rgba(0,0,0,0); 
}

11.輪播圖的實作方法以及通過偽類來實作點擊事件

<!DOCTYPE html>
<html lang="ch-Zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes myFirst {
            0% {
                margin-left: 0;
            }

            50% {
                margin-left: -600px;
            }
            100% {
                margin-left: -1200px;
            }
        }
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            margin: auto;
            margin-top: 80px;
            width: 600px;
            height: 200px;
            overflow: hidden;
        }

        .clear::after {
            display: block;
            content: '';
            clear: both;
        }

        .container ul {
            padding: 0;
            width: 1800px;
            transition: all 0.5s ease-out;
            animation: myFirst 7s linear infinite;
        }

        .container ul:hover {
            animation-play-state: paused;
        }
        li {
            width: 600px;
            height: 200px;
            list-style: none;
            line-height: 200px;
            text-align: center;
            float: left;
        }

        li:nth-of-type(1) {
            background-color: aqua;
        }

        li:nth-of-type(2) {
            background-color: green;
        }

        li:nth-of-type(3) {
            background-color: yellowgreen;
        }

        label {
            position: absolute;
            display: inline-block;
            margin: 0 10px;

            line-height: 20px;
            width: 20px;
            top: 175px;
            text-align: center;
            border-radius: 50%;
            background-color: pink;
            cursor: pointer;
        }

        label:nth-of-type(1) {
            left: 00px;
        }

        label:nth-of-type(2) {
            left: 30px;
        }

        label:nth-of-type(3) {
            left: 60px;
        }

        #one:checked~label:nth-of-type(1) {
            color: aqua;
            background-color: #ffffff;
        }

        #two:checked~label:nth-of-type(2) {
            color: aqua;
            background-color: #ffffff;
        }

        #three:checked~label:nth-of-type(3) {
            color: aqua;
            background-color: #ffffff;
        }

        #one:checked~ul {
            margin: 0;
        }

        #two:checked~ul {
            margin: 0 -600px;
        }

        #three:checked~ul {
            margin: 0 -1200px;
        }
    </style>
</head>

<body>
    <div class="container clear">
        <input type="radio" name="color" id="one" hidden>
        <label for="one">1</label>
        <input type="radio" name="color" id="two" hidden>
        <label for="two">2</label>
        <input type="radio" name="color" id="three" hidden>
        <label for="three">3</label>

        <ul class="clear">
            <li>one-點擊切換</li>
            <li>two-點擊切換</li>
            <li>three-點擊切換</li>
        </ul>
    </div>

</body>

</html>

12. ctrl + shift +c 切出的那個選擇方式選中塊之后顯示的高度數值實際是height+padding

13.文字超出所在區域之后的處理方法

單行文字：

• overflow: hidden說明超出元素大小后隱藏內容（對盒子而言）
• text-overflow: ellipsis 說明文字內容超出后以…的方式來顯示（對文本而言）
• white-space: nowrap 該屬性規定段落中的文本不進行換行，因為這個設定所以不用擔心height屬性對元素的影響，（對文本而言）、
• 這些屬性是要給盒子設定的屬性，而不是給文本的行內元素設定的屬性

<!-- 這種是對的-->
        div {
            width: 100px;
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    <div> <span>一二三四五六七八九十十一十二十三二十三</span></div>
<!-- 這種是錯的-->
   span {
         	 width: 100px;
        	 height: 20px;
           	 overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
        }
	div{
			width:100;
			height:80;
		}
    <div> <span>一二三四五六七八九十十一十二十三二十三</span></div>

多行文字：

在設定的時候不需要設定高度通過行高和規定的行數來實作超出的效果

1. display:-webkit-box 設定成盒模型
2. -webkit-box-orient:vertical 用來確定父容器里子容器的排列方式，可以選擇是水平排列還是垂直排列一般默認是水平排列
3. -webkit-box-clamp:number 后面設定的number是顯示的行數
4. text-overflow: hidden指超出后用省略號表示

14.電梯導航的制作

1. 不需要設定高度

2. 設定固定定位

3. left:50% (剛好螢屏的正中間，然后設定向左或者向右偏移版心的一半距離，然后再偏移自己想要的距離)

4. margin-left:-600px; ----> margin-left: -660px;

15.小段豎線的細節

可以寫一個span標簽，然后將span標簽里面放一個| 然后設定顏色

可以通過margin來調節外邊距，通過字體大小來設定長度

16.小三角的制作

針對一個缺口的那種型別的三角

設定一個盒子,寬度和高度都為零，設定邊框都有且為透明，最后單獨設定一個邊框，最后通過絕對定位來確定位置

width:0;
heightP:0;
border:10px solid transparent;
border-top-color: blue;
margin： 10px auto;

針對搜索框旁表的那一種三角

通過偽類來制作一個小塊，然后讓塊進行旋轉，并且這個塊只有兩個邊框

.sanjiao::after{
position:absolute;
content:"";
top:10px;
right:10px;
width:10px;
height:10px;
border-right:1px solid #000;
border-bottom:1px solid #000;
transform:rotate(45deg);    
}

17. 字體單位

1、px

px其實就是像素的意思，全稱pixel，也就是影像的基本采樣單位，對于不同的設備，它的影像基本單位是不同的，比如顯示幕和列印機，而我們通常所說的顯示幕解析度是指桌面設定的解析度，不是顯示幕的物理解析度，但是現在我們的桌面解析度和物理解析度幾乎是一致的，因為這樣顯示效果最佳，所以總的來說px就是對應我們顯示幕的解析度，這樣就會有個問題就是如果使用px的話我們就要根據不同電腦的解析度來做自適應，有點麻煩，

2、em

em是相對長度單位，相對于當前物件內本文的字體尺寸（如果沒有設定本文尺寸，那就是相對于瀏覽器默認的字體尺寸，也就是16px），這樣計算的話，如果沒有設定字體尺寸就是1em = 16px，如果使用em的話，有個好的建議，就是將body的font-size設定成62.5%，也就是16px * 62.5% = 10px，這樣的話1em = 10px，方便我們計算，

3、rem

rem和em一樣也是相對長度單位，但是不一樣的是rem始終都是相對html根元素，這樣有個很大的有點就是使用rem后不會受到物件內文本字體尺寸的影響，而且只需要改變根元素就能改變所有的字體大小，兼容性也是不錯的，IE8以上版本和其他瀏覽器都已經支持，是個做回應式頁面的好選擇

4、重點：vw和vh

vw和vh是視口（viewport units）單位，何謂視口，就是根據你瀏覽器視窗的大小的單位，不受顯示幕解析度的影響，是不是很神奇，這就代表了，我們不需要顧慮到現在那么多不同電腦有關解析度的自適應問題，

vw是可視視窗的寬度單位，和百分比有點一樣，1vw = 可視視窗的寬度的百分之一，比如視窗寬度大小是1800px，那么1vw = 18px，和百分比不一樣的是，vw始終相對于可視視窗的寬度，而百分比和其父元素的寬度有關，

vh就是可視視窗的高度了，

這邊順便提一下vmin和vmax，vmin是指選擇vw和vh中最小的那個，而vmax是選擇最大的那個

18.居中問題

水平居中

行內元素

• 首先看它的父元素是不是塊級元素，如果是，則直接給父元素設定 text-align: center;
• 如果不是，則先將其父元素設定為塊級元素，再給父元素設定 text-align: center;

塊級元素

方案一：(分寬度定不定兩種情況)

• 定寬度：需要誰居中，給其設定margin: 0 auto;（作用：使盒子自己居中）
• 不定寬度：默認子元素的寬度和父元素一樣，這時需要設定子元素為display: inline-block; 或 display: inline; 即將其轉換成行內塊級/行內元素，給父元素設定 text-align: center;

方案二：使用定位屬性

首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的left:50%，即讓子元素的左上角水平居中；

• 定寬度：設定絕對子元素的 margin-left: -元素寬度的一半px; 或者設定transform: translateX(-50%);
• 不定寬度：利用css3新增屬性transform: translateX(-50%);

方案三：使用flexbox布局實作（寬度定不定都可以）

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;

垂直居中

單行的行內元素

只需要設定單行行內元素的"行高等于盒子的高"即可；

多行的行內元素

使用給父元素設定display:table-cell; 和 vertical-align: middle; 屬即可；

塊級元素

方案一：使用定位

首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的top: 50%，即讓子元素的左上角垂直居中；

• 定高度：設定絕對子元素的 margin-top: -元素高度的一半px; 或者設定transform: translateY(-50%);
• 不定高度：利用css3新增屬性transform: translateY(-50%);

方案二：使用flexbox布局實作（高度定不定都可以）

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;

水平垂直居中

已知高度和寬度的元素

方案一：

設定父元素為相對定位，給子元素設定絕對定位.

top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

方案二：

設定父元素為相對定位，給子元素設定絕對定位，

left: 50%;
top: 50%;
margin-left: -元素寬度的一半px;
margin-top: -元素高度的一半px;

未知高度和寬度的元素

方案一：使用定位屬性

設定父元素為相對定位，給子元素設定絕對定位.

left: 50%;
top: 50%;
transform: translate(-50%,-50%);

方案二：使用flex布局實作

設定父元素為flex定位，justify-content: center; align-items: center;

方案三：table-cell布局

display: table-cell;    

vertical-align: middle;//使子元素垂直居中    

text-align: center;//使子元素水平居中

有關引入檔案的問題

HTML引入外部css

HTML檔案參考擴展名為.css的樣式表，有兩種方式

鏈接式（使用的最多）

使用<link> 標簽鏈接外部樣式表，并講解各引數的含義， <link> 標簽必須放在

<head> 標簽中

匯入式

使用@import匯入外部樣式表

鏈接式與匯入式的區別

1. <link/> 標簽是屬于XHTML范疇的，@import是屬于CSS2.1中特有的，

2. 使用 <link/> 鏈接的CSS是客戶端瀏覽網頁時先將外部CSS檔案加載到網頁當中，然后再進行編

譯顯示，所以這種情況下顯示出來的網頁與用戶預期的效果一樣，即使網速再慢也一樣的效果，

3. 使用@import匯入的CSS檔案，客戶端在瀏覽網頁時是先將HTML結構呈現出來，再把外部CSS檔案

加載到網頁當中，當然最終的效果也與使用 <link/> 鏈接檔案效果一樣，只是當網速較慢時會

先顯示沒有CSS統一布局的HTML網頁，這樣就會給用戶很不好的感覺，這個也是現在目前大多少

網站采用鏈接外部樣式表的主要原因，

4. 由于@import是屬于CSS2.1中特有的，因此對于不兼容CSS2.1的瀏覽器來說就是無效的，

html引入html

iframe行內框架

css檔案引入css檔案

兩種方法：在css檔案的第一行輸入@import url(style2.css);或者@import “style2.css”;

注意要點：

• 必須在第一行寫
• 這句話的最后必須加上分號

兩種盒子模型

1.W3C盒模型（標準盒模型）

	給一個標簽添加：box-sizing:content-box；(元素默認)
	這個標簽就轉換為了w3c盒模型
	標簽得實際寬度 = 設定的寬度 + border寬度 + padding的寬度12

2.怪異盒模型(又稱ie盒模型)

	給一個標簽添加：box-sizing:border-box；
	這個標簽就轉換為了怪異盒模型
	標簽得實際寬度 = 設定的寬度 = content + padding + border
	如果設定了padding和border就是從設定的實際寬高中減去，減去后才是內容的寬高，

區別

主要區別：對于寬高的定義不同
w3c盒模型：設定的寬度就等于內容的寬度
怪異盒模型：內容的寬度 = 設定的寬度 - border的寬度 - padding的寬度

注：
本文部分非原創，屬于個人在網上整合的筆記，以便于以后使用，如果有侵權，請私信聯系我，以便于我下架侵權內容，
部分資源來自:
w3c
csdn
博客園
bilibili