从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. 之后遇到的样式调整细节问题都会补充在这篇里。