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

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

　　而visibility就會(huì )在加載頁(yè)面的同時(shí)就已經(jīng)把它加載進(jìn)來(lái)了，因為他的值為hidden的時(shí)候，它所占的空間還在。

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

　　scrolling

　　yes

　　no

　　auto

　　規定是否在 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ò)當前可顯示的范圍時(shí)，采用什么樣的表現方式

　　屬性值

　　auto

　　滾動(dòng)條，當內容超過(guò)元素區域的時(shí)候，會(huì )出現滾動(dòng)條

　　scroll

　　滾動(dòng)條，當內容超過(guò)元素區域的時(shí)候，會(huì )出現滾動(dòng)條

　　hidden

　　溢出隱藏

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

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

　　overflow-x:hidden

　　水平方向溢出

　　overflow-y:hidden

　　豎直方向溢出

　　現在方向已無(wú)效

　　visibility

　　visibility：none

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

　　select

　　雙標簽

　　語(yǔ)義：下拉菜單

　　屬性

　　selected="selected"

　　用于控制默認的選項是哪一個(gè)

　　選項：option

　　代碼

　　子主題 1

　　float

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

　　屬性

　　left

　　左浮動(dòng)

　　right

　　右浮動(dòng)

　　none

　　不浮動(dòng)

　　特性

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

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

　　3.使元素脫離文檔流

　　4.提升層級“半級”

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

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

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

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

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

　　應用情況：當已知內部所有子元素的高度

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

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

　　應用情況

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

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

　　3.overflow：hidden

　　注意

　　1.得有寬度

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

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

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

　　不推薦使用

　　4.給父級display：inline-block

　　不使用

　　5.clear

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

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

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

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

　　none：不清除

　　6.在當前標簽后面添加一個(gè)內容

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

　　定位

　　是什么

　　用于固定位置

　　可以做什么

　　1.用于布局

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

　　屬性

　　static

　　默認值，不定位

　　relative

　　相對定位

　　屬性

　　left

　　right

　　top

　　bottom

　　特性

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

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

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

　　注意

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

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

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

　　absolute

　　絕對定位

　　屬性

　　left

　　right

　　top

　　bottom

　　特性

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

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

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

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

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

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

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

　　fixed

　　固定定位

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

　　z-index

　　用于定位層級，具體數值為數字

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

　　注意：

　　1.建議在兄弟標簽中去比較層級

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

　　opacity

　　透明度

　　數值

　　0—1

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

　　1.position：relative;和position：absolute

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

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

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

　　z-index 未設置之前全部是auto

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

　　Z軸的大小由z-index決定

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

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

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

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

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

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

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

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

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

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

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

　　從而影響到其他元素

　　小知識

　　控制光標樣式

　　cursor：

　　move

　　移動(dòng)光標

　　text

　　文本

　　pointer

　　小手

　　自定義圖片

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

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

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

　　文本居中

　　水平居中

　　text-align：center

　　垂直居中 vertical-align：middle

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

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

　　垂直居中的其他屬性

　　baseline

　　基線(xiàn)對齊

　　top

　　頂部對齊

　　bottom

　　底部對齊

　　middle

　　居中對齊

　　css3選擇器

　　同級元素通用選擇器

　　選擇器1~選擇器2{}

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

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

　　相鄰兄弟選擇器

　　選擇器1+選擇器2

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

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

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

　　屬性選擇器

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

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

　　css3偽類(lèi)選擇器

　?。篵efore

　　p:before{}

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

　?。篴fter

　　p：after

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

　?。簄th-child(n)

　　p：nth-child(2)

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

　?。簄th-last-child(n)

　　p：nth-last-child(2)

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

　?。簄th-of-type(n)

　　p：nth-of-type(2)

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

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

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

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

　?。簂ast-child

　　p：last-child

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

　　css3背景屬性

　　新特性

　　透明背景

　　漸變背景

　　背景圓點(diǎn)控制

　　背景剪切控制

　　background-clip

　　將背景圖片做適當的裁剪

　　background-clip指定背景繪制區域

　　值

　　content-box

　　padding-box

　　border-box

　　裁剪方法

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

　　background-origin

　　決定圖片的原始起始位置

　　值

　　content-box

　　padding-box

　　border-box

　　注意

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

　　css3邊框屬性

　　border-radius

　　邊框圓角度

　　示意圖

　　案例

　　box-shadow

　　陰影效果

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

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

　　inset代表內陰影

　　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

　　雙標簽

　　語(yǔ)義：下拉菜單

　　屬性

　　selected="selected"

　　用于控制默認的選項是哪一個(gè)

　　選項：option

　　代碼

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

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

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

　　display:none和visibility:hidden的區別是：

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

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

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