layout布局

主页面的布局不会写在views中，写在layout文件夹/component文件夹

使用的样式一般position：absolute（可以浮动起来，下一个div会上移）

absolute：相对于父元素或浏览器窗口进行偏倚

relative:相对于当前位置进行偏倚

代码

<template>
  <div>
    <div class="header">头部</div>
    <div class="navbar">左侧导航</div>
    <div class="main">主页面</div>
  </div>
</template>

<script>
export default {};
</script>
<style scoped>
/* 头部的样式设置 */
.header {
  position: absolute;
  line-height: 50px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #2d3a4b;
}
/* 左侧菜单样式设置 */
.navbar {
  position: absolute;
  width: 230px;
  top: 50px;
  left: 0px;
  bottom: 0px;
  /* 内容超过，自动加上滚动条 */
  overflow-y: auto;
  background: #545c64;
}
.main {
  border: 1px solid red;
  position: absolute;
  top: 50px;
  left: 230px;
  bottom: 0px;
  right: 0px;
  padding: 10px;
}
</style>

absolute总结：

1，不添加position-》当前位置

2，添加position，不添加TBRL(上下右左) -》当前位置

3. 添加position，添加TBRL-》元素脱离文档流

4. 添加父元素，父元素未使用定位，子元素使用position且添加TBRL-》父元素原本位置，子元素脱离文档流

4. 父元素relative,子元素position且添加TBRL-》子元素相对于父元素位置变化