html5基礎(chǔ)知識(shí)點(diǎn)總結(jié)

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)條。

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)選擇器

：before

p:before{}

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

：after

p：after

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

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

：nth-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ù)牟眉?/p>

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ū)傩?/p>

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)了。

分享文章：html5基礎(chǔ)知識(shí)點(diǎn)總結(jié)
分享地址：http://www.muchs.cn/news/64740.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、動(dòng)態(tài)網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)