摘要：定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。它的行為就像而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像，它會(huì)固定在目標(biāo)位置。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。

以下內(nèi)容部分轉(zhuǎn)載自菜鳥教程

CSS層疊樣式表(Cascading Style Sheets)

內(nèi)聯(lián)：

內(nèi)嵌：

外部樣式文件：

[object Object]

rel 屬性，規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系。

優(yōu)先級(jí)：

內(nèi)聯(lián)>內(nèi)嵌>外部樣式文件

CSS選擇器

元素選擇器

p{...}

div{...}

類選擇器

.class{...}

ID選擇器

#id{}

設(shè)置全局樣式

body{
    ...
}

CSS Position(定位與布局

position 屬性的五個(gè)值：

static

relative

fixed

absolute

sticky

必須先設(shè)定position才能設(shè)置元素定位

static

元素的默認(rèn)值，沒有定位，遵循正常的文檔流對(duì)象。

靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。

fixed 定位

元素的位置相對(duì)于瀏覽器窗口是固定位置。

即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)。

注意：

Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。

Fixed定位的元素和其他元素重疊。

relative 定位

相對(duì)定位元素的定位是相對(duì)其正常位置。

移動(dòng)相對(duì)定位元素，但它原本所占的空間不會(huì)改變。

相對(duì)定位元素經(jīng)常被用來(lái)作為絕對(duì)定位元素的容器塊。

absolute 定位

絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于:

absolute 定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。

absolute 定位的元素和其他元素重疊。

sticky 定位

sticky 粘性定位。

position: sticky; 基于用戶的滾動(dòng)位置來(lái)定位。

粘性定位的元素是依賴于用戶的滾動(dòng)，在 position:relative 與 position:fixed 定位之間切換。

它的行為就像 position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像 position:fixed;，它會(huì)固定在目標(biāo)位置。

元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。

這個(gè)特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。

注意:

 Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。

重疊元素

z-index

元素的定位與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素

z-index屬性指定了一個(gè)元素的堆疊順序（哪個(gè)元素應(yīng)該放在前面，或后面）

一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序：

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

注意： 

如果兩個(gè)定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

CSS邊框

border-style 值:

none: 默認(rèn)無(wú)邊框

dotted: 點(diǎn)線邊框

dashed: 虛線邊框

solid: 實(shí)線邊框

double: 兩個(gè)邊框。 兩個(gè)邊框的寬度和 border-width 的值相同

groove: 3D溝槽邊框（凹槽邊框）。效果取決于邊框的顏色值

ridge: 3D脊邊框（壟狀邊框）。效果取決于邊框的顏色值

inset:3D的嵌入邊框。效果取決于邊框的顏色值

outset: 3D突出邊框。 效果取決于邊框的顏色值

hidden:隱藏邊框

邊框?qū)挾?/p>

border-width

為邊框指定寬度有兩種方法：可以指定長(zhǎng)度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用關(guān)鍵字thick 、medium（默認(rèn)值） 和 thin。

注意：

"border-width" 屬性 如果多帶帶使用則不起作用。要先使用 "border-style" 屬性來(lái)設(shè)置邊框。

CSS 沒有定義 3 個(gè)關(guān)鍵字的具體寬度，所以一個(gè)用戶可能把 thick 、medium 和 thin 分別設(shè)置為等于 5px、3px 和 2px，而另一個(gè)用戶則分別設(shè)置為 3px、2px 和 1px。

邊框顏色

border-color屬性設(shè)置邊框的顏色

• name - 指定顏色的名稱，如 "red"
• RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
• Hex - 指定16進(jìn)制值, 如 "#ff0000"

也可以設(shè)置邊框的顏色為"transparent"。

注意： border-color多帶帶使用是不起作用的，必須得先使用border-style來(lái)設(shè)置邊框樣式。

邊框-多帶帶設(shè)置各邊

p {

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

border-style屬性可以有1-4個(gè)值：

• border-style:dotted solid double dashed;
  • 上邊框是 dotted
  • 右邊框是 solid
  • 底邊框是 double
  • 左邊框是 dashed
• border-style:dotted solid double;
  • 上邊框是 dotted
  • 左、右邊框是 solid
  • 底邊框是 double
• border-style:dotted solid;
  • 上、底邊框是 dotted
  • 右、左邊框是 solid
• border-style:dotted;
  • 四面邊框是 dotted

邊框-簡(jiǎn)寫屬性

border:5px solid red;

CSS背景

定義HTML元素的背景。

background-color

background-image

background-repeat

background-attachment

background-position

背景顏色

background-color

顏色值定義:

十六進(jìn)制 - 如："#ff0000"

RGB - 如："rgb(255,0,0)"

顏色名稱 - 如："red"

背景圖像

background-image

默認(rèn)圖像平鋪重復(fù)顯示，以覆蓋整個(gè)元素實(shí)體.

頁(yè)面背景圖片設(shè)置實(shí)例:

水平方向平鋪 repeat-x

背景圖像- 設(shè)置定位與不平鋪

讓背景圖像不影響文本的排版

background-repeat

背景圖像-定位

background-position

背景- 簡(jiǎn)寫屬性

background：

body {background:#ffffff url(img_tree.png) no-repeat right top;}

屬性值的順序?yàn)椋?/p>

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

以上屬性無(wú)需全部使用，按照頁(yè)面的實(shí)際需要使用.

字體、文本屬性：

文本顏色

color

文本的對(duì)齊方式

text-align：

left 左對(duì)齊

right 右對(duì)齊

center 文本居中

justify 每一行展開寬度相等，左，右外邊距是對(duì)齊（如雜志和報(bào)紙）。

文本修飾

text-decoration

text-decoration:none刪除文本修飾

text-decoration:overline上劃線

text-decoration:line-through 中劃線

text-decoration:underline下劃線

文本轉(zhuǎn)換

text-transform:uppercase設(shè)置文本全大寫

text-transform:lowercase設(shè)置文本全小寫

text-transform:capitalize設(shè)置文本首字母大寫

文本縮進(jìn)

text-indent:10px設(shè)置文本首行縮進(jìn)

文本行高

line-height

文本間距

word-spacing單詞間距

letter-spacing字母間距

字體設(shè)置

font-family可以設(shè)置多個(gè)，由用戶使用的瀏覽器進(jìn)行識(shí)別，優(yōu)先級(jí)依次遞減

注意: 如果字體的名稱超過(guò)一個(gè)字，必須用引號(hào)

多個(gè)字體系列是用一個(gè)逗號(hào)分隔指明：

font-family:"Times New Roman", Times, serif

字體樣式

font-style:normal正常樣式
font-style:italic斜體

字體大小

font-size

-

表示標(biāo)題和

表示段落：

---

em字體大小

1em在瀏覽器中默認(rèn)的文字大小是16px。

em：px/16=em

---

 

CSS 列表

不同的列表項(xiàng)標(biāo)記

list-style-type:

circle空心圓點(diǎn)

disc實(shí)心圓點(diǎn)

square方形

decimal十進(jìn)制數(shù)字

decimal-leading-zero十進(jìn)制數(shù)字前置0

greek希臘語(yǔ)

armenian亞美尼亞語(yǔ)

cjk-ideographic中文大寫數(shù)字

georgian喬治亞風(fēng)格

hebrew猶太風(fēng)格

hiragana日語(yǔ)-平假名

katakana-iroha日語(yǔ)-片假名

lower-alpha小寫阿拉伯語(yǔ)

upper-alpha大寫阿拉伯語(yǔ)

lower-roman小寫羅馬語(yǔ)

upper-roman大寫羅馬語(yǔ)

lower-greek小寫希臘語(yǔ)

latin拉丁語(yǔ)

upper-latin大寫拉丁語(yǔ)

lower-latin小寫拉丁語(yǔ)

none無(wú)

作為列表項(xiàng)標(biāo)記的圖像

 list-style-image: url

簡(jiǎn)寫屬性

list-style: square url("sqpurple.gif");

• list-style-type
• list-style-position (有關(guān)說(shuō)明，請(qǐng)參見下面的CSS屬性表)
• list-style-image

上述值丟失任意個(gè)，其余仍在指定的順序，就沒關(guān)系。

CSS表格

表格邊框

border

折疊邊框

border-collapse

表格寬度和高度

table { width:100%; }

th,td { height:50px; }

表格文字對(duì)齊

text-align文本對(duì)齊

vertical-align垂直對(duì)齊

表格填充

padding

表格顏色

偽類(Pseudo-classes)

anchor偽類

a:link {color:#FF0000;} /* 未訪問的鏈接 */

a:visited {color:#00FF00;} /* 已訪問的鏈接 */

a:hover {color:#FF00FF;} /* 鼠標(biāo)劃過(guò)鏈接 */

a:active {color:#0000FF;} /* 已選中的鏈接 */

注意：

在CSS定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

偽類的名稱不區(qū)分大小寫。

first-child 偽類

first-child 偽類選擇父元素的第一個(gè)子元素。

p:first-child { color:blue; }

注意：

在IE8的之前版本必須聲明 ，first-child 才能生效。

匹配所有

元素中的第一個(gè)  元素

p > i:first-child { color:blue; }

匹配所有作為第一個(gè)子元素的

元素中的所有  元素

p:first-child i { color:blue; }

CSS - :lang 偽類

:lang 偽類為不同的語(yǔ)言定義特殊的規(guī)則

注意：

IE8必須聲明才能支持;lang偽類。

:lang 類為屬性值為 no 的q元素定義引號(hào)的類型：

q:lang(no) {quotes: "~" "~";}

補(bǔ)充（雜項(xiàng)）：

CSS display 屬性

規(guī)定元素應(yīng)該生成的框的類型。

值	描述
none	此元素不會(huì)被顯示。
block	此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
inline	默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
inline-block	行內(nèi)塊元素。（CSS2.1 新增的值）
list-item	此元素會(huì)作為列表顯示。
run-in	此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
compact	CSS 中有值 compact，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
table	此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 ），表格前后帶有換行符。 inline-table 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 ），表格前后沒有換行符。）。）。）。）。）。） table-row-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 table-header-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 table-footer-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 table-row 此元素會(huì)作為一個(gè)表格行顯示（類似 table-column-group 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 table-column 此元素會(huì)作為一個(gè)單元格列顯示（類似 table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類似 和 ） table-caption 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 ） inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。       特殊效果（不定時(shí)更新） @keyframes創(chuàng)建動(dòng)畫 @keyframes animationname {keyframes-selector {css-styles;}} 創(chuàng)建動(dòng)畫通過(guò)逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。 在動(dòng)畫過(guò)程中，您可以更改CSS樣式的設(shè)定多次。 指定變化使用from、to或%。 0％是開頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。 注意:  使用animation屬性來(lái)控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫。. 為了獲得最佳的瀏覽器支持，應(yīng)始終定義0％和100％的選擇器。   不同瀏覽器下設(shè)置不同 @keyframes name /*通用*/ { from {top:0px;} to {top:200px;} } @-moz-keyframes name /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes name /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } @-o-keyframes name /* Opera */ { from {top:0px;} to {top:200px;} } 元素調(diào)用{ animation:name 5s infinite; -moz-animation:name time infinite; /* Firefox */ -webkit-animation:name 5s infinite; /* Safari and Chrome */ -o-animation:name 5s infinite; /* Opera */ }     transform元素旋轉(zhuǎn)變形 none 定義不進(jìn)行轉(zhuǎn)換。 matrix(n,n,n,n,n,n) 定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。 translate(x,y) 定義 2D 轉(zhuǎn)換。 translate3d(x,y,z) 定義 3D 轉(zhuǎn)換。 translateX(x) 定義轉(zhuǎn)換，只是用 X 軸的值。 translateY(y) 定義轉(zhuǎn)換，只是用 Y 軸的值。 translateZ(z) 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。 scale(x[,y]?) 定義 2D 縮放轉(zhuǎn)換。 scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換。 scaleX(x) 通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。 scaleY(y) 通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。 scaleZ(z) 通過(guò)設(shè)置 Z 軸的值來(lái)定義 3D 縮放轉(zhuǎn)換。 rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。 rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。 rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。 rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。 rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。 skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。 skewX(angle) 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。 skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。 perspective(n) 為 3D 轉(zhuǎn)換元素定義透視視圖。 菜鳥教程示例     框架集標(biāo)簽 frameset 框架 frame： frameset定義一些列行或列         rows/cols的值規(guī)定了每行每列占據(jù)屏幕的面積         cols：列         rows：行 <html><head><frameset cols="25%,50%,25%">  <frame src="/example/html/frame_a.html">  <frame src="/example/html/frame_b.html">  <frame src="/example/html/frame_c.html"> frameset>head><body>body>html>   常用屬性     noresize: 規(guī)定無(wú)法調(diào)整框架的大小     frameborder: 規(guī)定是否顯示框架周圍的邊框 0為無(wú)邊框 1為有     marginheight: 定義框架的上方和下方的邊距     marginwidth: 定義框架的左側(cè)和右側(cè)的邊距     noresize: 規(guī)定無(wú)法調(diào)整框架的大小     scrolling: 規(guī)定是否在框架中顯示滾動(dòng)條 yes no auto     src:      規(guī)定在框架中顯示的文檔的 URL cols: 定義框架集中列的數(shù)目和尺寸     rows: 定義框架集中行的數(shù)目和尺寸   內(nèi)聯(lián)框架： iframe iframe 元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架。 iframe 常用屬性： 　　 name ：  規(guī)定 獲取iframe內(nèi)容 　　var iframe = document.getElementById("myrame"); //獲取iframe標(biāo)簽 　　var iwindow = iframe.contentWindow; //獲取iframe的window對(duì)象 　　var idoc = iwindow.document; //獲取iframe的document對(duì)象 　　console.log(idoc.documentElement); //獲取iframe的html