从CUMT校园导航出现的问题看CSS布局设计（一） CSS盒模型

本文转载于:猿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