组件逻辑系列—SiteAside侧边栏组件（第一版）

最新推荐文章于 2023-11-11 15:57:41 发布

平平凡凡不普通人

最新推荐文章于 2023-11-11 15:57:41 发布

阅读量147

点赞数

分类专栏：组件逻辑文章标签： vue

本文链接：https://blog.csdn.net/weixin_46317555/article/details/116131434

版权

组件逻辑专栏收录该内容

11 篇文章 0 订阅

订阅专栏

侧边栏组件(SiteAside)

第一版 4月25日 16:01

组件逻辑

封装头像组件，菜单组件，连接组件·

代码

<template>
  <div class="site-aside-container">
    <Avatar url="头像路径" />
    <h1 class="title">这是一个侧边栏</h1>
    <Menu />
    <Contact />
    <p class="footer">
      地ICP备17309283号
    </p>
  </div>
</template>

<script>
import Avatar from "@/components/Avatar";
import Menu from "./Menu";
import Contact from "./Contact";
export default {
  components: {
    Avatar,
    Menu,
    Contact,
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.site-aside-container {
  width: 100%;
  height: 100%;
  background: @dark;
  padding: 20px 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
.avatar-container {
  margin: 0 auto;
}
.footer {
  text-align: center;
  font-size: 12px;
}
.title {
  font-size: 1.2em;
  color: #fff;
  text-align: center;
}
</style>

细节

overflow复习

属性

visible,默认值,内容可见

hidden,隐藏，不提供滚条

scroll,隐藏，默认携带滚条

auto,隐藏，如果内容有超出则定义滚条

块格式化上下文BFC

创建

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）

影响

常规流块盒的布局的四种影响：

常规流块盒在水平方向上，必须撑满包含块；
常规流块盒在包含块的垂直方向上依次摆放；
常规流块盒若外边距无缝相邻，则进行外边距合并；
常规流块盒的自动高度和摆放位置，无视浮动元素

独立的，不同的BFC区域，它们进行渲染时互不干扰,四种情况:

创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部;
创建BFC的元素，它的自动高度要计算浮动元素 overflow：hidden;
创建BFC的元素，它的边框盒不会与浮动元素重叠;
创建BFC的元素，不会和它的子元素进行外边距合并

平平凡凡不普通人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件逻辑系列—SiteAside侧边栏组件（第一版）

侧边栏组件(SiteAside)第一版 4月25日 16:01组件逻辑封装头像组件，菜单组件，连接组件·代码<template> <div class="site-aside-container"> <Avatar url="头像路径" /> <h1 class="title">这是一个侧边栏</h1> <Menu /> <Contact /> <p class="
复制链接

扫一扫

专栏目录