摘要：重疊元素元素的定位與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素屬性指定了一個(gè)元素的堆疊順序哪個(gè)元素應(yīng)該放在前面，或后面一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

元素的默認(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ì)于 html :

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代碼中的元素將被顯示在最前面。

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è)置邊框的顏色

也可以設(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è)值：

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í)依次遞減

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

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

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

字體樣式

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

字體大小

font-size

h1 - h6 表示標(biāo)題和 p 表示段落：

em字體大小

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

em：px/16=em

不同的列表項(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");

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

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

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

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的之前版本必須聲明 !DOCTYPE  ，first-child 才能生效。

匹配所有 p 元素中的第一個(gè) i 元素

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

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

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

CSS - :lang 偽類

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

注意：

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

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

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

CSS display 屬性

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

@keyframes創(chuàng)建動(dòng)畫

@keyframes animationname {keyframes-selector {css-styles;}}

創(chuàng)建動(dòng)畫通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。

在動(dòng)畫過程中，您可以更改CSS樣式的設(shè)定多次。

指定變化使用from、to或%。

0％是開頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。

注意: 

使用animation屬性來(lái)控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫。.

為了獲得最佳的瀏覽器支持，應(yīng)始終定義0％和100％的選擇器。

不同瀏覽器下設(shè)置不同

元素調(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)變形

菜鳥教程示例

框架集標(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 的名稱。
     width： 規(guī)定 iframe 的寬度。
     height ：規(guī)定 iframe 的高度。
     src ：規(guī)定在 iframe 中顯示的文檔的 URL。
     frameborder ： 規(guī)定是否顯示 iframe 周圍的邊框。 (0為無(wú)邊框，1位有邊框)。
     align ： 規(guī)定如何根據(jù)周圍的元素來(lái)對(duì)齊 iframe 。 (left,right,top,middle,bottom)。
     scrolling ： 規(guī)定是否在 iframe 中顯示滾動(dòng)條。 (yes,no,auto)

獲取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