div+css布局

標籤：

1.div 和 span（為了應用CSS樣式）

　　span是內聯樣式（只佔內容存在的那一部分）

　　div是區塊層級元素（佔一整行）

2.盒模型

　　margin：盒子外邊距

　　padding：盒子內邊距

　　border：盒子邊框寬度

　　width：盒子寬度

　　height：盒子高度

3.布局的相關屬性

　　1）position定位方式

　　　　正常定位：relative

　　　　根據父視窗進行定位：absolute

　　　　根據瀏覽器視窗進行定位：fixed （常用於做浮動視窗，相對於瀏覽器位置一直保持不變）

　　　　沒有定位：static

　　　　繼承：inherit

　　2）定位

　　　　離頁面定點的距離：left、right、top、bottom

　　3）層覆蓋先後順序（優先順序）

　　　　z-index：用數字表示，預設為0，數字越大越向上

　　4）顯示內容：display

　　　　none：層不顯示

　　　　block：塊狀顯示，在元素後面換行，顯示下一個元素

　　　　inline：內聯顯示，多個塊可以顯示在一行內

　　　　（內嵌元素不能定義寬度，可以用block和inline兩個屬性實現div和span的相互轉換）

　　5）浮動屬性：float

　　　　left：左浮動

　　　　right：右浮動

　　6）清除浮動

　　　　clear：both

　　7）溢出處理：overflow

　　　　hidden：隱藏超出層大小的內容

　　　　scroll：無論內容是否超出層大小都添加捲軸

　　　　auto：超出時自動添加捲軸

4.使網頁定格置中顯示：

body{

　　margin：0 auto；

}

5.相容問題

　　1）相容性測試載入器

　　　　IE Tester、Multibrowser

　　2）常用的瀏覽器

　　　　Google chrome、Firefox、opera

　　3）高效的開發工具

　　　　Notepad++、sbulime Text、記事本

　　　　WebStorm、Dreamweaver

　　4）網頁設計工具

　　　　fireworks、photoshop

div+css布局