CSS概述
css概述
什麼叫css
層疊樣式表(Cascading Style Sheets)是一種用來表現HTML或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
又叫級聯樣式表，簡稱樣式表
作用
- 用於HTML文檔中元素樣式定義
- 實現將內容與表現分離
- 提高代碼的可重用性和可維護性 - HTML 的初衷是表達信息。同時文檔佈局由瀏覽器來完成，而不使用任何的格式化標籤。由於各的瀏覽器（Netscape 和 IE）不斷地將新的 HTML 標籤和屬性（比如字體標籤和顏色屬性）添加到 HTML 規範中，創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難。
爲了解決這個問題，萬維網聯盟（W3C）在 HTML 4.0 之外創造出樣式（Style）。所有的主流瀏覽器均支持層疊樣式表。 - 樣式表極大地提高了工作效率
多重樣式將層疊爲一個
樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。
---------------------------------------------------
使用CSS樣式表
使用CSS樣式表
- 內聯樣式表
- 樣式定義在當個HTML元素中 - 內部樣式表
- 樣式定義在HTML頁的頭元素中 - 外部樣式表
- 將樣式定義在一個外部的css文件中（.css文件）
- 由HTML頁面引用樣式表文件
內聯方式使用CSS
- 樣式定義在 HTML 元素的標準屬性style中
- CSS語法
- 用分號分隔的一或者多個 屬性/值 對作爲元素的 style屬性的值
- 屬性/值 之間用 ：連接
- 多個屬性之間用 ;分隔
內部樣式表
- 位於文檔頭元素中的<style>元素內
- 可以定義多個樣式表
- 樣式由兩個部分：選擇器 樣式聲明 - 選擇器： 決定哪些元素使用這些規則
- 樣式聲明： 一對大括號{} 包含一個或多個屬性/值 對
<head>
<style type="text/css">
body {background-color: yellow}
p {background-color: rgb(250,0,255)}
</style>
</head>外部樣式表
- 可以實現內容與表現分離
- 可以被站點內所有頁面重用
- 外部樣式表文件
- .css後綴的純文本文件
- 該文件只能包含樣式規則
- 樣式規則由 選擇器和樣式聲明組成
- 使用：
<head>
<link rel="stylesheet" type="text/css" herf="URL">
</head>---------------------------------------------------
CSS語法
css語法規範
- CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
css樣式表特徵
- 繼承性： 絕大多數樣式規則可以被繼承
- 繼承及其問題：
根據 CSS，子元素從父元素繼承屬性。但是它並不總是按此方式工作。大部分的現代瀏覽器中，繼承是正常工作的。
但是在那個瀏覽器大戰的血腥年代裏，這種情況就未必會發生，那時候對標準的支持並不是企業的優先選擇。比方說，Netscape 4 就不支持繼承，IE/Windows 直到 IE6 還存在相關的問題，在表格內的字體樣式會被忽略。
- 解決：
可以通過使用我們稱爲 "Be Kind to Netscape 4" 的冗餘法則來處理舊式瀏覽器無法理解繼承的問題
<!--4.0 瀏覽器這些屬性將不會被繼承-->
body {
font-family: Verdana, sans-serif;
}
<!--4.0 瀏覽器無法理解繼承，不過他們可以理解組選擇器-->
<!--這麼做雖然會浪費一些用戶的帶寬，但是如果需要對 Netscape 4 用戶進行支持，就不得不這麼做-->
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}- 層疊性
- 可以定義多個樣式表
- 不衝突時 對個樣式表中的樣式可以層疊爲一個 - 優先級
- 樣式定義衝突時，按照不同樣式規則優先級來應用樣式
樣式優先級
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。- 瀏覽器缺省設置
- 外部樣式表
- 內部樣式表（位於 <head> 標籤內部）
- 內聯樣式（在 HTML 元素內部）
---------------------------------------------------
CSS 選擇器
元素選擇器
最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。
如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}類選擇器
類選擇器以一個點號顯示
- 類名第一個字符不能使用數字
- 類選擇器以一種獨立於文檔元素的方式來指定樣式
語法： .className{屬性：屬性值} - 所有能附帶class屬性的元素都可用類選擇器
- 元素選擇器可以結合類選擇器，實現對元素樣式的細分（派生）
.className 元素【空格分隔】
元素.class 【無空格：類爲class的元素】區別 元素 .class
<!--類選擇器-->
.center {text-align: center}
<!--派生選擇器-->
.fancy td {
color: #f60;
background: #666;
}
td.fancy {
color: #f60;
background: #666;
}Id選擇器
id 選擇器以 "#" 來定義
- id 屬性只能在每個 HTML 文檔中出現一次。
id 的作用就是唯一標識元素, id 在html 中出現多次也不會報錯, 但是使用 javascript 訪問id 時就會有問題了 - Id選擇器以一種獨立於文檔元素的方式來指定樣式(示例中派生使用【利用繼承】)
- 同類選擇器，Id選擇器也支持派生選擇器
<!--sidebar 內的 p 元素得到了特殊的處理，sidebar 中的 h2 元素也得到了不同的特殊處理。-->
#sidebar p {
font-style: italic;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
}屬性選擇器
- 對帶有指定屬性的 HTML 元素設置樣式。
- 可以爲擁有指定屬性的 HTML 元素設置樣式，而不僅限於 class 和 id 屬性。
注：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。 - 語法： [屬性]{樣式}
| 選擇器 | 描述 |
|---|---|
| [attribute] | 用於選取帶有指定屬性的元素。 |
| [attribute=value] | 用於選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用於選取屬性值中包含指定詞彙的元素。 |
| [attribute|=value] | 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
<!--屬性和值選擇器 - 多個值-->
<!--下面的例子爲包含指定值的 title 屬性的所有元素設置樣式。適用於由空格分隔的屬性值-->
[title~=hello] { color:red; }
<!--下面的例子爲帶有包含指定值的 lang 屬性的所有元素設置樣式。適用於由連字符分隔的屬性值-->
[lang|=en] { color:red; }選擇器分組
逗號分隔的選擇器列表
- 通過分組，創作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。
- 通配選擇器 *
<!--使文檔中的每個元素都爲紅色：-->
* {color:red;}- 聲明分組
我們既可以對選擇器進行分組，也可以對聲明分組
注意:對聲明分組，一定要在各個聲明的最後使用分號，這很重要。瀏覽器會忽略樣式表中的空白符。只要加了分號，就可以毫無顧忌地採用以下格式建立樣式<!--將聲明分組在一起：--> h1 {font: 28px Verdana; color: white; background: black;} <!等效於> h1 {font: 28px Verdana;} h1 {color: blue;} h1 {background: red;}h1 { font: 28px Verdana; color: blue; background: red; } <!--如果忽略了第二個分號，用戶代理就會把這個樣式表解釋如下--> h1 { font: 28px Verdana; color: blue background: red; } - 選擇器分組可以與聲明分組結合
派生選擇器
通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
在 CSS1 中，稱爲上下文選擇器 (contextual selectors)，這是由於它們依賴於上下文關係來應用或者避免某項規則。
在 CSS2 中，它們稱爲派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。
通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。
後代選擇器
後代選擇器（descendant selector）又稱爲包含選擇器。後代選擇器可以選擇作爲某元素後代的元素。
語法: 在後代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合符可以解釋爲“... 在 ... 找到”、“... 作爲 ... 的一部分”、“... 作爲 ... 的後代”
<!--只對 h1 元素中的 em 元素應用樣式-->
h1 em {color:red;}子元素選擇器
與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作爲某元素子元素的元素。選擇子元素: 如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素
語法：子選擇器使用了大於號（子結合符）子結合符兩邊可以有空白符，這是可選的。
<!--選擇作爲 h1 元素子元素的所有 strong 元素-->
h1 > strong {color:red;}<!--上面的選擇器會選擇作爲 td 元素子元素的所有 p 元素，這個 td 元素本身從 table 元素繼承-->
<!--該 table 元素有一個包含 company 的 class 屬性。-->
table.company td > p相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。選擇相鄰兄弟: 如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器
例: 如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
<！--選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素-->
h1 + p {margin-top:50px;}註釋： 與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。
相鄰兄弟結合符還可以結合其他結合符：
<!--這個選擇器解釋爲：選擇緊接在 table 元素後出現的所有兄弟 ul 元素-->
<!--該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。-->
html > body table + ul {margin-top:20px;}僞類選擇器
- 語法 selector : pseudo-class {property: value}
- CSS2 xx:first-child 僞類
解釋： 作爲某元素的第一個子元素 xx
例：1. p:first-child 匹配第一個 <p> 元素 匹配作爲任何元素的第一個子元素的 p 元素
<body>
<p>some text</p>
<p>some text</p>
</body>
2. p > i:first-child 匹配所有 <p> 元素中的第一個 <i> 元素
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
| 屬性 | 描述 | |
|---|---|---|
| :active | 向被激活的元素添加樣式。 | 1 |
| :focus | 向擁有鍵盤輸入焦點的元素添加樣式。 | 2 |
| :hover | 當鼠標懸浮在元素上方時，向元素添加樣式。 | 1 |
| :link | 向未被訪問的鏈接添加樣式。 | 1 |
| :visited | 向已被訪問的鏈接添加樣式。 | 1 |
| :first-child | 向元素的第一個子元素添加樣式。 | 2 |
| :lang | 向帶有指定 lang 屬性的元素添加樣式。 | 2 |
僞元素
- 語法： selector:pseudo-element {property:value;}
- CSS 類也可以與僞元素配合使用：
selector.class:pseudo-element {property:value;} 屬性 描述 :first-letter 向文本的第一個字母添加特殊樣式。 1 :first-line 向文本的首行添加特殊樣式。 1 :before 在元素之前添加內容。 2 :after 在元素之後添加內容。 2
---------------------------------------------------
尺寸與框模型
尺寸與邊框
樣式單位
- 百分比%
- 英寸 in
- 釐米 cm
- 毫米 mm
- 磅 pt(1pt=1/72英寸）
- 像素 px（計算機屏幕的一個點）
- 字體的尺寸 em
- 顏色RGB 值 rgb(x,x,x) 十進制[x 0~255]
rgb(x%.x%.x%) 百分比
#rrggbb 十六進制
#rgb 簡寫十六進制
英文單詞 red
尺寸
- width height
- overflow 內容溢出元素框處理
值 描述 visible 默認值。內容不會被修剪，會呈現在元素框之外。 hidden 內容會被修剪，並且其餘內容是不可見的。 scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。 auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。 inherit 規定應該從父元素繼承 overflow 屬性的值。
邊框
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
- 簡寫方式：border：width style color
- 單邊定義：border-top/right/bottom/left:width style color
- 單屬性定義：border-width/style/color
border-top/right/bottom/left-width/style/color 屬性 描述 border 簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。 border-style 用於設置元素所有邊框的樣式，或者單獨地爲各邊設置邊框樣式。 border-width 簡寫屬性，用於爲元素的所有邊框設置寬度，或者單獨地爲各邊邊框設置寬度。 border-color 簡寫屬性，設置元素的所有邊框中可見部分的顏色，或爲 4 個邊分別設置顏色。 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 設置元素的上邊框的寬度。
框模型
概述
屬性
- element : 元素。
padding : 內邊距，也有資料將其翻譯爲填充。
border : 邊框。
margin : 外邊距，也有資料將其翻譯爲空白或空白邊。 - width 和 height 指的是內容區域的寬度和高度。
增加內邊距、邊框和外邊距不會影響內容區域的尺寸，
但是會增加元素框的總尺寸。
內邊距 padding
- 內容與框線之間的距離
- 簡寫方式： padding:top right bottom left padding:10px 10px 10px 10px
padding:top、bottom right、left padding:10px 10px
padding:top、right、bottom、left padding:10px - 單邊設置： padding-top/right/bottom/left
- value: 1.數值 px
2.百分比 百分數值是相對於其父元素的 width 計算的
外邊距
- 與下一個元素之間的空間值
- 簡寫方式： margin:top right bottom left margin:10px 10px 10px 10px
margin:top、bottom right、left margin:10px 10px
margin:top、right、bottom、left margin:10px - 單邊設置： margin-top/right/bottom/left
- margin可取值 auto 由瀏覽器計算外邊距
外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
注：只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。
合併條件：沒有邊框或填充(父元素)
合併情況：
- 當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併
- 當一個元素包含在另一個元素中時（沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併
- 空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起
如果這個外邊距遇到另一個元素的外邊距，它還會發生合併
---------------------------------------------------
背景
背景色
- 使用 background-color 屬性爲元素設置背景色。這個屬性接受任何合法的顏色值
- 可以爲所有元素設置背景色，這包括 body 一直到 em 和 a 等行內元素
背景圖像
- 使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像
- 需要設置一個背景圖像，必須爲這個屬性設置一個 URL 值
selector {background-image: url(/i/eg_bg_03.gif); padding: 20px;} - 背景重複 使用 background-repeat 屬性
值 描述 repeat 默認。背景圖像將在垂直方向和水平方向重複。 repeat-x 背景圖像將在水平方向重複。 repeat-y 背景圖像將在垂直方向重複。 no-repeat 背景圖像將僅顯示一次。 inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
<html>
<head>
<style type="text/css">
body{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>- 背景定位 background-position 屬性改變圖像在背景中的位置
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}| 單一關鍵字 | 等價的關鍵字 |
|---|---|
| center | center center |
| top | top center 或 center top |
| bottom | bottom center 或 center bottom |
| right | right center 或 center right |
| left | left center 或 center left |
| x% y% | 水平 垂直位置百分比 0%0%（左下角） 100% 100%（右下角） |
| x y | 水平垂直位置絕對長度 0 0（左下角） |
- 背景固定 background-attachment 屬性
---------------------------------------------------值 描述 scroll 默認值。背景圖像會隨着頁面其餘部分的滾動而移動。 fixed 當頁面的其餘部分滾動時，背景圖像不會移動。 inherit 規定應該從父元素繼承 background-attachment 屬性的設置。
文本格式化
控制字體
| 屬性 | 描述 |
|---|---|
| font | 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。 |
| font-family | 設置字體系列。 |
| font-size | 設置字體的尺寸。 |
| font-style | 設置字體風格。 italic 斜體/oblique 傾斜/inherit 繼承/normal 默認值 |
| font-variant | 以小型大寫字體或者正常字體顯示文本。 |
| font-weight | 設置字體的粗細。 |
控制文本格式
| 屬性 | 描述 |
|---|---|
| color | 設置文本顏色 value |
| direction | 設置文本方向。 ltr 默認從左到右 rtl 從右到左 inherit 繼承 |
| line-height | 設置行高。 百分比（1-100%） 像素(px)/數值(0-1) |
| letter-spacing | 設置字符間距。 normal 默認 沒有額外的空間 length 定義字符間的固定空間（允許負值） inherit |
| text-align | 對齊元素中的文本。 left/right/center/justify 兩端對齊/inherit |
| text-decoration | 向文本添加修飾。 none 默認 underline 下的一條線 overline 上的一條線 line-through 穿過文本下的一條線/ blink 閃爍的文本 inherit 繼承 |
| text-indent | 縮進元素中文本的首行。 length/%/inherit |
| text-shadow | 設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。 |
| text-transform | 控制元素中的字母。none 默認 capitalize 大寫字母開頭 uppercase 僅有大寫字母 lowercase 僅有小寫字母 inherit 繼承 |
| unicode-bidi | 設置文本方向。 |
| white-space | 設置元素中空白的處理方式。normal 默認。空白會被瀏覽器忽略 pre 空白會被瀏覽器保留。其行爲方式類似 HTML 中的 <pre> 標籤 nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止 pre-wrap 保留空白符序列，但是正常地進行換行 pre-line 合併空白符序列，但是保留換行符 inherit 繼承 |
| word-spacing | 設置字間距。(單詞間) normal/length/inherit |
表格樣式
常用屬性
- 邊距(內邊距) padding td 和 th 元素
- 尺寸 width 和 height 屬性定義表格/單元格的寬度和高度 table th td
- 文本格式化
- 背景
- border
對齊方式
text-align 和 vertical-align 屬性設置表格中文本的對齊方式。
- text-align 水平對齊方式 left right center
- vertical-align 垂直對齊方式 top middle bottom
邊框合併
也叫摺疊邊框 border-collapse 屬性設置是否將表格邊框摺疊爲單一邊框
| 值 | 描述 |
|---|---|
| separate | 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。 |
| collapse | 如果可能，邊框會合併爲一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。 |
| inherit | 規定應該從父元素繼承 border-collapse 屬性的值。 |
邊框邊距
- border-spacing
- 設置分隔單元格邊框的距離
- 僅限於分隔單元邊框 【邊框分離模式】（border-collapse爲separate情況） - 取值： 長度
-一個值： 同事作用於水平垂直距離
- 兩個值： 水平 垂直
table
{
border-collapse:separate;
border-spacing:10px 50px;
}其他屬性
| 屬性 | 描述 |
|---|---|
| border-collapse | 設置是否把表格邊框合併爲單一的邊框。 |
| border-spacing | 設置分隔單元格邊框的距離。 |
| caption-side | 設置表格標題的位置。<caption> top/bottom/inherit |
| empty-cells | 設置是否顯示錶格中的空單元格。 hide/show/inherit |
| table-layout | 設置顯示單元、行和列的算法 autopmatic 默認 由單元格內容設定、fixed 由表格寬度列寬設定、inherit |
---------------------------------------------------
定位
概念
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。
顯示方式
一切皆爲框
- 塊框： div、h1 或 p 元素常常被稱爲塊級元素。這意味着這些元素顯示爲一塊內容
- 行內框： span 和 strong 等元素稱爲“行內元素”，這是因爲它們的內容顯示在行中
- 無名塊框: 但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。
- 把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義爲段落，它也會被當作段落對待在這種情況下，這個框稱爲無名塊框，因爲它不與專門定義的元素相關聯。- 塊級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因爲沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）
改變生成的框的類型: display 屬性設置爲 block，可以讓行內元素（比如 <a> 元素）表現得像塊級元素一樣。
display 設置爲 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不佔用文檔中的空間。
display 屬性
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示爲塊級元素，此元素前後會帶有換行符。 |
| inline | 默認。此元素會被顯示爲內聯元素，元素前後沒有換行符。 |
| inline-block | 行內塊元素。（CSS2.1 新增的值） |
| list-item | 此元素會作爲列表顯示。 |
| run-in | 此元素會根據上下文作爲塊級元素或內聯元素顯示。 |
| table | 此元素會作爲塊級表格來顯示（類似 <table>），表格前後帶有換行符。 |
| inline-table | 此元素會作爲內聯表格來顯示（類似 <table>），表格前後沒有換行符。 |
| table-row-group | 此元素會作爲一個或多個行的分組來顯示（類似 <tbody>）。 |
| table-header-group | 此元素會作爲一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作爲一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作爲一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作爲一個或多個列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作爲一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作爲一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作爲一個表格標題顯示（類似 <caption>） |
| inherit | 規定應該從父元素繼承 display 屬性的值。 |
CSS 定位機制
- CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
- 除非專門指定，否則所有框都在普通流中定位。
- 普通流定位： - 普通流中的元素的位置由元素在 (X)HTML 中的位置決定
- 塊級框從上到下一個接一個地排列：
1.每個塊級元素出現在一個新行中 2.框之間的垂直距離是由框的垂直外邊距計算出來
- 行內框在一行中水平佈置
1. 可以使用水平內邊距、邊框和外邊距調整它們的間距
2.垂直內邊距、邊框和外邊距不影響行內框的高度。
由一行形成的水平框稱爲行框Line Box）行框的高度總是足以容納它包含的所有行內框。設置行高可以增加這個框的高度。
浮動定位
定義
- 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止
- 由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣
- 元素排除在普通流之外
- 浮動元素放於包含框的左邊或者右邊
- 浮動元素依然位於包含框內
浮動情況
不浮動的框
1.當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣
2.當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因爲它不再處於文檔流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
3.所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框
4.如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。
5.如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
float 屬性
| 值 | 描述 |
|---|---|
| left | 元素向左浮動。 |
| right | 元素向右浮動。 |
| none | 默認值。元素不浮動，並會顯示在其在文本中出現的位置。 |
| inherit | 規定應該從父元素繼承 float 屬性的值。 |
clear屬性
- 清楚浮動帶來的影響
- 值 定義那邊不允許出現浮動元素(只對有浮動屬性的元素產生影響)
值 描述 left 在左側不允許浮動元素。 right 在右側不允許浮動元素。 both 在左右兩側均不允許浮動元素。 none 默認值。允許浮動元素出現在兩側。 inherit 規定應該從父元素繼承 clear 屬性的值。 - 行框和清理
阻止行框圍繞浮動框
1.該浮動框框應用 clear 屬性,對行框元素設置浮動屬性
2.該行框元素應用 clear 屬性
3.行框元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
position
position 屬性規定元素的定位類型。
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| fixed | 生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| relative | 生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
| static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
固定定位 fixed
相對於瀏覽器窗口來對元素進行定位。類似於將 position 設置爲 absolute，不過其包含塊是視窗本身。
絕對定位 absolute
相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。- 設置爲絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位,不佔用空間
- 包含塊可能是文檔中的另一個元素或者是初始包含塊
- 元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣
- 元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
注：因爲絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。通過設置 z-index 屬性來控制這些框的堆放次序。
相對定位 relative
它將出現在它所在的位置上。然後，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。- 設置爲相對定位的元素框會偏移某個距離。
- 元素仍然保持其未定位前的形狀
- 原本所佔的空間仍保留。
堆疊順序
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
| 值 | 描述 |
|---|---|
| auto | 默認。堆疊順序與父元素相等。 |
| number | 設置元素的堆疊順序。 |
| inherit | 規定應該從父元素繼承 z-index 屬性的值。 |
---------------------------------------------------
光標
默認光標
- 懸停在鏈接上： 指針-->手
- 懸停在文本區域： 顯示 Ｉ
- 懸停在按鈕上： 顯示箭頭
設置鼠標光標形狀
| 值 | 描述 |
|---|---|
| url | 需使用的自定義光標的 URL。 註釋：請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。 |
| default | 默認光標（通常是一個箭頭） |
| auto | 默認。瀏覽器設置的光標。 |
| crosshair | 光標呈現爲十字線。 |
| pointer | 光標呈現爲指示鏈接的指針（一隻手） |
| move | 此光標指示某對象可被移動。 |
| e-resize | 此光標指示矩形框的邊緣可被向右（東）移動。 |
| ne-resize | 此光標指示矩形框的邊緣可被向上及向右移動（北/東）。 |
| nw-resize | 此光標指示矩形框的邊緣可被向上及向左移動（北/西）。 |
| n-resize | 此光標指示矩形框的邊緣可被向上（北）移動。 |
| se-resize | 此光標指示矩形框的邊緣可被向下及向右移動（南/東）。 |
| sw-resize | 此光標指示矩形框的邊緣可被向下及向左移動（南/西）。 |
| s-resize | 此光標指示矩形框的邊緣可被向下移動（南）。 |
| w-resize | 此光標指示矩形框的邊緣可被向左移動（西）。 |
| text | 此光標指示文本。 |
| wait | 此光標指示程序正忙（通常是一隻表或沙漏）。 |
| help | 此光標指示可用的幫助（通常是一個問號或一個氣球）。 |
---------------------------------------------------
列表樣式
- list-style 在一個聲明中設置所有的列表屬性。
- list-style-image 將圖象設置爲列表項標記。
- list-style-position 設置列表項標記的放置位置。
- list-style-type 設置列表項標記的類型。
list-style
| 值 | 描述 |
|---|---|
| list-style-type | 設置列表項標記的類型。參閱：list-style-type 中可能的值。 |
| list-style-position | 設置在何處放置列表項標記。參閱：list-style-position 中可能的值。 |
| list-style-image | 使用圖像來替換列表項的標記。參閱：list-style-image 中可能的值。 |
| inherit | 規定應該從父元素繼承 list-style 屬性的值。 |
list-style-image
| 值 | 描述 |
|---|---|
| URL | 圖像的路徑。 |
| none | 默認。無圖形被顯示。 |
| inherit | 規定應該從父元素繼承 list-style-image 屬性的值。 |
list-style-position
| 值 | 描述 |
|---|---|
| inside | 列表項目標記放置在文本以內，且環繞文本根據標記對齊。 |
| outside | 默認值。保持標記位於文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。 |
| inherit | 規定應該從父元素繼承 list-style-position 屬性的值。 |
list-style-type
| 值 | 描述 |
|---|---|
| none | 無標記。 |
| disc | 默認。標記是實心圓。 |
| circle | 標記是空心圓。 |
| square | 標記是實心方塊。 |
| decimal | 標記是數字。 |
| decimal-leading-zero | 0開頭的數字標記。(01, 02, 03, 等。) |
| lower-roman | 小寫羅馬數字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大寫羅馬數字(I, II, III, IV, V, 等。) |
| lower-alpha | 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小寫希臘字母(alpha, beta, gamma, 等。) |
| lower-latin | 小寫拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大寫拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 傳統的希伯來編號方式 |
| armenian | 傳統的亞美尼亞編號方式 |
| georgian | 傳統的喬治亞編號方式(an, ban, gan, 等。) |
| cjk-ideographic | 簡單的表意數字 |
| hiragana | 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |