CSS 一、使用CSS樣式的方式
CSS 二、定義樣式表
CSS 三、常見屬性
CSS 四、DIV+CSS布局## 四、DIV+CSS布局

1.div和span

DIV和SPAN在整個HTML標(biāo)記中，沒有任何意義，他們的存在就是為了應(yīng)用CSS樣式
DIV和span的區(qū)別在與，span是內(nèi)聯(lián)元素，div是塊級元素
* DIV占據(jù)整個一行；span只占用一小部分，內(nèi)容多少占用位置多少

2.盒模型

• margin 盒子外邊距
• padding 盒子內(nèi)邊距
• border 盒子邊框?qū)挾?/li>
• width 盒子寬度
• height 盒子高度

3.布局相關(guān)的屬性

1) position 定位方式

• 正常定位 relative
• 根據(jù)父元素進(jìn)行定位 absolute
• 根據(jù)瀏覽器窗口進(jìn)行定位 fixed
  * 滾動頁面其位置不變，如部分網(wǎng)頁中的客服
• 沒有定位 static
• 繼承inherit

2) 定位

left（左），right（右），top（上），bottom（下）離頁面頂點(diǎn)的距離

3) z-index 層覆蓋先后順序（優(yōu)先級）

z-index:1
1 2 3 4 5 6...表示優(yōu)先級

4) display 顯示屬性

display:none 層不顯示
display:block 塊狀顯示，在元素后面換行，顯示下一個塊元素
display:inline 內(nèi)聯(lián)顯示，多個塊可以顯示在一行內(nèi)

5) float 浮動屬性

• left 左浮動
• right 右浮動

6) clear 清除浮動

clear：both

7) overflow 溢出處理

• hidden 隱藏超出層大小的內(nèi)容
• scroll無論內(nèi)容是否超出層大小都添加滾動條
• auto 超出時自動添加滾動條

4.兼容問題及高效開發(fā)工具

1) 兼容性測試工具

• IE Tester
• Multibrowser

2) 常用的瀏覽器

• Google chrome
• Firefox
• opera

3) 高效的開發(fā)工具

根據(jù)自己的需要來選擇

輕量級的： Notepad++、sbulime Text、記事本
重量級的：WebStorm、 Dreamweaver

4) 網(wǎng)頁設(shè)計(jì)工具

• fireworks
• photoshop

5.判斷IE的方法

條件判斷格式
<! --[if 條件 版本]> 那么顯示 <![endif]-->

• 不等于
  [if !IE 8] 除了IE8都可以顯示
• 小于
  [if lt IE 5.5] 如果IE瀏覽器版本小于5.5的顯示
• 大于
  [if gt IE 5] 如果IE瀏覽器版本大于5的顯示
• 小于或者等于
  [if lte IE 6] 如果IE瀏覽器版本小于6的顯示
• 大于或等于
  [if gte IE 7] 如果IE瀏覽器版本小于7的顯示
• 大于和小于之間
  [if (gt IE 5)&(lt IE 7)] 如果IE瀏覽器版本大于IE5小于7的顯示
• 或
  [if (IE 6)|(IE 7)] 如果是IE6或者IE7顯示
• 僅
  <! --[if IE 8]> 如果是IE8

注意??：條件注釋只有在IE瀏覽器下才能執(zhí)行，這樣就達(dá)到了我們的效果！

6.《DIV+CSS網(wǎng)頁布局實(shí)戰(zhàn)》

分析+切圖+搭建框架

循序漸進(jìn)>解決兼容>大功告成