本文章主要討論 ** 當(dāng)我們拿到一個(gè)頁面時(shí)傲茄，我們怎么用 CSS 完成這個(gè)頁面**
先弄清楚布局
當(dāng)我們拿到一個(gè)頁面時(shí)臊泰，我們首先得搞清楚這個(gè)頁面從大的部分可以分成幾個(gè) div ，這幾個(gè)大的 div 的位置是怎樣的皆怕，例如：
簡書的首頁宪巨，我們便可以將這個(gè)頁面分為三個(gè)大的 div
- 最左邊的黑色的那一塊的圖標(biāo)列表
- 中間的那個(gè)圖片
- 右邊的正文那一部分
所以這個(gè)時(shí)候我們可以先完成這部分，即先將整個(gè)頁面分為這三部分劫流。* 這個(gè)時(shí)候我們需要考慮一下自適應(yīng) 。*
定位某個(gè)元素
當(dāng)我們分出 div 后，我們就開始完成其中具體的 元素祠汇，這個(gè)時(shí)候就涉及一個(gè)問題仍秤，如何給某個(gè)具體的 元素定位？
在給具體的元素定位時(shí)座哩，我們有以下元素
float
用法
這里面有一個(gè)概念徒扶，叫 ** 文檔流 粮彤，它指的是所謂的文檔流實(shí)際上是一種民間說法根穷，正常稱謂應(yīng)該指的是常規(guī)流（normal flow）**，個(gè)人感覺這兩者應(yīng)該是“閥值”與“閾值”的關(guān)系导坟。從直觀上理解正常流指的是元素按照其在 HTML 中的位置順序決定排布的過程屿良，主要的形式是自上而下，一行接一行惫周，每一行從左至右尘惧。position
這個(gè)屬性共有三個(gè)值 absolute，relative递递，fixed喷橙，static
overflow
確定具體位置
- 使用 margin，padding 來給某個(gè)元素確定具體位置（當(dāng)某個(gè)元素份的具體位置既可以用 margin登舞，padding設(shè)置時(shí)贰逾，推薦大家用margin，不用padding）
- 盒子模型
設(shè)置元素的樣式
接下來我們就可以給元素設(shè)置樣式菠秒，包括疙剑，顏色，字體践叠，邊框言缤，等等
在這個(gè)環(huán)節(jié)大家一定要認(rèn)真觀察這整個(gè)頁面的每一個(gè)元素的樣式，你會(huì)發(fā)現(xiàn)其實(shí)有很多的元素他們的樣式是一樣或者相似的禁灼，這個(gè)時(shí)候我們就可以共用他們的樣式管挟，而不用寫那么多余的代碼。
在這里弄捕，推薦大家用 less 文件來寫 css 樣式哮独，less 文件的好處看這里：http://lesscss.org/
按照上面這種思路，相信當(dāng)大家拿到一個(gè)頁面時(shí)察藐，就會(huì)有一定的思路去完成這個(gè)頁面皮璧，而不會(huì)沒有思路，亂調(diào)樣式了分飞。
