CSS 布局入门
概述
Web 興起之后，關于CSS的介紹和學習資料已經鋪天蓋地。
本文不涉及具體的CSS語法之類的，而是希望從初學者的角度，讓沒有接觸或很少接觸CSS的人能快速的了解 CSS 到底是什么以及如何使用。
什么是 CSS
了解一個概念，首先看到的就是它的名字，而往往被忽略的，也是它的名字。
CSS (cascading style sheets)，可以翻譯成中文 層疊樣式表 。從名字可以看出：
- 層疊：說明 樣式可以疊加，所以會有優先級
- 樣式表：說明CSS是描述樣式的，而且只是個 表 ，不是程序語言，所以后來隨著 CSS 的應用越來越多，才會有 Sass 和 Less 這些擴充 CSS 語法的語言出來
CSS 的作用
CSS 的作用就是樣式，其實 Web 只用 HTML也可以做出來，只是隨著機器和瀏覽器性能的提升，人們對網頁的美觀和易用性要求越來越高，CSS 的重要性才逐漸凸顯。
CSS 我覺得有2個主要的作用：
- 可以將 Web 的樣式統一管理，便于修改，類似于程序語言中的變量或者配置文件
- 將網頁內容和樣式分離開，讓靈活呈現內容成為可能
注意 HTML 才是網頁的實際內容，CSS 只是控制HTML元素的如何顯示，顯示與否。
CSS for 布局
CSS 在布局上用的最多，就是因為了有了 CSS，才會有所謂的 div css 布局方式，以前用 HTML 都是 table 布局。
初步了解 div css 的布局，我覺得了解3點就夠了，框模型，定位和浮動。
框模型
每個div對于css來說都是一個 框 。每個框由內到外由4部分組成 content padding border margin
div 的長和框由這4部分的長之和和寬之和組成
示例：
例子很簡單，但是可以看出：
定位
理解了 框模型之后，定位也很簡單，其實就是將一個個框定位在頁面上。
定位分為絕對定位和相對定位。
絕對定位
就是在瀏覽器上的絕對位置，通過 top 和 left 屬性設置相對于瀏覽器左上角的距離
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>CSS Sample</title> <link href="index.css" rel="stylesheet"/> </head> <body> <div id="div1">Content1</div> <div id="div2">Content2</div> </body> </html>body {background-color: #FAEBD7; }div {width: 100px;height: 100px;padding: 30px;border: 10px solid blue;margin: 10px;background-color: red;text-align: center;position: absolute; }#div1 {top: 100px;left: 100px; }#div2 {top: 200px;left: 200px; }絕對定位明確但不靈活，除非屏幕大小能固定，否則需要多套css。設置不好會造成元素的重疊。
絕對定位中有個很關鍵的設置是 position: absolute
相對定位
相對定位中每個 div 的 top 和 left 不再是相對瀏覽器的左上角了。而是相對剩余位置的左上角。
同樣是上面的例子，把 position: absolute 換成 position: relative 可以發現2個div 不再重疊了。
浮動
div 默認是 inline的，也就是每個 div 占據了一行。
布局時，如果希望多個div排列在一行，那么就會用到浮動（或者用以前的 table方式）
設置 div 浮動屬性之后，就可以用div布局出各種結構。
下面以常見的管理系統為例，做一個簡單的 div css 布局
<!doctype html> <html lang="en"><head><meta charset="UTF-8"/><title>CSS Sample</title><link href="index.css" rel="stylesheet"/></head><body><div id="head">head</div><div id="middle"><div id="nav">nav</div><div id="content">content</div></div><div id="foot">foot</div></body> </html>body {background-color: #FAEBD7;height: 100%;margin: 0px;padding: 0px; }div {border: 1px solid black;text-align: center; }#head {height: 50px;width: 100%; }#middle {width: 100%;top: 50px;bottom: 100px;left: 0px;position: absolute; }#nav {float: left;width: 200px;height: 100%; }#content {height: 100%;overflow: hidden; }#foot {height: 100px;width: 100%;bottom: 0px;left: 0px;position: absolute; }上面的示例中，head，foot 高度固定，nav 寬度固定。其他都是自適應的，可以通過調整瀏覽器窗口的大小看到效果。
總結
CSS 布局很簡單，如果還有其他的交互動作，可以通過js來實現（比如導航和內容的聯動）。
現在已經基本沒有人會用 table 的布局方式了，因為 table 本來只展現數據的一種方式，row，cell 的方式也不適合組件化。
總結
- 上一篇： 自适应居中
- 下一篇： 奇妙的 CSS shapes(CSS图形