【记录】前端实践总结和疑问1

记录一下悲催的一天，有好多事要干偏偏选择了写前端。。。新手上路太痛苦了
做了太久不想再继续浪费时间，有些问题就搁置了，以后慢慢一个一个干掉！

HTML

1. 不同的组件块用<div>分隔还是很实用，不然真的不知道怎么摆了，元素跳来跳去的。
2. 对于<img>不知道怎么怎么写css，就直接在html里面写了style="padding-left: 45px;" 看了谷歌百度的首页，很多html都直接使用了css样式。

CSS

1. 至今还不知道有什么方法可以直接让元素居中。我现在采用的是这样的：页面呈现的内容用两个<div>包裹，第一个属性为 height: 100%; width: 100%; position: absolute; z-index: 100;，第二个 width 属性为页面的最大宽度，还使用了 margin: 0 auto; 来居中。知道了这个最大宽度后，里面包含的所有元素都能根据自身的大小来计算向右偏移多少个像素点。

Vue

• 路由是最让我郁闷的，按照我模仿的一个项目写，但就是搞不出来，最后我在App.vue中加了<router-view></router-view>才能使用，而且这段代码不能分开，也不能放在后面，但模仿的代码中不存在这个值也可以跳转，不明白这其中的原理？这样最后虽然是跳转了，但开发者工具显示内容是包在原来的页面中的，这样会不会存在一些隐性的问题？
• 页面跳转成功后，发现原来的登陆界面有点变形，有一个是因为跳转后的页面和原页面使用了相同的 class ，结合上个问题的第二小问，它是怎么控制原界面的元素不显示的？当存在原网页某个元素的 css 样式时，它为何又会显示出来呢？
• 模仿的代码中 import 使用了 @，查资料说是 build/webpack.base.conf.js的resolve实现的功能，但我修改了之后项目会报错，说resolve not defined 放弃使用

疑问

• 大概知道 padding 是什么，我以为它们的值与长和宽相加为实际的值，但搞出来不是这样的，为什么？
• position relative 和 absolute 的区别？

较好的参考博文

1. vue-router页面跳转