display:none 不為被隱藏的對(duì)象保留其物理空間 visibility：hidden 為被隱藏的對(duì)象保留其物理空間

　　也就是display:;當(dāng)他的值變成block 的時(shí)候，它所在的結(jié)構(gòu)才會(huì)被加載進(jìn)來(lái)。

　　而visibility就會(huì)在加載頁(yè)面的同時(shí)就已經(jīng)把它加載進(jìn)來(lái)了，因?yàn)樗闹禐閔idden的時(shí)候，它所占的空間還在。

　　2、不再使用frame框架，由于框架對(duì)網(wǎng)頁(yè)可用性存在負(fù)面影響。所以廢除。只可以用iFrame 或， 用服務(wù)器方，在同一個(gè)頁(yè)面加載不同頁(yè)面。

　　scrolling

　　yes

　　no

　　auto

　　規(guī)定是否在 iframe 中顯示滾動(dòng)條。

　　<iFrame scrolling=“yes” frameborder=“0” ></iFrame>

　　3.新增類(lèi)型屬性

　　新增類(lèi)型(type屬性)

　　Search Tel url Email Number Range Color date pickers (date, month, week, time, datetime, datetime-local)

　　浮動(dòng)、定位、overflow

　　overflow

　　用于規(guī)定當(dāng)內(nèi)容超過(guò)當(dāng)前可顯示的范圍時(shí)，采用什么樣的表現(xiàn)方式

　　屬性值

　　auto

　　滾動(dòng)條，當(dāng)內(nèi)容超過(guò)元素區(qū)域的時(shí)候，會(huì)出現(xiàn)滾動(dòng)條

　　scroll

　　滾動(dòng)條，當(dāng)內(nèi)容超過(guò)元素區(qū)域的時(shí)候，會(huì)出現(xiàn)滾動(dòng)條

　　hidden

　　溢出隱藏

　　overflow在某些瀏覽器中，滾動(dòng)條的顯示偶爾會(huì)發(fā)生錯(cuò)誤，將滾動(dòng)條的寬度在內(nèi)容中減去，

　　例如：原本寬高是300x300 出現(xiàn)錯(cuò)誤后，會(huì)自動(dòng)減少17px的滾動(dòng)條位置內(nèi)容內(nèi)容會(huì)變成283*283

　　overflow-x:hidden

　　水平方向溢出

　　overflow-y:hidden

　　豎直方向溢出

　　現(xiàn)在方向已無(wú)效

　　visibility

　　visibility：none

　　讓元素消失，但是還在原本位置上還占據(jù)位置

　　select

　　雙標(biāo)簽

　　語(yǔ)義：下拉菜單

　　屬性

　　selected="selected"

　　用于控制默認(rèn)的選項(xiàng)是哪一個(gè)

　　選項(xiàng)：option

　　代碼

　　子主題 1

　　float

　　語(yǔ)義：說(shuō)白了就是飄起來(lái)

　　屬性

　　left

　　左浮動(dòng)

　　right

　　右浮動(dòng)

　　none

　　不浮動(dòng)

　　特性

　　1.如果說(shuō)沒(méi)有寬度，浮動(dòng)元素的內(nèi)容會(huì)去撐開(kāi)寬度，并且排列在同一排

　　2.會(huì)使浮動(dòng)元素支持所有的css樣式(內(nèi)聯(lián)元素本不支持寬高，浮動(dòng)之后支持寬高)

　　3.使元素脫離文檔流

　　4.提升層級(jí)“半級(jí)”

　　5.浮動(dòng)元素碰到父級(jí)元素或者其他浮動(dòng)元素邊界就會(huì)停

　　清除浮動(dòng)的原因

　　因?yàn)樵O(shè)置了浮動(dòng)，外層div無(wú)法根據(jù)父級(jí)去撐開(kāi)高度所以我們需要去清除浮動(dòng)讓他重新?lián)伍_(kāi)高度

　　清除浮動(dòng)的方法

　　1.給父級(jí)重新設(shè)置可以容納子集的高度(不推薦使用，拓展性差)

　　應(yīng)用情況：當(dāng)已知內(nèi)部所有子元素的高度

　　缺點(diǎn)：拓展性差

　　2.給父級(jí)設(shè)置浮動(dòng)(不推薦使用)

　　應(yīng)用情況

　　確定父級(jí)浮動(dòng)不會(huì)對(duì)下一個(gè)產(chǎn)生影響

　　缺點(diǎn)：父級(jí)浮動(dòng)會(huì)對(duì)下一個(gè)產(chǎn)生影響

　　3.overflow：hidden

　　注意

　　1.得有寬度

　　2.低版本瀏覽器中不支持overflow

　　3.超出部分會(huì)直接隱藏

　　很多時(shí)候都會(huì)直接用這種方法

　　不推薦使用

　　4.給父級(jí)display：inline-block

　　不使用

　　5.clear

　　left：清除左浮動(dòng)

　　right：清除右浮動(dòng)

　　both：同時(shí)清除左右浮動(dòng)

　　每一次都需要找到當(dāng)前浮動(dòng)元素產(chǎn)生影響的哪一個(gè)元素

　　none：不清除

　　6.在當(dāng)前標(biāo)簽后面添加一個(gè)內(nèi)容

　　使用情況比較多，用于設(shè)置給內(nèi)部浮動(dòng)元素的父級(jí)

　　定位

　　是什么

　　用于固定位置

　　可以做什么

　　1.用于布局

　　2.實(shí)線懸浮廣告

　　屬性

　　static

　　默認(rèn)值，不定位

　　relative

　　相對(duì)定位

　　屬性

　　left

　　right

　　top

　　bottom

　　特性

　　1.不會(huì)使元素脫離本身的文檔流，元素的位置移動(dòng)之后，原始的位置會(huì)保留

　　2.相對(duì)定位不會(huì)影響元素本身的特性

　　3.如果不去設(shè)置偏移數(shù)值，則對(duì)元素本身沒(méi)有任何影響(配合絕對(duì)定位使用)

　　注意

　　1.當(dāng)同時(shí)設(shè)置top和bottom的時(shí)候，top會(huì)生效

　　2.當(dāng)同時(shí)設(shè)置left和right 的時(shí)候，left會(huì)生效

　　3.相對(duì)定位是參考于自身原始的位置

　　absolute

　　絕對(duì)定位

　　屬性

　　left

　　right

　　top

　　bottom

　　特性

　　1.使元素完全脫離文檔流

　　2.使內(nèi)聯(lián)元素完全支持寬高

　　3.使塊元素內(nèi)容去撐開(kāi)寬高

　　塊元素默認(rèn)繼承父級(jí)寬度，當(dāng)設(shè)置絕對(duì)定位之后，使塊元素內(nèi)容去撐開(kāi)寬高

　　不會(huì)繼承父級(jí)寬高

　　4.絕對(duì)定位元素的位移是參考于離他最近，設(shè)置了定位的父級(jí)(除去static)

　　先看其父級(jí)有無(wú)設(shè)定位，如果設(shè)定位就相對(duì)于這個(gè)父級(jí)，如果這個(gè)父級(jí)沒(méi)有設(shè)置，就繼續(xù)往上找父級(jí)的父級(jí)，直到找到設(shè)置定位的父級(jí)，參考其進(jìn)行定位

　　fixed

　　固定定位

　　幾乎和絕對(duì)定位一模一樣，跟絕對(duì)定位有不一樣的地方，固定定位參考的一直都是瀏覽器位

　　z-index

　　用于定位層級(jí)，具體數(shù)值為數(shù)字

　　可以通過(guò)設(shè)置z-index去更改他們的層級(jí)關(guān)系

　　注意：

　　1.建議在兄弟標(biāo)簽中去比較層級(jí)

　　2.建議大家不要設(shè)置 負(fù)數(shù)(只能看，不能點(diǎn)擊)

　　opacity

　　透明度

　　數(shù)值

　　0—1

　　關(guān)于定位和浮動(dòng)的解釋說(shuō)明

　　1.position：relative;和position：absolute

　　都可以改變?cè)卦谖臋n流中的位置，同時(shí)可以激活

　　top，right，bottom，left這四個(gè)屬性。

　　在未激活之前也可以寫(xiě)出來(lái)，但是沒(méi)有實(shí)際效果。

　　z-index 未設(shè)置之前全部是auto

　　2.網(wǎng)頁(yè)看起來(lái)是二維結(jié)構(gòu)，但實(shí)際上是存在Z軸的，

　　Z軸的大小由z-index決定

　　默認(rèn)情況下，所有的元素全部處于 z-index=0

　　這一層，元素根據(jù)自己的display類(lèi)型，長(zhǎng)和寬以及內(nèi)邊距

　　等屬性來(lái)決定如何排列在z-index為0的這一層。

　　這一層我們稱(chēng)之為“文檔流”

　　3.設(shè)置了絕對(duì)定位和浮動(dòng)后，我們的元素會(huì)“浮”起來(lái)

　　也就是z-index大于0，他會(huì)改變正常狀態(tài)下的文檔流，但是

　　相對(duì)定位會(huì)改變自己在z-index中的位置，雖然偏離了原本的位置，

　　可是還是存在于文檔流中的

　　但是絕對(duì)定位會(huì)使元素完全脫離文檔流，不在z-index=0中

　　4.而我們的浮動(dòng)元素不會(huì)讓元素“上浮”到另一層，他依然在z-index=0

　　折一層，可是會(huì)改變正常的文檔流

　　從而影響到其他元素

　　小知識(shí)

　　控制光標(biāo)樣式

　　cursor：

　　move

　　移動(dòng)光標(biāo)

　　text

　　文本

　　pointer

　　小手

　　自定義圖片

　　1.url(“路徑”)，備選項(xiàng)

　　2.圖片格式最好為cur格式，其他圖片有兼容性

　　3.圖片尺寸必須小于64*64

　　文本居中

　　水平居中

　　text-align：center

　　垂直居中 vertical-align：middle

　　display除了可以設(shè)置inline-block和inline和block這三種基礎(chǔ)類(lèi)型之外，還可以設(shè)置一些特殊的類(lèi)型 例如 table、 table-cell、flex

　　我們可以修改他們的類(lèi)型，讓我們的標(biāo)簽具有他們的某些特征 垂直對(duì)齊方式

　　垂直居中的其他屬性

　　baseline

　　基線對(duì)齊

　　top

　　頂部對(duì)齊

　　bottom

　　底部對(duì)齊

　　middle

　　居中對(duì)齊

　　css3選擇器

　　同級(jí)元素通用選擇器

　　選擇器1~選擇器2{}

　　匹配任何在元素1之后的同級(jí)元素2

　　例如：p~ul{background：red;}匹配任何在p元素之后的同級(jí)ul元素

　　相鄰兄弟選擇器

　　選擇器1+選擇器2

　　可選擇緊接在另一個(gè)元素之后的元素，且二者有相同的父元素

　　注意：兩個(gè)元素必須緊挨著

　　例如：h1+p{ };選擇緊跟在h1之后p元素，中間不可以有其他標(biāo)簽元素

　　屬性選擇器

　　[target] 選擇具有target的屬性的所有屬性

　　[target=_blank] 選擇帶有target=“_blank”的屬性的所有元素

　　css3偽類(lèi)選擇器

　?。篵efore

　　p:before{}

　　在每個(gè)p元素之前插入內(nèi)容

　?。篴fter

　　p：after

　　在每個(gè)p元素之后插入內(nèi)容

　?。簄th-child(n)

　　p：nth-child(2)

　　選擇屬于其父元素的第二個(gè)子元素的p元素

　?。簄th-last-child(n)

　　p：nth-last-child(2)

　　選擇屬于其父元素的第二個(gè)子元素的p元素

　　：nth-of-type(n)

　　p：nth-of-type(2)

　　選擇屬于其父元素的第二個(gè)p元素

　?。簄th-last-of-type(n)

　　p：nth-last-of-type(2)

　　選擇屬于其父元素的倒數(shù)第二個(gè)p元素

　　：last-child

　　p：last-child

　　選擇屬于其父級(jí)的最后一個(gè)p元素

　　css3背景屬性

　　新特性

　　透明背景

　　漸變背景

　　背景圓點(diǎn)控制

　　背景剪切控制

　　background-clip

　　將背景圖片做適當(dāng)?shù)牟眉?/span>

　　background-clip指定背景繪制區(qū)域

　　值

　　content-box

　　padding-box

　　border-box

　　裁剪方法

　　根據(jù)設(shè)置的分支部分，圖片在這個(gè)部分的邊緣以外的部分都不可見(jiàn)

　　background-origin

　　決定圖片的原始起始位置

　　值

　　content-box

　　padding-box

　　border-box

　　注意

　　如果背景圖片backgrond-attachment是固定，這個(gè)值沒(méi)有任何效果

　　css3邊框?qū)傩?/span>

　　border-radius

　　邊框圓角度

　　示意圖

　　案例

　　box-shadow

　　陰影效果

　　box-shadow: 10px 20px 30px #000;

　　box-shadow:inset 0px 0px 100px #000;

　　inset代表內(nèi)陰影

　　10px;橫向偏移量

　　20px;縱向偏移量

　　30px;模糊程度

　　#000;陰影顏色

　　text-shadow

　　文字陰影

　　text-shadow: 10px 20px 30px #000;

　　transform

　　transform:translate(100px,100px)

　　位移

　　transform:(1.5)

　　縮放

　　transition

　　動(dòng)畫(huà)過(guò)度

　　transition：all 0.3

　　select

　　雙標(biāo)簽

　　語(yǔ)義：下拉菜單

　　屬性

　　selected="selected"

　　用于控制默認(rèn)的選項(xiàng)是哪一個(gè)

　　選項(xiàng)：option

　　代碼

　　z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。

　　注釋?zhuān)涸乜蓳碛胸?fù)的 z-index 屬性值。

　　做了一個(gè)tab導(dǎo)航欄，點(diǎn)擊一個(gè)tab頁(yè)其它tab頁(yè)隱藏，這時(shí)候第一想法是使用display：none來(lái)控制顯示隱藏，寫(xiě)了之后發(fā)現(xiàn)使用display會(huì)有一個(gè)問(wèn)題，就是第二個(gè)tab頁(yè)的輪播圖是在頁(yè)面渲染時(shí)獲取第二個(gè)tab頁(yè)中某個(gè)元素的寬度來(lái)做自適應(yīng)效果，因?yàn)橐呀?jīng)隱藏，寬度為0，所以導(dǎo)致輪播圖的高度也為0，后來(lái)把display:none改為visibility：hidden就正常顯示和播放了。

　　display:none和visibility:hidden的區(qū)別是：

　　1.display:none是徹底消失，不在文檔流中占位，瀏覽器也不會(huì)解析該元素;visibility:hidden是視覺(jué)上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會(huì)解析該元素;

　　2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時(shí)visibility，頁(yè)面產(chǎn)生回流(當(dāng)頁(yè)面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁(yè)面重新構(gòu)建，此時(shí)就是回流。所有頁(yè)面第一次加載時(shí)需要產(chǎn)生一次回流)，而visibility切換是否顯示時(shí)則不會(huì)引起回流。

　　所以我使用visibility:hidden，在頁(yè)面渲染時(shí)第二個(gè)tab頁(yè)中的輪播圖就可以獲取寬度做自適應(yīng)了。