第一節 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類型
• url
• color
• date
• month
• time
• number
• tel
mark:高亮顯示
progress:
佈局小標籤
• header
• nav
• footer
• article
• aside
• section
• details
• summary