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

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

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

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

　　scrolling

　　yes

　　no

　　auto

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

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

　　3.新增類型屬性

　　新增類型(type屬性)

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

　　浮動、定位、overflow

　　overflow

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

　　屬性值

　　auto

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

　　scroll

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

　　hidden

　　溢出隱藏

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

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

　　overflow-x:hidden

　　水平方向溢出

　　overflow-y:hidden

　　豎直方向溢出

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

　　visibility

　　visibility：none

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

　　select

　　雙標(biāo)簽

　　語義：下拉菜單

　　屬性

　　selected="selected"

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

　　選項(xiàng)：option

　　代碼

　　子主題 1

　　float

　　語義：說白了就是飄起來

　　屬性

　　left

　　左浮動

　　right

　　右浮動

　　none

　　不浮動

　　特性

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

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

　　3.使元素脫離文檔流

　　4.提升層級“半級”

　　5.浮動元素碰到父級元素或者其他浮動元素邊界就會停

　　清除浮動的原因

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

　　清除浮動的方法

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

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

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

　　2.給父級設(shè)置浮動(不推薦使用)

　　應(yīng)用情況

　　確定父級浮動不會對下一個產(chǎn)生影響

　　缺點(diǎn)：父級浮動會對下一個產(chǎn)生影響

　　3.overflow：hidden

　　注意

　　1.得有寬度

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

　　3.超出部分會直接隱藏

　　很多時候都會直接用這種方法

　　不推薦使用

　　4.給父級display：inline-block

　　不使用

　　5.clear

　　left：清除左浮動

　　right：清除右浮動

　　both：同時清除左右浮動

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

　　none：不清除

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

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

　　定位

　　是什么

　　用于固定位置

　　可以做什么

　　1.用于布局

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

　　屬性

　　static

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

　　relative

　　相對定位

　　屬性

　　left

　　right

　　top

　　bottom

　　特性

　　1.不會使元素脫離本身的文檔流，元素的位置移動之后，原始的位置會保留

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

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

　　注意

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

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

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

　　absolute

　　絕對定位

　　屬性

　　left

　　right

　　top

　　bottom

　　特性

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

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

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

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

　　不會繼承父級寬高

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

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

　　fixed

　　固定定位

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

　　z-index

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

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

　　注意：

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

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

　　opacity

　　透明度

　　數(shù)值

　　0—1

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

　　1.position：relative;和position：absolute

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

　　top，right，bottom，left這四個屬性。

　　在未激活之前也可以寫出來，但是沒有實(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è)置了絕對定位和浮動后，我們的元素會“浮”起來

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

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

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

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

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

　　折一層，可是會改變正常的文檔流

　　從而影響到其他元素

　　小知識

　　控制光標(biāo)樣式

　　cursor：

　　move

　　移動光標(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選擇器

　　同級元素通用選擇器

　　選擇器1~選擇器2{}

　　匹配任何在元素1之后的同級元素2

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

　　相鄰兄弟選擇器

　　選擇器1+選擇器2

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

　　注意：兩個元素必須緊挨著

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

　　屬性選擇器

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

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

　　css3偽類選擇器

　　：before

　　p:before{}

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

　　：after

　　p：after

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

　?。簄th-child(n)

　　p：nth-child(2)

　　選擇屬于其父元素的第二個子元素的p元素

　　：nth-last-child(n)

　　p：nth-last-child(2)

　　選擇屬于其父元素的第二個子元素的p元素

　　：nth-of-type(n)

　　p：nth-of-type(2)

　　選擇屬于其父元素的第二個p元素

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

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

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

　?。簂ast-child

　　p：last-child

　　選擇屬于其父級的最后一個p元素

　　css3背景屬性

　　新特性

　　透明背景

　　漸變背景

　　背景圓點(diǎn)控制

　　背景剪切控制

　　background-clip

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

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

　　值

　　content-box

　　padding-box

　　border-box

　　裁剪方法

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

　　background-origin

　　決定圖片的原始起始位置

　　值

　　content-box

　　padding-box

　　border-box

　　注意

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

　　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

　　動畫過度

　　transition：all 0.3

　　select

　　雙標(biāo)簽

　　語義：下拉菜單

　　屬性

　　selected="selected"

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

　　選項(xiàng)：option

　　代碼

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

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

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

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

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

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

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