Web 興起之後，關於CSS的介紹和學習資料已經鋪天蓋地。
本文不涉及具體的CSS文法之類的，而是希望從初學者的角度，讓沒有接觸或很少接觸CSS的人能快速的瞭解 CSS 到底是什麼以及如何使用。
瞭解一個概念，首先看到的就是它的名字，而往往被忽略的，也是它的名字。
CSS (cascading style sheets)，可以翻譯成中文 層疊樣式表 。從名字可以看出：
層疊：說明 樣式可以疊加，所以會有優先順序
樣式表：說明CSS是描述樣式的，而且只是個 表 ，不是程式語言，所以後來隨著 CSS 的應用越來越多，才會有 Sass 和 Less 這些擴充 CSS 文法的語言出來
CSS 的作用就是樣式，其實 Web 只用 HTML也可以做出來，只是隨著機器和瀏覽器效能的提升，人們對網頁的美觀和易用性要求越來越高，CSS 的重要性才逐漸凸顯。
CSS 我覺得有2個主要的作用：
可以將 Web 的樣式統一管理，便於修改，類似於程式語言中的變數或者設定檔
將網頁內容和樣式分離開，讓靈活呈現內容成為可能
注意 HTML 才是網頁的實際內容，CSS 只是控制HTML元素的如何顯示，顯示與否。
CSS 在布局上用的最多，就是因為了有了 CSS，才會有所謂的 p+css 布局方式，以前用 HTML 都是 table 布局。
初步瞭解 p+css 的布局，我覺得瞭解3點就夠了，框模型，定位和浮動。
每個p對於css來說都是一個 框 。每個框由內到外由4部分組成 content padding border margin
p 的長和框由這4部分的長之和和寬之和組成
樣本：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"/> <title>CSS Sample</title> <link href="index.css" rel="stylesheet"/> </head> <body> <p>Content</p> </body></html>body { background-color: #FAEBD7;}p { width: 100px; height: 100px; padding: 30px; border: 10px solid blue; margin: 10px; background-color: red; text-align: center;}
例子很簡單，但是可以看出：
從外到內 依次是 margin, border, padding, content
p 的 width 和 height 只是 content 的大小
理解了 框模型之後，定位也很簡單，其實就是將一個個框定位在頁面上。
定位分為絕對位置和相對定位。
就是在瀏覽器上的絕對位置，通過 top 和 left 屬性設定相對於瀏覽器左上方的距離
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><title>CSS Sample</title><link href="index.css" rel="stylesheet"/></head><body><p id="p1">Content1</p><p id="p2">Content2</p></body></html>body { background-color: #FAEBD7;}p { width: 100px; height: 100px; padding: 30px; border: 10px solid blue; margin: 10px; background-color: red; text-align: center; position: absolute;}#p1 { top: 100px; left: 100px;}#p2 { top: 200px; left: 200px;}
絕對位置明確但不靈活，除非螢幕大小能固定，否則需要多套css。設定不好會造成元素的重疊。
絕對位置中有個很關鍵的設定是 position: absolute
相對定位中每個 p 的 top 和 left 不再是相對瀏覽器的左上方了。而是相對剩餘位置的左上方。
同樣是上面的例子，把 position: absolute 換成 position: relative 可以發現2個p 不再重疊了。
p 預設是 inline的，也就是每個 p 佔據了一行。
布局時，如果希望多個p排列在一行，那麼就會用到浮動（或者用以前的 table方式）
設定 p 浮動屬性之後，就可以用p布局出各種結構。
下面以常見的管理系統為例，做一個簡單的 p+css 布局
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"/> <title>CSS Sample</title> <link href="index.css" rel="stylesheet"/> </head> <body> <p id="head">head</p> <p id="middle"> <p id="nav">nav</p> <p id="content">content</p> </p> <p id="foot">foot</p> </body></html>body { background-color: #FAEBD7; height: 100%; margin: 0px; padding: 0px;}p { 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 的方式也不適合組件化。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
