前端项目的N个Point（第一期）

1.设置footer位置

让页面footer在正文内容不够是置于屏幕底部，当正文内容超过屏幕高度时置于正文底部

• html布局

  <template>
    <div class="page-container">
        <header-nav></header-nav>
          <router-view class="main-layout"></router-view>
          <footer-nav></footer-nav>
    </div>
  </template>
  

• 启用flex模式，我们将class="page-container"的div的 display 属性设置为 flex, 然后将方向属性设置为列。

  .page-container {
    padding: 0;
    width: 100%;
    min-height:100%;
    height: 100%;
    margin: 0;
    display: flex;//启用flex
    flex-direction: column;//设置为列
  }
  

• 设置header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域

  //header部分css
  .header{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:80px;
    z-index: 9999;
    background: darkslateblue;
    /* header 采用固定的高度，只占用必须的空间 */
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 0 0 auto;
  }
  
  //主体部分css
  .main-layout {
    margin-top: 80px;
    width: 100%;
    /* 将 flex-grow 设置为1，该元素会占用所有的可使用空间而其他元素该属性值为0，因此不会得到多余的空间*/
    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 1 0 auto;
  }
  
  //footer部分css
  .footer{
    text-align: center; 
    width:100%;
    height: 60px;
    line-height: 60px;
    clear: both;
    background:rgb(61, 60, 60);
    color: white;
    /* 和 header 一样，footer 也采用固定高度*/
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 0 0 auto;
  }
  

2.Vue中CSS的作用域

• 当 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。

• 可以在一个组件中同时使用有作用域和无作用域的样式

  <style>
  /* 全局样式 */
  </style>
  
  <style scoped>
  /* 本地样式 */
  </style>
  

3.深度作用选择器

• 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符

  <style scoped>
  .a >>> .b { /* ... */ }
  </style>
  

• 上述代码会编译为：

  .a[data-v-f3f3eg9] .b { /* ... */ }
  

4.不要滥用内联样式与!important

• 内联样式的权重很高，很难被覆盖重写

• !important权重最高，只能被!important覆盖

• 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important

• 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important

• 永远不要在你的插件中使用 !important

• 永远不要在全站范围的 CSS 代码中使用 !important