CSS層疊樣式表——DIV+CSS布局

   DIV+CSS布局

1   div和span

   DIV和SPAN在整個HTML標記中，沒有任何意義，他們的存在就是為了應用CSS樣式

   DIV和SPAN的區別在于，SPAN是內聯元素，DIV是塊級元素

2   盒模型

   margin   盒子外邊距

   padding   盒子內邊距

   border   盒子邊框寬度

   width   盒子寬度

   height   盒子高度

3   布局相關的屬性

3.1   position   定位方式

   正常定位   relative

   根據父元素進行定位   absolute

   根據瀏覽器窗口進行定位   fixed

   沒有定位   static

   繼承   inherit

3.2   定位

   離頁面頂點的距離   left（左），right（右），top（上），bottom（下）

3.3   z-index   層覆蓋先后順序（優先級）

3.4   display   顯示屬性

   display:none   層不顯示

   display:block   塊狀顯示，在元素后面換行，顯示下一個元素

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

3.5   float   浮動屬性

   left   左浮動

   right   右浮動

3.6   clear   清除浮動

   clear:both

3.7   overflow   溢出處理

   hidden   隱藏超出層大小的內容

   scroll   無論內容是否超出層大小都添加滾動條

   auto   超出時自動添加滾動條

4   兼容問題及高效開發工具

4.1   兼容性測試工具

   IE  Tester

   Multibrowser

4.2   常用的瀏覽器

  Firefox

   Google  chrome

   opera

4.3   高效的開發工具

4.3.1   輕級的

   Notepad++

   sbulime  Text

   記事本                                  根據自己的需要來選擇

4.3.2   重量級的

   WebStorm

   Dreamweaver

4.4   網頁設計工具

   fireworks

   photoshop

5   判斷IE的方法       條件注釋只在IE瀏覽器

5.1   條件判斷格式

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

5.2   不等于

  [if  !IE  8]      除了IE8都可以顯示

5.3   小于

   [if   it  IE  5.5]       如果IE瀏覽器版本小于6的顯示

5.4   大于

   [if  gt  IE  5]      如果IE瀏覽器版本大于5的顯示

5.5   小于或等于

   [if  lte  IE  6]      如果IE瀏覽器版本小于6的顯示

5.6   大于或等于

    [if  gte  IE  7]      如果IE瀏覽器版本小于7的顯示

5.7   大于和小于之間

    [if   (gt  IE  5)&(it  IE  7)        如果IE瀏覽器版本大于IE5小于7的顯示

5.8   或

    [if  (IE  6)|(IE  7)]      如果是IE6或者IE7顯示

5.9   僅

   <!--[if  IE  8]>      如果是IE8，就只顯示IE8

6   《DIV+CSS網頁布局實戰》

   先分析，再切圖，然后搭建框架，慢慢的循序漸進，下一步解決兼容，最后完成