本文轉載於:猿2048網站從CUMT校園導航出現的問題看CSS佈局設計(一) CSS盒模型php
先說說作的這個校園導航系統值得一提的內容:前端
1. 二級菜單欄 、iframe內嵌窗口(樣式設計、用hover作效果)數據庫
2. 高德地圖API (自定義底圖樣式、彈跳點、信息窗體、線路導航)編程
3. DOM裏的函數 getElementById( ); (看了《JS DOM編程藝術》)bootstrap
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