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網頁佈局實戰》

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

本文轉自 拉考的考拉 51CTO部落格，原文連結:http://blog.51cto.com/lakaodekaola/1967987