免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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

2016-11-09    分類: 網(wǎng)站建設(shè)

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

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

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

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

scrolling

yes

no

auto

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

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ì)對(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ì)元素本身沒有任何影響(配合絕對(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)容去撐開寬高

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

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

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

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

fixed

固定定位

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

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

都可以改變?cè)卦谖臋n流中的位置,同時(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類型,長(zhǎng)和寬以及內(nèi)邊距

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

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

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

也就是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ǔ)類型之外,還可以設(shè)置一些特殊的類型 例如 table、table-cell、flex

我們可以修改他們的類型,讓我們的標(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偽類選擇器

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

background-origin

決定圖片的原始起始位置

content-box

padding-box

border-box

注意

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

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

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

分享文章:html5基礎(chǔ)知識(shí)點(diǎn)總結(jié)
分享地址:http://m.newbst.com/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)容(圖片、視頻和文字)以用戶投稿、用戶轉(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í)需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作