知源笔记

CSS 布局定位

无忌 发表于

基础知识

display 属性的取值:

  • none: 此元素不显示
  • block: 块级元素, 从上到下, 每个元素都会另起一行, 默认填满父级元素的宽度
  • inline (默认): 行内元素, 内联元素, 大小由内容撑开
  • inline-block, 行内块元素, 简单来说就是不独占一行的块级元素.
  • flex

CSS 有三种基本定位机制: 普通流, 浮动和绝对定位.

position 属性的取值:

  • static (默认): 静态定位. 对象遵循标准文档流, top, right, bottom, left 等属性失效
  • relative 相对定位. 对象遵循标准文档流, 依赖 top, right, bottom, left 等属性相对于该对象在标准文档流中的位置进行偏移, 同时可通过 z-index 定义层叠关系
  • absolute 绝对定位. 对象脱离标准文档流, 使用 top, right, bottom, left 等属性进行绝对定位 (相对于 static 定位以外的第一个父元素进行绝对定位) 同时可通过 z-index 定义层叠关系
  • fixed 固定定位. 对象脱离标准文档流, 使用 top, right, bottom, left 等属性进行绝对定位 (相对于浏览器窗口进行绝对定位) 同时可通过 z-index 定义层叠关系

flex 布局

Element 布局容器

  • 一共有 5 个组件 el-container, el-header, el-aside, el-main, el-footer.
  • 当 el-container 的子元素中包含 el-header 或 el-footer 时, 全部子元素会垂直上下排列; 否则水平左右排列.
  • el-container 的子元素 (只能) 是后四者; 后四者的父元素也只能是 el-container.
  • el-container 的子元素可以有 el-container
  • 样式路径 element/packages/theme-chalk/src
    • container.scss, 本质是 flex box
    • aside.scss, flex-shrink, overflow: auto
    • main.scss, flex: 1, overflow: auto
    • header.scss, flex-shrink
    • footer.scss, flex-shrink
@include b(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;

  @include when(vertical) {
    flex-direction: column;
  }
}
@include b(main) {
  // IE11 supports the <main> element partially https://caniuse.com/#search=main
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: $--main-padding;
}
@include b(aside) {
  overflow: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}
@include b(header) {
  padding: $--header-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}
@include b(footer) {
  padding: $--footer-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}

多列滚动, 否则 section

el-container.hui-scroll-box
  el-container.hui-hskipp
    el-header(style='padding:0' height='47px')
      el-form(inline label-suffix=':' @submit.native.prevent)
        // 工具栏部分
    el-main(style='padding:0')
      // 主体部分
  el-aside(width='396px')    
    // 侧边栏
el-container.hui-scroll-box
  el-container.hui-hskipp
    el-header(style='padding:0' height='47px')
    el-main(style='padding:0')
  el-main(style='padding:0')
el-container
  el-aside
  el-container
    el-header
    el-main
    el-footer
el-container
  el-aside
  el-main
el-container
  el-header
  el-container
    el-aside
    el-main
el-container
  el-header
  el-container
    el-aside
    el-container
      el-main
      el-footer

全屏编辑器, 最大化, 将 el-main 设置为 relative, 将 MarkedEditor 用 absolute 定位, 撑满整个容器.

参考资料