FC格式化上下文

最新推荐文章于 2022-05-29 15:57:50 发布

Haley6

最新推荐文章于 2022-05-29 15:57:50 发布

阅读量164

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Haley6/article/details/119055206

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css

FC

FC即格式化上下文(Formatting context),是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，每个格式化上下文都拥有一套不同的渲染规则，他决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

css的3种基本定位机制
- 普通流
- 定位
- 浮动
标准文档流的主要3种元素
- 普通流== 文档流== 标准流 == 标准文档流
- display属性值
  - block
  - inline-block
  - inline
在标准文档流内的盒子属于格式化上下文
常见格式化上下文

BFC

块格式化上下文（Block Formatting Context），BFC 它是一个独立的渲染区域，规定了内部的Box如何布局，并且与这个区域外部毫不相干。

BFC创建

根元素 html标签
浮动元素 属性值是none不能创建bfc
绝对定位脱标的absolute fixed
行内块元素 inline-block
表格
- display:table-cell
- display:table-caption
- 匿名表格单元格元素
  
  display:table......
overflow visible 不能作为开启bfc
弹性盒
网格盒

BFC布局特点

内部box会在垂直方向一个接一个摆放
垂直方向上的距离由margin决定,即一个子元素设置margin不会使得父元素塌陷,但是子元素margin会重叠
每个元素的左外边距与包含块的左边界相接触,即使浮动元素也是如此.position:absolute特殊
计算BFC高度时,浮动元素也参与计算,(可以利用这点清除浮动)
BFC区域不会与Float区域发生重叠
总之,BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素

BFC应用

清除浮动父元素设置overflow:hidden
消除相邻元素垂直方向的边距重叠
- 浮动解决

消除父元素由于子元素设置margin塌陷,父元素设置overflow:hidden

 <style>
      body {
        margin: 0;
        padding: 0;
      }
      .box01 {
        /* 创建BFC */
        /* float: left; */
        width: 200px;
        padding-bottom: 100px;
        background-color: rgb(86, 202, 86);
      }
      .box02 {
        /* 创建BFC */
        /* overflow: auto; */
        width: 150px;
        height: 150px;
        background-color: yellow;
      }
      .box03 {
        width: 20px;
        margin: 30px;
        height: 13px;
        background-color: blue;
      }
      /* 解决边界重叠 */
      /*   .box05 {
        overflow: auto;
      } */
      .box04 {
        margin: 30px;
        width: 10px;
        height: 10px;
        background-color: red;
      }
    </style>
 <body>
    <!-- <div class="box01"></div> -->
    <div class="box02">
      <div class="box03"></div>
      <div class="box04"></div>
    </div>
  </body>

<style>
      body {
        margin: 0;
        padding: 0;
      }
      .box01 {
        /* 创建BFC  清除浮动*/
        overflow: auto;
        width: 200px;
        padding-bottom: 100px;
        background-color: rgb(86, 202, 86);
      }
      .box02 {
        /* 创建BFC */
        float: left;
        width: 150px;
        height: 150px;
        background-color: yellow;
      }
    </style>
 <body>
    <div class="box01">
      <div class="box02"></div>
    </div>
  </body>

IFC

行内布局,内联格式化上下文(（Inline Formatting Context)

应用

文字水平居中
- text-align:center
文字垂直居中(2种)
- vertical-align:center
- 行高==高度

GFC

网格布局(Grid Formatting Context)

开启

display:grid dispaly:inline-grid前者为块级元素,后者为行内元素

网格线

下图是一个2*3网格,共有3根水平网线和4根垂直网格线

属性

容器属性

设置行高列宽 grid-template-rows/columns

属性值:
- 单位:px,fr
- 函数minmax(最小值,最大值),repeat(n,大小),repeat(auto-fill,大小)
- auto表示浏览器自定义宽度
```
 /* 声明了2行,行高为50px 50px 其他与列的值一样*/
grid-template-rows: 50px 50px;
```

设置行列间距grid-gap

 /* 列间距 */
grid-column-gap: 20px;
/* 行间距 */
grid-row-gap: 10px;
 /* 行/列间距简写 */
 grid-gap: 10px 20px;

给划分区域取名字grid-template-areas

 /* 划分6个单元格,然后将其命名为a到f6个区域,分别对应6个单元格  .表示此单元格不利于,命名相同的单元格相当于要合并*/
        grid-template-areas:
          "a c c"
          "d . f";

设置内部item顺序

   /* 默认顺序为"先行后列"(row)  column为先列后行*/
        grid-auto-flow: column;
		若值设为row/column dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。

设置单元格对齐方式

align/justify-items设置多个单元格的水平和垂直对齐方式

place-items:stretch center //先纵轴后主轴
```
等价于
        justify-items: center;
        align-items: stretch;
```

设置在x/y轴对齐方式

justify/align-content

设置整个内容区域的水平和垂直对齐方式
属性值start end center stretch space-around space-between space-evenly

place-content

  /* 表示整个区域在x轴和y轴上整体item的摆放方式*/
    justify-content: space-around;
    align-content: space-evenly;
    /* 下边这个为上边两个的简写属性 */
    place-content: space-evenly space-around;

设置多出的item的宽高 grid-auto-rows/columns

        /* 该属性影响未设置大小的行 */
        grid-auto-rows: 200px;
        /* 该属性影响未设置大小的列 */
        grid-auto-columns: 100px;

简写
- grid-template
- grid
- 不建议

项目属性

设置自己具体位置,根据网格线设置

属性及属性值

/*前提是已经设置了行/列网格线在容器上*/
/*表示列方向上第一个项目占用了从第一根到第三根网格线之间的距离*/
grid-column-start:1;
grid-column-end:3;

/*表示跨越2格 下面两个写一个就好,只不过start是从左往右数2格,end是从第2格位置从左往右跨两格*/
grid-column-start:span 2;
grid-column-end:span 2;

/*简写 表示第1根网格线开始第3根结束 */
grid-column:1 / 3; 

/*把column改成row同理*/

grid-aera

/*表示将该item放到b区域,区域(可以自由定义)在容器中已经定义过,此时grid-row/column将失效*/        
grid-area: b;

可以用作grid-row-start grid-column-start grid-row-end grid-column-end的合并简写形式,直接指定项目位置

        grid-column-start: 2;
        grid-row-start: 2;
        grid-column-end: 3;
        grid-row-end: 4;
		/*等价于*/
        grid-area: 2/2/3/4;

justify-self

align-self

place-self :align-self justify-self的简写
- 给自己定义一种对齐方式
- 属性也有normal/stretch/baseline/center/start/end

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
  </head>
  <style>
    /* 高度是自己撑起的 */
    #container {
      background-color: aqua;
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      grid-auto-rows: 50px;
    }

    .item {
      font-size: 2em;
      text-align: center;
      border: 1px solid #e5e4e9;
    }

    .item-1 {
      background-color: #ef342a;
    }

    .item-2 {
      background-color: #f68f26;
    }

    .item-3 {
      background-color: #4ba946;
    }

    .item-4 {
      background-color: #0376c2;
    }

    .item-5 {
      background-color: #c077af;
    }

    .item-6 {
      background-color: #f8d29d;
    }

    .item-7 {
      background-color: #b5a87f;
    }

    .item-8 {
      background-color: #d0e4a9;
      grid-row-start: 4;
      grid-column-start: 2;
    }

    .item-9 {
      background-color: #4dc7ec;
      grid-row-start: 5;
      grid-column-start: 3;
    }
  </style>
  <body>
    <div id="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </body>
</html>

FFC

弹性盒子布局

diaplay:flex/inline-flex

flex-container属性
flex-item属性

Haley6

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
FC格式化上下文

cssFCFC即格式化上下文(Formatting context),是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，每个格式化上下文都拥有一套不同的渲染规则，他决定了其子元素将如何定位，以及和其他元素的关系和相互作用。css的3种基本定位机制普通流定位浮动标准文档流的主要3种元素普通流== 文档流== 标准流 == 标准文档流display属性值blockinline-blockinline在标准文档流内的盒子属于格式化上下文常见格式化
复制链接

扫一扫