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

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

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

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

　　scrolling

　　yes

　　no

　　auto

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

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

　　3.新增類型屬性

　　新增類型(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)容超過當(dāng)前可顯示的范圍時(shí)，采用什么樣的表現(xiàn)方式

　　屬性值

　　auto

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

　　scroll

　　滾動(dòng)條，當(dāng)內(nèi)容超過元素區(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)在方向已無效

　　visibility

　　visibility：none

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

　　select

　　雙標(biāo)簽

　　語義：下拉菜單

　　屬性

　　selected="selected"

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

　　選項(xiàng)：option

　　代碼

　　子主題 1

　　float

　　語義：說白了就是飄起來

　　屬性

　　left

　　左浮動(dòng)

　　right

　　右浮動(dòng)

　　none

　　不浮動(dòng)

　　特性

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

　　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無法根據(jù)父級(jí)去撐開高度所以我們需要去清除浮動(dòng)讓他重新?lián)伍_高度

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

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

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

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

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

　　應(yīng)用情況

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

　　缺點(diǎn)：父級(jí)浮動(dòng)會(huì)對下一個(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

　　相對定位

　　屬性

　　left

　　right

　　top

　　bottom

　　特性

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

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

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

　　注意

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

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

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

　　absolute

　　絕對定位

　　屬性

　　left

　　right

　　top

　　bottom

　　特性

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

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

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

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

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

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

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

　　fixed

　　固定定位

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

　　z-index

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

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

　　注意：

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

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

　　opacity

　　透明度

　　數(shù)值

　　0—1

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

　　1.position：relative;和position：absolute

　　都可以改變元素在文檔流中的位置，同時(shí)可以激活

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

　　在未激活之前也可以寫出來，但是沒有實(shí)際效果。

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

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

　　Z軸的大小由z-index決定

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

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

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

　　這一層我們稱之為“文檔流”

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

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

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

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

　　但是絕對定位會(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ǔ)類型之外，還可以設(shè)置一些特殊的類型 例如 table、 table-cell、flex

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

　　垂直居中的其他屬性

　　baseline

　　基線對齊

　　top

　　頂部對齊

　　bottom

　　底部對齊

　　middle

　　居中對齊

　　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偽類選擇器

　　：before

　　p:before{}

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

　?。篴fter

　　p：after

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

　?。簄th-child(n)

　　p：nth-child(2)

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

　　：nth-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元素

　?。簂ast-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è)部分的邊緣以外的部分都不可見

　　background-origin

　　決定圖片的原始起始位置

　　值

　　content-box

　　padding-box

　　border-box

　　注意

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

　　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)畫過度

　　transition：all 0.3

　　select

　　雙標(biāo)簽

　　語義：下拉菜單

　　屬性

　　selected="selected"

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

　　選項(xiàng)：option

　　代碼

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

　　注釋：元素可擁有負(fù)的 z-index 屬性值。

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

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

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

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

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