語軒閣: CSS 語法 – float 浮動排列

2012年2月8日星期三

CSS 語法 – float 浮動排列 – 表格做不到的功能

「float: left;」浮動排列~ 是 CSS 排版時很常用到的語法之一，這也是表格做不到的功能之一…..

尤其是對於學習過 PHP 或 ASP 資料庫的同學來說，想要做出電子相本或購物網站的頁面編排時，常常很煩惱如何做到「巢狀重覆排列」的效果，要寫一大堆程式才做得到，若改用 CSS 語法的話，只要短短一句「float: left;」就解決啦~ 是不是很神奇呢！

CSS 語法中的 div 標籤本來是「區塊」的功能，後來 dreamweaver 在編排文字時卻常常拿來當作「段落」的功能在使用，取代了原本 html 中的 p 標籤~ 若您只會將 div 標籤用在「段落」的功能就真是太委曲它了~

div 標籤是 CSS 語法用來取代 table 表格很重要的工具，在標準的 CSS 排版中都是用 div 標籤來劃分網頁內容，無論是相對定位還是絕對定位，使用起來相當方便，在網頁的大小和讀取速度上比 table 快上許多，更重要的是在版面的調整和修改時，只要調整一兩個參數，整個網站的網頁即可煥然一新，傳統的 table 只能全部重排，耗時又耗工，因此 div 標籤可以大大的減少網頁開發的成本支出。

以下就用一個小範例來講解 div 標籤功能：

先在<body>之內寫入一些 div 標籤~

使用 CSS 樣式定義 div 標籤的外觀：

height: 120px;     /* 高度 120 */
width: 120px;     /* 寬度 120*/
background-color: #6699FF;      /* 背景色藍色*/
border: 2px dashed #003366;      /* 虛線邊框 2 像素深藍色*/
margin: 20px;      /* 四周邊界 20 像素 */