仿做北大官网首页时出现的问题总结

一，布局问题
布局是一开始就要考虑的事情，特别是要适应不同屏幕大小的设备。
1.切勿用absolute把盒子移到特定的位置
定位的正确用法：
定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。
2.布局的时候建立一种动态思想，布局任何一个地方的时候，多移动移动浏览窗口，看看是否还会达到自己想要的效果。
3.边想边写，实践才是真理。
二，选择器命名问题
命名一定要见名知意，不然真的狠狠狠容易出现重复，或忘记它是干什么的
三，下拉菜单
用display的方法，
下拉菜单里图文结合时， 不在适合flex布局，以及将块元素转化为行内块元素这种写法，
float浮动可以把下拉菜单里面的内容全部变为行内块元素。
四，调试工具
利用好调试工具，盒子的宽高，内外边距，填充，都可以直接调试好直接复制粘贴到自己的代码中；网页出现bug时也很容易找到问题的根源。
五，简化
父元素里有很多子元素共用相同的属性值时，可以直接在父元素内添加。
六，盒子的大小
边框会额外增加盒子的实际大小，因此我们有两种方案解决：
测量盒子大小的时候，不要量取边框
如果测量的时候包含了边框，则需要width/height减去边框宽度
内边距会额外增加盒子的实际大小。如果想要保证盒子跟效果图的大小一致，则应该让width/height减去多出来的内边距大小。
如果盒子本身没有设置width/height属性，则此时padding不会撑开盒子大小
七，小盒子在大盒子内垂直水平居中
方法： 定位+外边距、2D转换（不会影响其他的盒子）、外边距，

嵌套块元素垂直外边距的塌陷

解决方法，
1)为父元素添加上边框（transparent透明边框）
2）为父元素添加内边距
3）为父元素添加 overflow:hidden