从制作做导航栏中应该学会的东西

1.原则

• 1.1 学会分割任务
  • 不停的切分部件部件：本例中先切分为logo 与导航链接
  • 将样式切分为部件本身独立的样式，与部件之间位置关系的样式
  • 例如 先做小部件的color font，等每个小部件都做好了，再去做部件之间的位置

  • 将小部件先对齐，再考虑居中，父容器大小问题。

    
    思路图

2.知识点汇总

2.1 多列文本水平对齐到底是在做什么？

• 前置知识：字体基础

2.1.1 单列文本对齐

• 单行文本是同字体情况下是基线对齐的，这没有问题，但是不同字体，那就有待商榷了。

2.12 多列文本对齐

• 这种存在多列的情况，往往字体是不统一的，那么字体所处于的位置就不一定相同了。就不会默认基线对齐了
• css中并没有基线的概念，你只能控制content-area或者line-height。但是如果你想让文本处于容器的基线上，就只能手动调整。
• 具体实现基线对齐的方式，除开手动调影响垂直位置的属性（padding margin font-size），有其他的方法，但是我还没研究好。请期待后续。

2.2 零散知识点

• 2.2.1float布局注意点
  • 清除浮动消除对后续element影响 父元素
  • 父元素+clearfix
  • 子元素 float:+direction;
  • .clearfix::after{content:'';display:block;clear:both;}
• 2.2.2float加在哪里
  • 本例中需要浮动的组件结构是nav>ul>li>a
  • 我们需求的效果是将ul中的元素向右浮动
  • float 加在ul或者li上的视觉效果是一样的，但是具体给ul加上背景颜色你就能看到区别