【php基礎班】第7天 overflow屬性、CSS引入方式、定位、佈局、margin合併問題、瀏覽器兼容

第一節 overflow屬性

1. overflow屬性 hidden scroll auto

2. display屬性 block inlineinline-block none

Block塊顯示

inline按行內顯示

inline-block雙重作用。既有行的特點又有塊的特點

在一行內顯示,有行高

None:不顯示,display:none;

第二節 CSS引入的方式 行內,內嵌,外部

a)  行內

       i.     在標籤內部,直接使用style=」CSS規則」

      ii.      容易寫錯:<p style=」color=red;」>文字</p>

1.  這個地方用冒號

b)  內嵌

       i.     寫在<head></head>中

      ii.      寫法

    iii.      <styletype=」text/css」 >樣式</style>

c)  外部

       i.     通過link,將外部的樣式表文件(*.css),引入當前頁面。

      ii.      寫法:

1.  <linktype=」text/css」  rel=」stylesheet」href=」*.css」 />

2.  Rel說明,當前文件與鏈接的文件是什麼關係

3.  Stylesheet樣式表的關係。

4.  Href:指定樣式表文件在什麼地方(路徑)

5.  備註:我們在做網站時開發時,通常用的就是這種方式。

第三節 CSS優先級

當CSS衝突的時候

就近原則

行內樣>內嵌樣式>外部樣式

行內樣式>id>class>標籤

//權重值,特性值

CSS繼承

和文本相關的一般都會繼承。、

邊框,寬,高,margin,padding  背景等都不繼承。

繼承的權重爲0

第四節 定位技術

1.  xhtml+css 定位技術

DIV佈局就是DIV+CSS,標準的說法應該是xhtml+css。是一種網站設計標準。在XHTML網站設計標準中,不再使用表格定位技術,而是採用DIV+CSS的方式實現各種定位。CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫。DIV的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由DIV標籤的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。div是html(超文本語言)中的一個元素,div+css是一種網頁的佈局方法,這一種網頁佈局方法有別於傳統的table佈局,真正地達到了w3c內容與表現相分離。div是標籤 css是層疊樣式表。

2. 定位屬性:position:static fixed relative absolute

n  position: (配合着定位座標

u  Left距左邊, top距上邊, right 距右邊, bottom距底邊

n  )

u  static 靜態,不定位

u  fixed 固定, 脫離正常的文檔流,比普通元素層級要高。相對於瀏覽器窗口進行定位。

u  relative

l  相對定位。相對於誰?(相對於自己,霸道的相對)

u  absolute

l  絕對定位,相對於最近的具有定位屬性(不管是相對定位,或者絕對定位都可以)的元素進行定位。

n 脫離正常文檔流,層級高於普通元素。

n 相對於它的祖先,有定位屬性的祖先。

n 如果沒有,相對於body定位。

n  相對定位與絕對定位

n  外層元素通常設置相對定位,不用座標。

n  內層元素設置絕對定位。配合着定位座標。

第五節 限時搶


第六節 margin合併的問題

n  margin,上下合併(大吃小),左右疊加


第七節 常見佈局






第八節 瀏覽器兼容性

瀏覽器市場份額:http://tongji.baidu.com/data/browser

常用兼容性技巧

初始化清除瀏覽器默認值及HACK法:

初始化清除瀏覽器默認值:ul,li,body{margin:0;padding:0}

.box{

color:white;

background:blue;/*ff,7*/

background:red\9; /*ie6 7 8*/

*background:black;/*ie6 7*/

_background:orange;/*ie6*/

}


第九節 HTML5

1. HTML5簡介

HTML5前身爲webapplications1.0,是作爲下一代互聯網標準,用於取代htm4.01和xhtml1.0.

增加了新的標籤和屬性

加強網頁結構的語義化

增加本地存儲等功能

萬維網的核心語言、是超文本標記語言(HTML)的第五次重大修改,2014年10月28日,W3C萬維網聯盟宣佈,經過近8年的艱苦努力,標準終於制定完成併發布。

廣義HTML5:它包括,HTML5,CSS3,Javascript,API

HTML5將會取代1999年制定的HTML 4.01、XHTML 1.0標準

http://www.chinaw3c.org/archives/677/

2.HTML5特性

•   語義特性

w 更好的意義和結構。更加豐富的標籤  

•   本地存儲特性

w 基於HTML5開發的網頁有更短的啓動時間,更快的聯網速度,這些全得益於HTML5 APPCache,以及本地存儲功能

•   設備兼容特性 

w HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連,例如視頻影音可直接與microphones及攝像頭相聯。

•   網頁多媒體特性(Class:MULTIMEDIA)

w 支持網頁端的Audio、Video等多媒體功能, 與網站自帶的APPS,攝像頭,影音功能相得益彰。

•   三維、圖形及特效特性

w 基於SVG、Canvas、WebGL及CSS3的3D功能,用戶會驚歎於在瀏覽器中,所呈現的驚人視覺效果。

•   CSS3特性

w CSS3中提供了更多的風格和更強的效果

•   ……

•   多設備跨平臺

•   自適應網頁設計

音頻

•     <audio></audio>

•     src 音頻的路徑

•     autoplay =「true,false」

•     controls=「是否顯示控制面板」

•     loop =「」 循環的次數

•     格式:mp3,oga,wav

視頻

•     <video></video>

•     src

•     width

•     height

•     controls

•     autoplay

•     格式:mp4,oga

新屬性

•     autocomplete(off,on) 自動完成,默認是打開的

•     autofocus:自動獲取焦點

•     required:要求需要填寫

新input類型

•     email

•     url

•     color

•     date

•     month

•     time

•     number

•     tel

mark:高亮顯示

progress:



佈局小標籤

•     header

•     nav

•     footer

•     article

•     aside

•     section

•     details

•     summary