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

也就是display:;當他的值變成block 的時候，它所在的結構才會被加載進來。

而visibility就會在加載頁面的同時就已經把它加載進來了，因為他的值為hidden的時候，它所占的空間還在。

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

scrolling

yes

no

auto

規定是否在 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

用于規定當內容超過當前可顯示的范圍時，采用什么樣的表現方式

屬性值

auto

滾動條，當內容超過元素區域的時候，會出現滾動條

scroll

滾動條，當內容超過元素區域的時候，會出現滾動條

hidden

溢出隱藏

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

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

overflow-x:hidden

水平方向溢出

overflow-y:hidden

豎直方向溢出

現在方向已無效

visibility

visibility：none

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

select

雙標簽

語義：下拉菜單

屬性

selected="selected"

用于控制默認的選項是哪一個

選項：option

代碼

子主題 1

float

語義：說白了就是飄起來

屬性

left

左浮動

right

右浮動

none

不浮動

特性

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

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

3.使元素脫離文檔流

4.提升層級半級”

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

清除浮動的原因

因為設置了浮動，外層div無法根據父級去撐開高度所以我們需要去清除浮動讓他重新撐開高度

清除浮動的方法

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

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

缺點：拓展性差

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

應用情況

確定父級浮動不會對下一個產生影響

缺點：父級浮動會對下一個產生影響

3.overflow：hidden

注意

1.得有寬度

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

3.超出部分會直接隱藏

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

不推薦使用

4.給父級display：inline-block

不使用

5.clear

left：清除左浮動

right：清除右浮動

both：同時清除左右浮動

每一次都需要找到當前浮動元素產生影響的哪一個元素

none：不清除

6.在當前標簽后面添加一個內容

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

定位

是什么

用于固定位置

可以做什么

1.用于布局

2.實線懸浮廣告

屬性

static

默認值，不定位

relative

相對定位

屬性

left

right

top

bottom

特性

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

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

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

注意

1.當同時設置top和bottom的時候，top會生效

2.當同時設置left和right 的時候，left會生效

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

absolute

絕對定位

屬性

left

right

top

bottom

特性

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

2.使內聯元素完全支持寬高

3.使塊元素內容去撐開寬高

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

不會繼承父級寬高

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

先看其父級有無設定位，如果設定位就相對于這個父級，如果這個父級沒有設置，就繼續往上找父級的父級，直到找到設置定位的父級，參考其進行定位

fixed

固定定位

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

z-index

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

可以通過設置z-index去更改他們的層級關系

注意：

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

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

opacity

透明度

數值

0—1

關于定位和浮動的解釋說明

1.position：relative;和position：absolute

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

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

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

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

2.網頁看起來是二維結構，但實際上是存在Z軸的，

Z軸的大小由z-index決定

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

這一層，元素根據自己的display類型，長和寬以及內邊距

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

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

3.設置了絕對定位和浮動后，我們的元素會浮”起來

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

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

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

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

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

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

從而影響到其他元素

小知識

控制光標樣式

cursor：

move

移動光標

text

文本

pointer

小手

自定義圖片

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

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

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

文本居中

水平居中

text-align：center

垂直居中 vertical-align：middle

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

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

垂直居中的其他屬性

baseline

基線對齊

top

頂部對齊

bottom

底部對齊

middle

居中對齊

css3選擇器

同級元素通用選擇器

選擇器1~選擇器2{}

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

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

相鄰兄弟選擇器

選擇器1+選擇器2

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

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

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

屬性選擇器

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

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

css3偽類選擇器

：before

p:before{}

在每個p元素之前插入內容

：after

p：after

在每個p元素之后插入內容

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

：nth-last-of-type(n)

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

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

：last-child

p：last-child

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

css3背景屬性

新特性

透明背景

漸變背景

背景圓點控制

背景剪切控制

background-clip

將背景圖片做適當的裁剪

background-clip指定背景繪制區域

值

content-box

padding-box

border-box

裁剪方法

根據設置的分支部分，圖片在這個部分的邊緣以外的部分都不可見

background-origin

決定圖片的原始起始位置

值

content-box

padding-box

border-box

注意

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

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

動畫過度

transition：all 0.3

select

雙標簽

語義：下拉菜單

屬性

selected="selected"

用于控制默認的選項是哪一個

選項：option

代碼

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

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

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

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

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

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

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

分享文章：html5基礎知識點總結
轉載來于：http://m.newbst.com/news40/64740.html

成都網站建設公司_創新互聯，為您提供做網站、商城網站、外貿建站、建站公司、品牌網站設計、網站內鏈

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯