CSS布局—布局类型（普通流、定位、浮动 等）

参考：https://juejin.cn/post/7070001080960024583  或  https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout      

文档流（流式布局）分为 普通流、定位流、浮动流，不同流内的块级元素和行内元素的布局方式不同，布局方式用 FC（格式化上下文，含有 块级格式化上下文、内联格式化上下文、层叠格式化上下文、灵活格式化上下文等）来命名；

一、普通流（常规流）：也就是标准文档流

　　默认的一些规则：

  • 占据空间大小：
    • 块级元素的内容宽度是其父元素的100%，其高度与其内容高度一致。
    • 内联元素的height width与内容一致。你无法设置内联元素的height width --- 它们就那样置于块级元素的内容里。 如果你想控制内联元素的尺寸，你需要为元素设置display: block; （或者，display: inline-block; inline-block 混合了inline 和 block的特性。)
  • 元素之间相互影响
    • 块级元素按照基于其父元素的书写顺序(默认值: horizontal-tb)的块流动方向(block flow direction)放置 --- 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。
    • 内联元素的表现有所不同 --- 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。
  • margin 重叠：如果两个相邻的元素都设置了margin 并且两个margin有重叠，那么更大的设置会被保留，小的则会消失 --- 这被称为外边距叠加，我们之前见到过。

　　总结：普通流中的布局规则默认为块级盒子从上到下，垂直排列；内联盒子从左到右，水平排列等；（书写模式（writing-mode）会对流布局产生影响；

二、position（定位）

　　属性有：

    • static：默认值，元素依然按照 普通流 的定位规则定位；
    • relative
    • absolute
    • sticky
    • fixed

　　使用 position 会脱离常规流，成为定位流，并有其自己的定位规则；

　　详细信息请看 另外 一篇文章《CSS布局-定位》

三、float（浮动）

　　属性有：

    • left
    • right
    • none
    • inherit

　　使用 float 会脱离常规流，成为浮动流，并有其自己的定位规则；

四、table布局   https://www.jianshu.com/p/198329ff1f70

  • 普通流下： 
    .box{
  width: 100px;
  height: 30px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ccc;
}
<div class="box">
   <span>文本文字</span>
</div>
  • 等高布局【参考上述链接】
  • 浮动元素水平垂直居中【参考上述链接】
  • 固定宽度剩余自适应布局【参考上述链接】

五、flex 布局（弹性盒）

  • 认识 弹性盒子 Flexbox：
    • 弹性盒子是一种用于按行或按列布局元素的一维布局方法，即 按 主轴 布局 元素的。
    • 元素可以膨胀以填充额外的空间，收缩以适应更小的空间；
      即使我们给元素设置了 width/height，元素还是可以膨胀或收缩的。（flex item 最终展示出来的宽度和 设置的width 有关系，但没有必然性。）
    • 通常我们使用Flexbox来进行布局的方案称为flex布局；
  • 两个重要的概念：
    • 开启了flex布局的元素叫 flex container（flex 容器）
    • felx container 里面的直接子元素叫做 flex item（ flex 项目)
  • 当 flex container 中的子元素变成 flex item时，具备以下特点：
    • flex item 的布局将受flex container属性的设置来进行控制和布局；
    •  flex item 不再严格区分块级元素和行内级元素;【注意，flex容器还是区分是否块级元素的】
    •  flex item 默认情况下是包裹内容的(类似inline-block的特性),但是可以设置宽度和高度;。即在没有设置宽高时，flex item默认的宽高就是内容撑出来的。
  • 设置 display 属性为 flex 或者 inline-flex 可以成为 felx container
    • flex：flex container 以 块级 形式 存在；
    • inline-flex：flex container 以 行内级 形式 存在；
  • flex 布局的模型 相关概念：
    • 主轴 / 交叉轴
    • main start、main end
    • 交叉轴 start、交叉轴 end

  • flex container 容器的属性：
    感悟：一般我们 不设置 flex container 的 高度，由内容撑出来。

    • flex-direction：决定主轴 方向，有4个方向。
      可以设置 行 为主轴，也可以设置 列 为主轴。以及他们的反转方向。
    • flex-wrap：决定了 flex container 是单行还是 多行
      • nowrap（默认）：单行
      • wrap：多行
      • wrap-reverse：交叉轴反向
        注意：只有多行才有交叉轴的作用，所以设置交叉轴是否反向，在 felx-wrap属性上，多行的同时 反向。
    • flex-flow：flex-direction 和 flex-wrap 的简写属性。没有顺序的要求
    • justify-content：决定了 felx items 在 主轴上的对齐方式 
      1、flex-start（默认值）：与主轴 start 对齐
      2、flex-end
      3、center
      4、space-between：flex items 之间距离相等；与 main start、main end 两端对齐。
      5、space-around：lex items 之间距离相等；flex item与 main start、main end 之间的距离是item之间距离的一半。
      6、space-evenly：lex items 之间距离相等；flex item与 main start、main end 之间的距离等于 item 之间的距离。
    • align-items：决定了 flex item 在 交叉轴上的对齐方式
      1、normal：在特性布局中，效果和 stretch 一样
      2、stretch： 当 flex items 在 cross axios 方向的size为auto（就是交叉轴方向的长度为auto）时，会自动拉伸至填充 flex container。
      3、flex-start：与cross start 对齐
      4、flex-end：与cross end 对齐
      5、center：居中对齐
      6、baseLine:：与基线对齐，就是字母x的底部位置。
    • align-content：决定了多行 felx items 在 交叉轴上的对齐方式，用法与 justify-content 类似
      1、streth：与 align-items 的 stetch 类似；
      2、flex-start：与 cross start 对齐
      3、flex-end：与cross end 对齐
      4、center：居中对齐
      5、space-between：交叉轴上，与 justify-content 用法类似
      6、space-around：交叉轴上，与 justify-content 用法类似
      7、space-evenly：交叉轴上，与 justify-content 用法类似

  • flex item 项目的属性

    • order：决定了flex items 的 排布顺序。
      值越小就越排在前面
    • align-self：通过 align-self 可以覆盖 felx container 设置的align-items，即 允许单个项目有与其他项目不一样的对齐方式。
    • flex-grow：决定了 flex items 如何 扩展（拉伸/成长）
      当flex container 在 主轴 方向有剩余size时，flex-frow 属性才会有效（即，有剩余空间，item 才可以扩展）；默认值为0；
    • flex-shrink：决定了 felx items 如何 收缩。
      当flex container 在 主轴 方向有上 超过了 flex container的 size时，flex-shrink 属性才会有效（即，itme 默认宽度之和大于容器，才会发生收缩）；默认值为1；
    • flex-basis：
    • flex ：简写

　　案例：实现 从 左到右 自动 换行的。
　　　　　最关键是要在添加列数减2个<i>标签

    <!--  实现 4列 的布局  -->
    <div class="container">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
        <div class="item item5"></div>
        <div class="item item6"></div>
        <!--  添加 i 的个数是列数减-2  -->
        <i></i>
        <i></i>
    </div>

六、grid（网格）

　　二维布局方式，相对于使用 HTML 结构实现的 table 布局，grid 布局都是在 CSS 中完成的；

　　重要的概念：grid 容器、grid 项目、行、列、单元格、网格线；

　　设置某个元素的属性 display: grid; ，此元素就成了 grid 容器，grid 容器的直接子元素就是 grid 项目；

  1. grid 容器的属性

    • grid-template-columns
    • grid-template-rows
    • gap（column-gap、row-gap）
    • palce-items（justify-items、align-items）
    • place-content（justify-content、align-content）
    • grid-template-areas
    • grid-auto-flow
    • grid-auto-columns、grid-auto-rows

  2. grid 项目的属性

    • grid-column-start、grid-column-end

      grid-row-start、grid-row-end

      grid-column

      grid-row

    • grid-area

    • justify-self、align-self

      place-self

七、column-count（多列布局 ）

 

posted @ 2019-09-07 09:39  吴飞ff  阅读(4715)  评论(0)  编辑  收藏  举报