本文轉載於:猿2048網站從CUMT校園導航出現的問題看CSS佈局設計（一） CSS盒模型

先說說做的這個校園導航系統值得一提的內容：

1. 二級選單欄  、iframe內嵌視窗（樣式設計、用hover做效果）

2. 高德地圖API （自定義底圖樣式、彈跳點、資訊窗體、線路導航）

3. DOM裡的函式 getElementById( ); （看了《JS DOM程式設計藝術》）

4. 返回頂部 JS實現

然後是小目標：

1. 把部落格園的樣式自定義調整一下（已完成），算是對前面內容的回顧與聯絡，同時瞭解新特性。

2. 用 bootstrap / ps

3. 下學期的自由時間把《JS高階程式設計》過一遍。

進入正題：當初這個頁面做完老師只是看了一下，也沒有給評價，反倒是在另外一門專業課上展示時一位計算機出身的老師給了不少中肯的建議。首先是沒有做自適應視窗，使用者更改頁面大小後內容排列就變得混亂，其次是可以考慮加後臺資料庫，讓使用者登入。同時自己也發現了一些問題，剛開始做的時候JS與CSS沒有與HTML分離，都寫在了同一個page裡。不同類選擇器之間的區分也不瞭解，幾乎都是id選擇器。還有顏色搭配、設計都比較糟糕，div用的很雜亂。做的那時候不懂，現在想來其實這些都是前端的基本問題。

CSS盒模型，這是排版要用到的核心基礎知識。

1. 外邊距的合併，兩個上下方向相鄰的元素框垂直相遇時，外邊距會合並，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值。行內框、浮動框或絕對定位之間的外邊距不會合並。父子級之間的margin傳遞。

2. 寬高和margin屬性值可以設定為auto，auto時寬度會盡可能寬，高度則會盡可能窄，也就是元素的高度儘量恰好包含其內聯內容的高度。

3. 彈性佈局可用相對單位em，它的單位長度是根據父元素的文字垂直長度 font-size 來決定的（1em預設為16px），使用線上工具PXtoEM（http://pxtoem.com/）可以輕鬆快捷的根據px計算出所需要的em值。

3. 考慮相容，在不同瀏覽器內的表現，要加瀏覽器字首 -moz-border-top-colors.

4. box-sizing實際是對應於ie盒模型（border-box，不改變整體大小）和w3c標準盒模型（content-box）

5. box-shadow新增陰影效果，spur調整模糊度，spread確定模糊尺寸。

6. 之後遇到的樣式調整細節問題都會補充在這篇裡

7. CSS三欄佈局7種實現  https://juejin.im/entry/5895703b5c497d0056f247dd

 

8. CSS畫素 https://juejin.im/entry/58b931d1128fe1007e44f918

 

相關推薦