本文章主要討論 ** 當我們拿到一個頁面時，我們怎么用 CSS 完成這個頁面**
先弄清楚布局
當我們拿到一個頁面時，我們首先得搞清楚這個頁面從大的部分可以分成幾個 div ，這幾個大的 div 的位置是怎樣的，例如：
jianshu
簡書的首頁，我們便可以將這個頁面分為三個大的 div
- 最左邊的黑色的那一塊的圖標列表
- 中間的那個圖片
- 右邊的正文那一部分
所以這個時候我們可以先完成這部分，即先將整個頁面分為這三部分。* 這個時候我們需要考慮一下自適應 。*
定位某個元素
當我們分出 div 后，我們就開始完成其中具體的 元素，這個時候就涉及一個問題，如何給某個具體的 元素定位？
在給具體的元素定位時，我們有以下元素
float
用法
這里面有一個概念，叫 ** 文檔流 ，它指的是所謂的文檔流實際上是一種民間說法，正常稱謂應該指的是常規流（normal flow）**，個人感覺這兩者應該是“閥值”與“閾值”的關系。從直觀上理解正常流指的是元素按照其在 HTML 中的位置順序決定排布的過程，主要的形式是自上而下，一行接一行，每一行從左至右。position
這個屬性共有三個值 absolute，relative，fixed，static
overflow
確定具體位置
- 使用 margin，padding 來給某個元素確定具體位置（當某個元素份的具體位置既可以用 margin，padding設置時，推薦大家用margin，不用padding）
- 盒子模型
設置元素的樣式
接下來我們就可以給元素設置樣式，包括，顏色，字體，邊框，等等
在這個環節大家一定要認真觀察這整個頁面的每一個元素的樣式，你會發現其實有很多的元素他們的樣式是一樣或者相似的，這個時候我們就可以共用他們的樣式，而不用寫那么多余的代碼。
在這里，推薦大家用 less 文件來寫 css 樣式，less 文件的好處看這里：http://lesscss.org/
按照上面這種思路，相信當大家拿到一個頁面時，就會有一定的思路去完成這個頁面，而不會沒有思路，亂調樣式了。
