超鏈接

    <a target="頁面打開位置" href="鏈接地址">內容</a>target:_blank 重新打開一個頁面target:_self 當前頁面打開

1.頁面地址：
基礎功能，用于進入該鏈接的頁面；
2.錨點：
需要給標簽名定義id，鏈接地址為#id名，即可在當前頁面進行跳轉；
3.功能性鏈接：
打電話打電話；
發郵件；
***

文本元素

    - h1-h6:對應一級標題到六級標題，字體大小默認情況下從大到小；- p：段落；- q：小段引用，一般不超過一行；- blockqoute:大段引用；- abbr：引用，一般用于英文縮寫的全稱解釋；- cite：引用參考文獻；- b：加粗突出顯示的文本。因加粗一般無法量化不利于排版，一般不用；- strong：重要的文本；- i：應區別對待的文本，斜體；- em：強調的文本；

無語義元素

    - div：分區塊，便于排版；- span：行內元素（不換行），僅用于給一小段文本添加樣式；- br：空元素，用于在頁面中換行，因換行后間距無法量化不利于排版，一般不用；- hr：空元素，用于在頁面中加入分割符號，一般不用；- pre:預格式化元素，頁面顯示代碼格式。

實體字符

    書寫格式：&實體名稱；或&#實體編號；背景：在瀏覽器中，有些字符會被特殊處理，如<,>會被瀏覽器認為是標記符號，不會直接顯示到頁面；空白字符會被瀏覽器折疊成1個空格。空格      &nbsp；      &#160；<   小于符號    &lt；        &#60；>   大于符號 &gt；       &#62；&   并且符號 &&amp；     &#38；?   版權符號 &copy;     &#169;

常見的CSS屬性

color:red   顏色
text-align:center   對齊方式
font-size:28px 字    體大小
font-weight：bold    文字粗細
background-color：red     背景顏色

CSS選擇器

基礎選擇器

元素
類
ID（錨點可以使用，一般不推薦使用，預留給JS用）

通配符選擇器

 格式：* 聲明塊例子：*{color:red;}

并集選擇器

 h1{color:red;}h2{color:red;}h3{color:red;}格式：元素或類或ID "," 元素或類或ID 聲明塊例子：h1,h2,h3{color:red;}p,.container,#box{background-color:deeppink;}

層次選擇器

子集選擇器

 格式：父級元素名稱 ">" 子級元素名稱 聲明塊例子：div>p{color:red;}

后代選擇器

 格式：祖先元素名稱 "空格" 后代元素名稱 聲明塊例子：div p{color:red;}

兄弟選擇器

 格式：兄弟元素A " " 兄弟元素B 聲明塊例子：div p{color:red;}注：只能選中元素A后面的第一個元素

通用選擇器

 格式：兄弟元素A "~" 兄弟元素B 聲明塊例子：div~p{color:red;}注：表示可以選擇元素A后面任意位置的同級元素

偽類選擇器

動態偽類選擇器

未訪問

 格式：a  ":" "link" 聲明塊例子：a:link{color:black;}

已訪問(訪問后）

 格式：a  ":" "visited" 聲明塊例子：a:visited{color:green;}

懸停（鼠標停留在鏈接上時的樣式）

 格式：a  ":" "hover" 聲明塊例子：a:hover{color:deeppink;}

點擊時

 格式：a  ":" "active" 聲明塊例子：a:active{color:deeppink;}

焦點框（多用于輸入框肯鏈接）

 格式：a  ":" "focus" 聲明塊a:focus{color:五光十色；}以上偽類書寫順序A方案：link,visited,focus,hover,activeB方案：visited,link,focus,hover,active注：IE7以前是不支持:focus注：IE6以前是不支持:hover,active

結構偽類選擇器

  1.格式：元素名稱 ":nth-child(n)" {聲明塊}例子： h1:nth-child(5){color:gray;}表示選中第5個h1元素，顏色為灰色表示選中第5個元素，并且滿足是h1的情況，才會應用樣式注：（n）中的n表示元素的位置:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型。2.格式：元素名稱 ":nth-of-type(n)" {聲明塊}例子： h1:nth-of-type(5){color:gray;}表示選中類別為h1的第5個h1表示先篩選出所有的h1標簽，然后在結果里選中第5個h1:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素。3.格式：元素名稱 ":first-child" {聲明塊}例子： h1:fist-child{color:gray;}表示選中第1個h1元素4.格式：元素名稱 ":last-child" {聲明塊}例子： h1:last-child{color:gray;}表示選中最后1個h1元素5.格式：元素名稱 ":nth-child(odd)" {聲明塊}例子： h1:nth-child(odd){color:gray;}表示選中奇數項6.格式：元素名稱 ":nth-child(even)" {聲明塊}例子： h1:nth-child(even){color:gray;}表示選中偶數項

否定偽類選擇器

  格式：元素名稱 ":not(相應的選擇條件)" {聲明塊}例子： h1:not(:nth-child(3)){color:gray;}表示除第3個h1元素，都應用樣式

偽元素選擇器

    1.格式：元素名稱 ":" "before" ｛content:"加的內容"｝例子：h1:before{content: "F51";}表示在元素前面加內容2.格式：元素名稱 ":" "after" ｛content:"加的內容"｝例子：h1:before{content: "F51";}表示在元素后面加內容3.格式：元素名稱 ":" "first-line" {聲明塊}例子：p:first-line{color:green}表示選中第一行4.格式：元素名稱 ":" "first-letter" {聲明塊}例子：p:first-letter{color:red}表示選中第一個字母5.格式：元素名稱 "::" "selection" {聲明塊}例子：p::selection{background-color:green;color:chocolate}表示設置選中內容的背景色和字體色

層疊

層疊機制

當發生聲明沖突（同一個樣式的不同值應用到同一個標簽上）時瀏覽器會觸發層疊機制。

層疊過程

比較優先級

 重要性：屬性值 ！important;來源：用戶>開發者>瀏覽器

比較特殊性（特指值或特指度）
每個聲明都有一個特殊性（specificity）
選擇器規則適用范圍越大，特殊性越小。
行內樣式>ID選擇器>類選擇器>元素選擇器>通配符選擇器

 a：聲明是行內樣式則為1，否則為0；b：規則中ID選擇器的個數；c：規則中類選擇器，偽類選擇器，屬性選擇器個數；d：規則中元素選擇器，偽元素選擇器的個數通配符選擇器的特殊性為0。a, b, c, d依次比較只要對應位相同進入下一位比較，否則停止比較，該位上數值大的勝出。選擇器分組時（并集選擇器）要分開計算h1,h2,h3{color:red;}h1{color:blue;} 勝出

比較源次序

 最后出現的聲明勝出，其他的全部淘汰。該規則的實際應用：CSS Reset代碼前置 解決兼容性問題；a元素的偽類書寫順序。

繼承（inherit）

 是指子元素會自動擁有父元素的某些屬性

可被繼承的屬性：color,font-size,font-weight,text-align等
基本上文本類的樣式都可以被繼承。
不可被繼承的屬性：background-color。
繼承的場景：

 該屬性是可繼承屬性；該屬性在樣式表中沒有聲明。

強制繼承

    也叫顯示繼承，是指將css屬性值設置為inherit。為了繼承某些不可繼承屬性或已聲明屬性。

盒子模型

    每個元素都在頁面中形成一個矩形區域，CSS稱該區域為盒子（box）

盒模型單個盒子組成
視覺格式化模型多個盒子的排列（相互作用，影響）
布局實際應用

margin

    外邊框，與其他盒子之間的距離。指盒模型可見部分之外的透明區域空間，讓我們可以控制頁面元素之間的距離，幫助將元素定位到頁面上的一個特定位置上，或者給元素提供呼吸的空間，讓他與其他元素保持一個安全的距離。

padding

    內邊距，邊框和內容之間的可選距離。他會應用到內容和內邊距組成的區域。因此，內邊距常被用于在內容周圍創建一個隔離帶，這樣內容就會與背景混在一起。

content

    內容的高度和寬度。

overflow

    超出內容的展示方式。

1.overflow:hidden 表示超出內容隱藏；
2.overflow:auto 表示哪個方向的內容超出，該方向出現滾動條；
3.overflow:visible 默認值，溢出部分顯示；
4.overflow:scroll 表示垂直和水平方向上都出現滾動條，但只有超出的方向滾動條可用。

    全屏顯示時頁面緊張出現橫向滾動條。

盒模型padding

    類似于箱子和內部物品之間的填充物。padding-top：上內邊框，不可繼承，默認值為0px，其他取值單位em、%。

padding：取1,2,3,4,個值分別對應不同的意義。
上，右，下，左對應top，right，bottom，left方向。

取1個值時，4個方向相同；
取2個值時，上下相同對應第一個值，右左相同對應第二個值；
取3個值時，第一個值對應上，第三個值對應下，第二個值對應相同的右左；
取4個值時，分別對應上右下左。

border-radius

取1個值時，4個角的弧度半徑；
取2個值時，第一個是左上和右下的弧度半徑；第二個是右上和左下的弧度半徑。
設置某一個角的圓角：
border-bottom-right-radius:30px(對應x軸半徑) 20px（對應y軸半徑）;
border的默認顏色是當前標簽的字體顏色。
取transparent值表示透明色。
#盒子模型補充

子盒子

邊框盒（border-box）
```
  背景色默認渲染區域，可通過設置background-clip： 調節。
```
填充盒（padding-box）
```
  嚴格意義上overflow溢出是指溢出填充盒。
```
內容盒（content-box）
```
  默認情況下width和height屬性是指內容盒的寬度和高度。
```
盒子尺寸的計算
```
  box-sizing：設置元素的尺寸范圍。content-box（默認值）border-box表示元素的width和height設置區域是邊框盒。可以解決頁面橫向滾動條的問題。
```
注：width：100%的基礎上加margin，設置box-sizing:border-box也無效。
outline：外邊框，用法和border完全一致。不占尺寸顯示，可輔助布局。

視覺格式化模型（visual formatting model）

    css的一種機制，規定了頁面中多個盒子如何相互影響，如何布局。

視口（viewport）

    可視窗口，通常指瀏覽器的可視區域。視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關。當內容超出視口時，瀏覽器會出現滾動條。

包含塊（contianing block）

    每個元素都有一個包含塊，他是指元素在頁面中的擺放區域，通常情況下元素的包含塊是他父元素的內容盒。html根元素的包含塊是：初始化包含塊（initial containing block）

定位體系

視覺格式化模型的基礎，一共有3種：

常規流（normal flow）又叫文檔流或常規文檔流
浮動（float）默認值為none
絕對定位（absolute positioned）默認值為static
每一個元素都屬于其中一個定位體系。
先判斷絕對定位，如果position屬性值為absolute或fixed則為絕對定位，否則進入浮動判斷，如果float值為left或right，則為浮動定位，否則為常規流。

盒模型和定位體系
盒模型 = 盒子尺寸定位體系 = 盒子位置
定位體系會影響盒模型。（width和height值為auto時）
margin px, em, %, auto（可為負值）
border px, em
padding px, em, %
width px, em, %, auto
height px, em, %, auto

px和em是固定單位，固定值或者絕對值；

    1em是指當前標簽font-size的一倍。注：當前標簽沒有font-size時注意繼承關系。

%和auto是相對單位，相對值。

    常規流中width取值為%，是指相對父級元素（包含塊）width的百分比。margin，padding，width的百分比是包含塊寬度的百分比。

三角形的繪制方法

將一個塊級元素的border設置合適寬度，width和height設置為0.只設置一邊的顏色，另外三邊顏色設置為透明即可。通過調整每個邊的border值調整三角形形狀。
將width或者height設置合適的值可繪制梯形。

塊級元素水平方向居中方法

該元素：margin-left：-50%；
包含塊：padding-left：50%；

盒模型padding

    類似于箱子和內部物品之間的填充物。padding-top：上內邊框，不可繼承，默認值為0px，其他取值單位em、%。

padding：取1,2,3,4,個值分別對應不同的意義。
上，右，下，左對應top，right，bottom，left方向。

取1個值時，4個方向相同；
取2個值時，上下相同對應第一個值，右左相同對應第二個值；
取3個值時，第一個值對應上，第三個值對應下，第二個值對應相同的右左；
取4個值時，分別對應上右下左。

border-radius

取1個值時，4個角的弧度半徑；
取2個值時，第一個是左上和右下的弧度半徑；第二個是右上和左下的弧度半徑。
設置某一個角的圓角：
border-bottom-right-radius:30px(對應x軸半徑) 20px（對應y軸半徑）;
border的默認顏色是當前標簽的字體顏色。
取transparent值表示透明色。
#盒子模型補充

子盒子

邊框盒（border-box）
```
  背景色默認渲染區域，可通過設置background-clip： 調節。
```
填充盒（padding-box）
```
  嚴格意義上overflow溢出是指溢出填充盒。
```
內容盒（content-box）
```
  默認情況下width和height屬性是指內容盒的寬度和高度。
```
盒子尺寸的計算
```
  box-sizing：設置元素的尺寸范圍。content-box（默認值）border-box表示元素的width和height設置區域是邊框盒。可以解決頁面橫向滾動條的問題。
```
注：width：100%的基礎上加margin，設置box-sizing:border-box也無效。
outline：外邊框，用法和border完全一致。不占尺寸顯示，可輔助布局。

視覺格式化模型（visual formatting model）

    css的一種機制，規定了頁面中多個盒子如何相互影響，如何布局。

視口（viewport）

    可視窗口，通常指瀏覽器的可視區域。視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關。當內容超出視口時，瀏覽器會出現滾動條。

包含塊（contianing block）

    每個元素都有一個包含塊，他是指元素在頁面中的擺放區域，通常情況下元素的包含塊是他父元素的內容盒。html根元素的包含塊是：初始化包含塊（initial containing block）

定位體系

視覺格式化模型的基礎，一共有3種：

常規流（normal flow）又叫文檔流或常規文檔流
浮動（float）默認值為none
絕對定位（absolute positioned）默認值為static
每一個元素都屬于其中一個定位體系。
先判斷絕對定位，如果position屬性值為absolute或fixed則為絕對定位，否則進入浮動判斷，如果float值為left或right，則為浮動定位，否則為常規流。

盒模型和定位體系
盒模型 = 盒子尺寸定位體系 = 盒子位置
定位體系會影響盒模型。（width和height值為auto時）
margin px, em, %, auto（可為負值）
border px, em
padding px, em, %
width px, em, %, auto
height px, em, %, auto

px和em是固定單位，固定值或者絕對值；

    1em是指當前標簽font-size的一倍。注：當前標簽沒有font-size時注意繼承關系。

%和auto是相對單位，相對值。

    常規流中width取值為%，是指相對父級元素（包含塊）width的百分比。margin，padding，width的百分比是包含塊寬度的百分比。

三角形的繪制方法

塊級元素水平方向居中方法

該元素：margin-left：-50%；
包含塊：padding-left：50%；

盒模型padding

    類似于箱子和內部物品之間的填充物。padding-top：上內邊框，不可繼承，默認值為0px，其他取值單位em、%。

padding：取1,2,3,4,個值分別對應不同的意義。
上，右，下，左對應top，right，bottom，left方向。

取1個值時，4個方向相同；
取2個值時，上下相同對應第一個值，右左相同對應第二個值；
取3個值時，第一個值對應上，第三個值對應下，第二個值對應相同的右左；
取4個值時，分別對應上右下左。

border-radius

取1個值時，4個角的弧度半徑；
取2個值時，第一個是左上和右下的弧度半徑；第二個是右上和左下的弧度半徑。
設置某一個角的圓角：
border-bottom-right-radius:30px(對應x軸半徑) 20px（對應y軸半徑）;
border的默認顏色是當前標簽的字體顏色。
取transparent值表示透明色。
#盒子模型補充

子盒子

邊框盒（border-box）
```
  背景色默認渲染區域，可通過設置background-clip： 調節。
```
填充盒（padding-box）
```
  嚴格意義上overflow溢出是指溢出填充盒。
```
內容盒（content-box）
```
  默認情況下width和height屬性是指內容盒的寬度和高度。
```
盒子尺寸的計算
```
  box-sizing：設置元素的尺寸范圍。content-box（默認值）border-box表示元素的width和height設置區域是邊框盒。可以解決頁面橫向滾動條的問題。
```
注：width：100%的基礎上加margin，設置box-sizing:border-box也無效。
outline：外邊框，用法和border完全一致。不占尺寸顯示，可輔助布局。

視覺格式化模型（visual formatting model）

    css的一種機制，規定了頁面中多個盒子如何相互影響，如何布局。

視口（viewport）

    可視窗口，通常指瀏覽器的可視區域。視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關。當內容超出視口時，瀏覽器會出現滾動條。

包含塊（contianing block）

    每個元素都有一個包含塊，他是指元素在頁面中的擺放區域，通常情況下元素的包含塊是他父元素的內容盒。html根元素的包含塊是：初始化包含塊（initial containing block）

定位體系

視覺格式化模型的基礎，一共有3種：

常規流（normal flow）又叫文檔流或常規文檔流
浮動（float）默認值為none
絕對定位（absolute positioned）默認值為static
每一個元素都屬于其中一個定位體系。
先判斷絕對定位，如果position屬性值為absolute或fixed則為絕對定位，否則進入浮動判斷，如果float值為left或right，則為浮動定位，否則為常規流。

盒模型和定位體系
盒模型 = 盒子尺寸定位體系 = 盒子位置
定位體系會影響盒模型。（width和height值為auto時）
margin px, em, %, auto（可為負值）
border px, em
padding px, em, %
width px, em, %, auto
height px, em, %, auto

px和em是固定單位，固定值或者絕對值；

    1em是指當前標簽font-size的一倍。注：當前標簽沒有font-size時注意繼承關系。

%和auto是相對單位，相對值。

    常規流中width取值為%，是指相對父級元素（包含塊）width的百分比。margin，padding，width的百分比是包含塊寬度的百分比。

三角形的繪制方法

塊級元素水平方向居中方法

該元素：margin-left：-50%；
包含塊：padding-left：50%；

盒模型padding

    類似于箱子和內部物品之間的填充物。padding-top：上內邊框，不可繼承，默認值為0px，其他取值單位em、%。

padding：取1,2,3,4,個值分別對應不同的意義。
上，右，下，左對應top，right，bottom，left方向。

取1個值時，4個方向相同；
取2個值時，上下相同對應第一個值，右左相同對應第二個值；
取3個值時，第一個值對應上，第三個值對應下，第二個值對應相同的右左；
取4個值時，分別對應上右下左。

border-radius

取1個值時，4個角的弧度半徑；
取2個值時，第一個是左上和右下的弧度半徑；第二個是右上和左下的弧度半徑。
設置某一個角的圓角：
border-bottom-right-radius:30px(對應x軸半徑) 20px（對應y軸半徑）;
border的默認顏色是當前標簽的字體顏色。
取transparent值表示透明色。
#盒子模型補充

子盒子

邊框盒（border-box）
```
  背景色默認渲染區域，可通過設置background-clip： 調節。
```
填充盒（padding-box）
```
  嚴格意義上overflow溢出是指溢出填充盒。
```
內容盒（content-box）
```
  默認情況下width和height屬性是指內容盒的寬度和高度。
```
盒子尺寸的計算
```
  box-sizing：設置元素的尺寸范圍。content-box（默認值）border-box表示元素的width和height設置區域是邊框盒。可以解決頁面橫向滾動條的問題。
```
注：width：100%的基礎上加margin，設置box-sizing:border-box也無效。
outline：外邊框，用法和border完全一致。不占尺寸顯示，可輔助布局。

視覺格式化模型（visual formatting model）

    css的一種機制，規定了頁面中多個盒子如何相互影響，如何布局。

視口（viewport）

    可視窗口，通常指瀏覽器的可視區域。視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關。當內容超出視口時，瀏覽器會出現滾動條。

包含塊（contianing block）

    每個元素都有一個包含塊，他是指元素在頁面中的擺放區域，通常情況下元素的包含塊是他父元素的內容盒。html根元素的包含塊是：初始化包含塊（initial containing block）

定位體系

視覺格式化模型的基礎，一共有3種：

常規流（normal flow）又叫文檔流或常規文檔流
浮動（float）默認值為none
絕對定位（absolute positioned）默認值為static
每一個元素都屬于其中一個定位體系。
先判斷絕對定位，如果position屬性值為absolute或fixed則為絕對定位，否則進入浮動判斷，如果float值為left或right，則為浮動定位，否則為常規流。

盒模型和定位體系
盒模型 = 盒子尺寸定位體系 = 盒子位置
定位體系會影響盒模型。（width和height值為auto時）
margin px, em, %, auto（可為負值）
border px, em
padding px, em, %
width px, em, %, auto
height px, em, %, auto

px和em是固定單位，固定值或者絕對值；

    1em是指當前標簽font-size的一倍。注：當前標簽沒有font-size時注意繼承關系。

%和auto是相對單位，相對值。

    常規流中width取值為%，是指相對父級元素（包含塊）width的百分比。margin，padding，width的百分比是包含塊寬度的百分比。

三角形的繪制方法

塊級元素水平方向居中方法

該元素：margin-left：-50%；
包含塊：padding-left：50%；

塊盒在常規流下的位置

    盒子在包含塊的content垂直方向上依次擺放；依次擺放：按照HTML元素的書寫順序從上到下擺放；盒子在包含塊中的尺寸是整個盒子的尺寸。

垂直方向上

若兩個盒子外邊距相鄰（margin），則進行合并（折疊）。水平方向上不會。

    外邊距相鄰：兩個元素的外邊距之間沒有padding，border，content。

兄弟元素合并：margin都為正值取最大，都為負值取最小，一正一負相加。

快盒常規流盒模型的auto值

水平方向

常規流盒子水平方向上的尺寸，必須等于包含塊的尺寸。如果該盒子的width margin小于包含塊的width，不足部分有該元素的margin補齊。

    margin-left：auto && margin-right：auto 居中margin-left：定值 && margin-right：auto  右邊補齊margin-left：定值 && margin-right：定值 仍不足，同margin-right：auto 的情況。

想要一個塊級元素居中的方法：
給固定寬度，左右margin值設置為auto。

垂直方向

margin-top || margin-bottom：auto = 0。
height：auto = 適應內容的高度。

浮動

當元素的float屬性取值為left和right時，元素屬于浮動定位。
float：不可繼承；
取值：none（默認取值）= 不浮動；
left = 左浮動；
right = 右浮動；
浮動時： margin：auto = 0；
width：auto = 適應內容寬度；
height：auto = 適應內容高度。