ad：
基於css的布局能提供更靈活布局方式和更強的使用者視覺體驗。一些重要技巧和關鍵點可以幫助初學者理解css布局的基礎和本質。這也是本文成文的原因 ——找到那些完美的布局，完全靈活的，等高欄和工作完美的布局。
因此下面這個列表就是我們整理了網路上關於基於css布局的一些技巧，教程和最佳實踐的列表。
the 7 css hacks that we should use
using css to do anything: 50+ creative examples and tutorials
using css to fix anything: 20+ common bugs and fixes
css 布局教程
1-使用css完成三欄固定布局結構- 這篇文章解釋了如何實現乙個基於的html/css來設計乙個簡單的帶有基本要素（頂部的logo條，導航條，文字區，定義分類的中部欄，右邊側欄插入google的120x600的廣告區）的固定三欄頁面布局。
2-使用css設計頁面布局- 如何使用css檔案來為你的站點設計頁面布局。
3-如何建立乙個水平布局的站點- 建立不同於常規的水平布局的站點技術（譯者注：水平布局，客戶體驗也就仁者見仁了）
4-超級簡單的兩欄布局- 建立不同於常規的水平布局的站點技術（譯者注：這裡是原作者筆誤吧和上面的內容一樣）.
例子檢視這裡
5-簡單兩欄css布局- 這是乙個建立簡單兩欄布局的教程。這種布局包含了乙個標題區，乙個水平導航條，主內容區，邊側欄，和頁尾區。並且這個布局是水平居中的。
例子檢視這裡
6-聖杯布局(the holy grail layout) – 3欄布局會有一些問題 ，這篇文章討論了一種三欄布局——兩欄固定寬度邊側欄加上一欄變寬中欄布局，保證了頁面的良好結構和清晰。
例子檢視這裡
7-css居中101- 如何使用css完成居中乙個固定寬度的布局
使用css，通過下面兩條規則完成對id為container的div所包含的內容居中
<body
>
<
divid="container"
> ...entire layout goes here...
div>
body
>
body8-從頭建立css布局- 這個指南通過建立乙個全功能的 css布局來一步步教你入門css布局。#container
9-非主流！多欄布局- 多欄布局，等高欄（每一列的高度都相等），固定或變寬**區，簡潔標記，css 。(譯者注：原文作者的圖配的和上圖一樣)
例子檢視這裡
10- 建立天下無雙的css布局- 高靈活性布局,等高欄，跨欄垂直擺放元素。本文告訴你通過何等手段完成這些目標，並使用它們建立天下無雙的css布局（譯者注:原文是one true layout ，不知道怎麼翻譯，就天下無雙吧。）
檢視這裡
11-從psd到html，手把手完成web設計-從photoshop到完整html，全過程手把手教會你。
12- 5個xhtml/css技巧 – 5個css技巧幫助你完成從基於**的布局到基於css的布局。
13-設計乙個基於css的模板 – 這是乙個教你建立基於css的模板頁的基礎教程。這個教程由下面幾個部分構成：第一部分覆蓋了在photoshop cs*中的建立導航條按鈕，第二部分：建立背景接下來的清單是標題和頁面布局，最後的部分在xhtml和css中實現。
14-使用css布局跳出常規布局- 如果你理解了基於**布局的工作方式，你能通過合併或拆分**建立你隨心所欲的布局。就這個目標（同時支援靈活性和可維護性），css能夠提供比基於**更多地東西。jina bolton的教程解釋如何達到這個目標。
15-高階css教程:手把手- 這個教程的終極目標建立乙個css布局，這個css布局精確地重組了原有使用table的webreference.com的布局。
16-了解css布局的6個關鍵要素-本文講述了6件基於css布局需要了解的事情：盒模型(box model)，浮動欄(floated columns) （譯者注：float是web布局最重要的乙個屬性了）。使用em來設定尺寸（sizing using ems），替換（image replacement）,浮動導航和sprintes。
17-你會犯這些常見的部落格布局錯誤嗎？-討論4個部落格布局中常見而且易修復的錯誤。
18-頁面布局-css頁面布局中的浮動元素和定位元素實踐指導。
你可以檢視這些例子：absolute position within a relative box
two floated boxes和using a border to provide the background for a column
19-site in an hour- 使用複雜ccs布局完成簡單的工作。
CSS布局技巧
兩欄布局 左邊寬度固定，浮動。右邊設定margin left，寬度自適應。反之，亦可。例子 左邊 右邊 三欄布局 兩側浮動且寬度固定，左邊left浮動，右邊right浮動，中間設定margin left和margin right寬度自適應。注意，書寫順序是左右中。例子 左邊 右邊 中間 水平居中 方...
CSS布局技巧和CSS初始化
兩個盒子的邊框都是1px,如果加了浮動,兩個盒子相交的邊框就會變成2px,可以給乙個margin負值,讓兩個盒子重疊.lang en charset utf 8 name viewport content width device width,initial scale 1.0 documentti...
CSS頁面布局技巧（一）
1 字型型別 絕大多數使用者系統預設支援的中文字型有宋體 黑體 幼圓 楷體 預設支援的英文本型有arial arial black arial narrow century gothic comic sansms times new roman等等。在使用中，宋體和arial使用頻率最高。css提供...