前端实践笔记（一）

    本人在校大三本科生，最近开始了自己的项目生涯，特来分享实践心得，新手上路，可能错误百出，请dalao们指正。本系列文章主要记录自己在实践中遇到的问题，以及解决心得。

    ①实践遇到的第一个问题就是移动端屏幕适配。上网寻求解决办法时找到了啃先生提供的解决方案，贴上链接（点击打开链接）。但是使用过程中发现，，我们的rem和px的比例是是由屏幕的宽度计算出来的，所以在一些宽屏的设备上，rem没有想象中的那么好用，比如在设置垂直方向的偏移量的时候，宽屏可能达不到想要的效果。所以我觉得在垂直方向上使用百分比更合适。
  ②absolute定位，absolute使元素脱离文档流，可以对他进行left，right，top，bottom的移位操作。但是如果一个元素的width，height设置的是百分比的话，absolute后元素的宽将根据body的宽进行计算。高也变化了，但是我找不出它是根据什么计算的，还请dalao们解答。对于没有设置宽高的元素，absolute后元素大小将和内容一样。设置了固定宽高的元素没有变化。

  ③bootstrap提供的小图标样式，如icon-money，如果是<img class="icon-money ">小图标会带个小圆点，所以建议不要使用img。推荐使用span

   ④bootstrap设置了body样式，自己使用外联样式时，记得加上！important，覆盖bootstrap样式。否则达不到自己想要的效果

  ⑤我也遇到了一个比较经典的问题，就是居中问题，先贴上一篇博客（点击打开链接）。水平居中，文本可以使用text-align使文本居中。对于固定宽度的块状元素可以自身设置margin-left:autuo，margin-right:autuo实现水平居中。对于不确定宽度的块状元素，我觉得设置父级元素text-align:center;然后自身display:inline;比较好用，不会产生其他问题，而使用其他两个方法多少会遇到附带问题。

⑥<p>标签带有10pxmargin-bottom使得元素不能在父元素中垂直居中。span标签则不会。这也是为什么上面第三点推荐使用<span>的原因。