bfc 订阅
扁粉菜是河南省安阳市的传统特色小吃之一,属于豫菜系。是安阳居民最爱吃的饭菜之一。 扁粉菜以粉条做主料,配以青菜、豆腐、猪血等,在一口大铁锅中煮。扁粉菜的关键是高汤,高汤味道的好坏,直接影响扁粉菜的味道,因此,安阳扁粉菜经营者一直在高汤的做法上下功夫,使扁粉菜味道不断改善。吃扁粉菜的精髓在于辣椒,辣椒要香而微辣。 展开全文
扁粉菜是河南省安阳市的传统特色小吃之一,属于豫菜系。是安阳居民最爱吃的饭菜之一。 扁粉菜以粉条做主料,配以青菜、豆腐、猪血等,在一口大铁锅中煮。扁粉菜的关键是高汤,高汤味道的好坏,直接影响扁粉菜的味道,因此,安阳扁粉菜经营者一直在高汤的做法上下功夫,使扁粉菜味道不断改善。吃扁粉菜的精髓在于辣椒,辣椒要香而微辣。
信息
主要食材
青菜、豆腐、猪血,粉条等等
流行地区
河南省安阳市
分    类
豫菜
中文名
扁粉菜
口    味
香辣爽口
扁粉菜制作方法
扁粉菜的制作原料和工艺都很简单,大多是以大锅菜、扁粉条为主要原料。首先熬一大锅的高汤,将扁粉条下锅煮熟,再烩入豆腐片、猪血片和青菜。此处要特别提出一点,扁粉条在下锅之前应先用高汤泡制4~6小时,这样可以保证扁粉条更好吸收高汤的味道和营养。
收起全文
精华内容
下载资源
问答
  • bfc
    2022-03-21 21:31:46

    一、写在前面
    今天看到一道面试题,主要是关于BFC的理解,下面将针对BFC的相关特性做出总结。
    二、何为BFC

    BFC(Block Formatting Context)格式化上下文,是
    web页面中盒子模型布局的CSS渲染模式,指的是一个独立
    的渲染区域或者是一个隔离的独立容器。
    

    三、形成BFC的条件

    1、浮动元素,float除none以外。
    2、定位元素,position(absolute, fixed)
    3、display为以下其中之一的值:inline-block,table-cell,table-caption.
    4、overflow除了visible以外的值(hidden,auto, scroll)
    

    四、实践
    4.1、BFC中的盒子对齐

    内部的Box会在垂直方向上一个接着一个的放置。
    

    4.2、外边距重叠
    在正常的文档流中,两个兄弟盒子之间的具有由其外边距决定的,但是不是他们的外边距之和决定的,而是以较大的为准。

    <!DOCTYPE html>
    <html lang="cn">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          margin: 0px;
          padding:0px
        }
        .container {
          overflow: hidden;
          width: 100px;
          height: 100px;
          background-color: red;
        }
    
        .box1 {
          height: 20px;
          margin: 10px 0;
          background-color: green;
        }
    
        .box2 {
          height: 20px;
          margin: 20px 0;
          background-color: green;
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
    
    </body>
    
    </html>
    

    这里我们可以看到,第一个盒子存在上边距(因为使用BFC不会造成margin穿透问题);但是两个盒子之间的距离是20px,而不是30px,因为垂直外边距会存在折叠问题,间距以较大的为准。
    此时我们就可以使用另一个特性,bfc就是页面上的一个独立容器,容器里面的子元素不会影响外部元素,此时我们就可以在其中一个子元素的外层嵌套一层div,然后设置BFC

    <!DOCTYPE html>
    <html lang="cn">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          margin: 0px;
          padding:0px
        }
        .container {
          overflow: hidden;
          width: 100px;
          height: 100px;
          background-color: red;
        }
    
        .box1 {
          height: 20px;
          margin: 10px 0;
          background-color: green;
        }
    
        .box2 {
          height: 20px;
          margin: 20px 0;
          background-color: green;
        }
        .wapper {
          overflow: hidden;
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="wapper">
          <div class="box1"></div>
        </div>
        <div class="box2"></div>
      </div>
    
    </body>
    
    </html>
    

    4.3、不被浮动元素覆盖
    如果我们想要实现两栏布局,比如说左边固定宽度,右边不设置宽度,此时右边自适应宽度,随着浏览器窗口的大小而改变。在没有设置BFC的时候,此时就会发现浮动元素就会覆盖right的元素,但是如果我们想要实现两栏布局,此时我们可以给right的元素设置BFC,因为设置BFC会不影响外部。

    <!DOCTYPE html>
    <html lang="cn">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .column:nth-of-type(1) {
          float: left;
          width: 200px;
          height: 300px;
          margin-right: 10px;
          background-color: red;
        }
    
        .column:nth-of-type(2) {
          overflow: hidden;
          height: 300px;
          background-color: purple;
        }
      </style>
    </head>
    
    <body>
    
    
      <div class="column"></div>
      <div class="column"></div>
    
    
    </body>
    
    </html>
    

    在这里插入图片描述
    4.4、三栏布局
    左右两边固定,中间不设置宽度,因此中间的宽度自适应,随着浏览器的大小变化而变化。

    <!DOCTYPE html>
    <html lang="cn">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
    
        .column:nth-of-type(1),
        .column:nth-of-type(2) {
          float: left;
          width: 100px;
          height: 300px;
          background-color: green;
        }
    
        .column:nth-of-type(2) {
          float: right;
        }
    
        .column:nth-of-type(3) {
          overflow: hidden;
          /*创建bfc*/
          height: 300px;
          background-color: red;
        }
      </style>
    </head>
    
    <body>
    
      <div class="contain">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
      </div>
    
    </body>
    
    </html>
    

    4.5、可以防止字体环绕
    众所周知,浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被遮盖的,文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。
    在这里插入图片描述
    但是我们如果不想让字体环绕,此时可以使用BFC,进行设置。

    <!DOCTYPE html>
    <html lang="cn">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .left {
          width: 200px;
          height: 200px;
          background-color: green;
          float: left;
        }
    
        .right {
          background-color: red;
          height: 300px;
          overflow: hidden;
        }
      </style>
    </head>
    
    <body>
    
      <div>
        <div class="left"></div>
        <div class="right">你好你好你好你好你好你好你好你好你好你好你好
          你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
          你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
          你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
          你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
          你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
      </div>
    
    </body>
    
    </html>
    

    此时展现的效果就为:
    在这里插入图片描述
    4.6、BFC包含浮动的块
    如果我们使用浮动,则该元素就会脱离正常的文档流,则会造成父元素高度的坍塌,此时我们可以对其使用overflow:hidden来对其设置。

    更多相关内容
  • BFC概念:  块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。 我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上...
  • 之前一直听到有人提到 CSS里的BFC,正巧在 IFE的练习里遇到了外边距折叠的问题,所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference) 一 什么是 BFC 和之前所有博文一样,还是先从What的角度开始介绍,...
  • 详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得,但是你肯定会常用到,也许你在用的时候也没想到BFC这东西。那它究竟是什么呢,我们来一起看一下。 官方给出的BFC解释是这样的,浮动元素...
  • tensorflow设备内存管理模块实现了一个best-fit with coalescing算法(后文简称bfc算法)。 bfc算法是Doung Lea’s malloc(dlmalloc)的一个非常简单的版本。 它具有内存分配、释放、碎片管理等基本功能。 2. bfc基本...
  • BFC BFC:块级格式化上下文 BFC的布局规则 内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 计算BFC的高度时,浮动元素也参与计算...
  • 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,...
  • 1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box(块级元素)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗...
  • BFC

    2021-01-18 17:12:26
    CSS布局中的BFC问题 面试题–边距重叠 什么是边距重叠? 什么情况下会发生边距重叠? 如何解决边距重叠? 边距重叠:两个box都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终...

    CSS布局中的BFC问题

    面试题–边距重叠

    1. 什么是边距重叠?
    2. 什么情况下会发生边距重叠?
    3. 如何解决边距重叠?

    边距重叠:两个box都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。

    有两种边距重叠的情况

    1.父子关系的重叠

    父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距

    在这里插入图片描述

    给父元素添加 overflow:hidden
    这样父元素就变为 BFC,不会随子元素产生外边距

    在这里插入图片描述

    <style>
    .out {
    background-color: #f00;
    width: 200px;
    height: 200px;
    }
    
    .inner{
    margin-top: 50px;
    width: 100px;
    height: 100px;
    background-color: blue;
    }   
    </style>
    <div class="out">
        <div class="inner"></article>
    </div>
    
    
    

    2. 同级兄弟关系的重叠:

    同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个

    在这里插入图片描述

      <style type="text/css">
                .fat {
                    background-color: #ccc;
                }
                .fat .child-one {
                    width: 100px;
                    height: 100px;
                    margin-bottom: 50px;
                    background-color: #f00;
                }
    
                .fat .child-two {
                    width: 100px;
                    height: 100px;
                    margin-top: 20px;
                    background-color: #345890;
                }
            </style>
       <section class="fat">
            <div class="child-one"></div>
            <div class="child-two"></div>
        </section>
    
    

    可通过添加空元素或伪类元素,设置overflow:hidden;解决margin重叠问题
    在这里插入图片描述

    回答边距重叠—BFC

    什么是BFC?

    BFC就是块级格式化上下文的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题,BFC并不是专门用来解决这个问题而创的;

    如何触发BFC?
    在box属性值为这些的情况下,都会让所属的box产生BFC。

    • overflow: auto/ hidden;
    • position: absolute/ fixed;
    • float: left/ right;
    • display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

    也可以用排除法:

    • overflow的值不是visible;
    • position的值不是static或relative
    • float的值不是none
    • display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
      inline-flex

    BFC的原理?(面试可不说,但要理解)

    1. BFC内部的盒子,会在垂直方向,一个接一个地放置。垂直方向上也会发生边距重叠。
    2. BFC就是页面上的一个独立容器,容器里面的子元素不会影响到外面的元素,外边的也不会影响里边的。
    3. BFC的区域不会与float重叠。
    4. 计算BFC的高度时,浮动元素也被计算在内。

    BFC的应用

    1. 可以用来自适应布局

    利用BFC的这一个原理就可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。

    在这里插入图片描述

    给right加overflow:hidden;使其变成BFC,消除外部left因浮动对他的影响
    在这里插入图片描述

    <!-- BFC不与float重叠 -->
    <section id="layout">
            <style media="screen">
              #layout{
                background: red;
                height: 200px;
              }
              #layout .left{
                float: left;
                width: 100px;
                height: 80px;
                background: blue;
              }
              #layout .right{
                height: 100px;
                background:green;
                overflow: hidden;
              }
            </style>
            <div class="left">left</div>
            <div class="right">right</div>
        </section>
    
    

    2. 可以清除浮动:
    在这里插入图片描述

    父元素加overflow:hidden/auto,变BFC
    在这里插入图片描述

    <!-- BFC子元素即使是float也会参与计算 -->
          <style>
            #out{
              background: red;
              border: 1px solid black;
              overflow: hidden;
            }
            #inner{
              float: left;
               width: 200px;
               height: 200px;
               background-color: blue;
            }
          </style>
        <div id="out">
            <div id="inner">我是浮动元素</div>
        </div>
    
    

    3. 解决垂直边距重叠:

    见上方案例

    展开全文
  • 说在前面 文档流 文档流包括浮动流、定位流以及普通的标准流。 一、常见的几种页面布局 静态布局 定位布局 流式布局 弹性布局 自适应布局 响应式布局 圣杯、双飞翼、栅格布局 ...特点: 传统的网页布局形式,页面上的...
  • BFC-开源

    2021-05-15 00:51:27
    适用于多种操作系统的本机Brainf * ck编译器。
  • HTML-bfc初探

    2017-08-03 22:04:48
    HTML-bfc初探
  • BFC详细介绍BFC详细介绍
  • 前端bfc的介绍与使用

    2020-02-23 14:01:54
    关于BFC的介绍与使用 这篇文章是我对BFC的理解及总结 带你们了解bfc的布局规则,使用方法,触发条件等内容,理解简单。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,003
精华内容 20,001
关键字:

bfc