首页 > TAG信息列表 > BFC

第 39 题:介绍下 BFC 及其应用。

BFC 就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。创建 BFC 的方式有: html 根元素 float 浮动 绝对定位 overflow 不为 visiable display 为表格布局或者弹性布局 BFC 主要的作用是: 清除浮动 防止同一 BFC

一篇文章带你搞定BFC~

一、什么是BFC 是 Block Formatting Contexts 的缩写,名为“块级格式化上下文”。 是指浏览器中创建了一个独立的渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。   二、BFC的特点 具有 BFC 特性的元素可以看作是隔离了的独立容器,容器

html + css基础问题

如何理解html语义化? 1、让人更容易读懂(增加代码可读性 2、让搜索引擎更容易读懂(SEO) 盒模型宽度 box-sizing margin负值的问题 margin-top 和 margin-left ,元素向上,向左移动 margin-rightf负值,右侧元素左移动,自身不受影响 margin-bottom 负值下方元素上移,自身不受影响 什么是BF

前端里的BFC是什么,如何理解,如何创建BFC

BFC是什么 BFC的全称:block formatting context(块级上下文) 它是一个独立的渲染区域,只有它规定了内部的Block level box如何布局,并且与这个区域外部毫不相干 如何让理解BFC 具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素 可以理解为BCF

BFC ( 块级格式化上下文 )

一. 什么是BFC ?   1. 直译过来为块级格式化上下文,其布局方式实现核心为“隔离” ,可以将其理解为一个容器   2. 其目的是形成一个相对独立的容器空间,使其内部的子元素处于一个独立的bfc容器,进而不影响bfc容器外部区域   3. 需要注意的是,其生效界限为第一层子元素,而不包括bfc

五、BFC

1.理解BFC BFC,全称“块级格式化上下文”(block formatting context),可以为元素提供一个独立的空间,将元素内部的内容与外部的上下文隔离开,不会相互影响。这种隔离为创建BFC的元素做了以下事情: 包含了内部所有元素的上下外边距,它们不会跟BFC外面的元素产生外边距折叠(内部元素与其创建

HTML & CSS 部分

1、流式布局:百分比自适应布局 pc端可以通过设置版心来,完成不同屏幕的适配? 移动端一般采用流式布局(百分比布局) 1. 高度定死,宽度自适应 2. 对于大的轮播图等,宽度100%自适应 3. 对于小图标挥着文本,一般都是固定宽高大小 流式布局的缺点: 对于大屏幕来说,用户体验并不是特别好

BFC块级格式化上下文

BFC Blocking Fomatting Context 块格式化上下文 是Web页面的可视化CSS渲染的一部分,是浮动元素与其他原色交互的区域   ①BFC是一个独立的布局空间,BFC内部元素布局与外部互不影响 ②可通过一些条件触发BFC   触发条件: ①根元素html ②float不为none ③overflow不为visible ④d

BFC

Block Formatting Context(块级格式化上下文) 1.每一个BFC区域只包括其子元素,不包括其子元素的子元素 2.每一个BFC区域都是独立隔绝的,互不影响。 3.触发BFC的条件 body根元素 弹性布局flex position定位 absolute,fixed 单元格table-cell 行内块 inline-block 设置overfl

【Web前端HTML5&CSS3】08- 高度塌陷与BFC

高度塌陷与 BFC BFC:             全称:Block Formatting Content;是一个与上下文无关的独立的渲染区域;(块级格式化上下文)             是一种布局规则:  内部的Box会在垂直方向,一个接一个地放置。  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的mar

css--BFC是什么,有什么用,怎么用?

前言   作为前端开发人员或者学生,你一定知道BFC这个关键词,但是你是否具体了解过什么是BFC?BFC有什么用?BFC怎么用些问题呢?本文就来总结一下相关的知识点,希望对阅读到的小伙伴在面试、学习、开发中有所帮助。 正文   1、什么是BFC   首先来看下下面的代码段1: <style>

bootstrap中的清除浮动

.clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } //for IE 6/7 only .clearfix { *zoom: 1; }    :after伪类在元素末尾插入了一个包含空格的字符,并设置display为table display:table

CSS学习笔记(3)

1.关于盒子的大小 默认情况下,盒子可见框的大小由内容区.内边框和边框共同决定 box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用) content-box:宽高用来设置内容区的大小 border-box:宽度和高度用来设置盒子可见框的大小 会自动调整内容区的空间(边框边距不变)以适

对 BFC 的理解

定义 先来看两个相关的概念: Box: Box 是 CSS 布局的对象和基本单位,这个Box就是我们所说的盒模型。 Formatting context:块级上下文格式化,它是页面中的⼀块渲染区域,并且有⼀套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。 块格式化上下文(Block Form

BFC

BFC-块级格式化上下文 每一个BFC区域只包括其子元素,不包括其子元素的子元素 每一个BFC区域都是独立隔绝的,互不影响 触发BFC的条件: 1.body根元素 2.position不是static或者relative 3.display值为table|table-cell|inline-box1 4.float不是none 5.overflow:auto/hidden 用于解决: 垂直

什么是BFC?看这一篇就够了

  BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 在解释什么是BFC之前,我们需要先知道Box、Formatting Context的概念。 Box:css布局的

CSS笔记3

目录 一.轮廓阴影圆角 二.浮动  三.高度塌陷和BFC 1.高度塌陷                                                                                                                  2.BFC(block formatting cont

BFC和IFC

参考&翻译:https://www.w3.org/TR/CSS2/visuren.html 可视化盒模型 1.BFC 1.1 BFC概念: BFC: Block Formatting Context 块级格式化上下文 1.2 BFC触发: 在某个元素上设置以下属性,那么该元素内部将成为一个BFC空间 overflow属性不是visible,通常设置为autofloat属性不是nonepositi

清除浮动的方法

浮动副作用介绍: <div style="width: 250px; background: blue;"> <div style="width: 50px; height: 50px; background: red; display: inline-block; float: left;"></div> <div style="width: 50px; height: 50px; backgro

CSS--BFC

BFC :(Block Formatting Context), 名为 “块级格式化上下文”。 BFC是一个独立的布局环境,BFC内部的元素布局与外部互不影响。 它是页面中的一块渲染区域,并且有一套属于自己的渲染规则,它决定了元素如何对齐内容进行布局,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,BF

前端学习-BFC的作用

<!DOCTYPE html> <html lang="zh"> <head>     <link rel="stylesheet" href="../css/reset.css">     <meta charset="UTF-8">     <title>Document</title>     <style>        

CSS相关面试问题

什么是BFC 原文https://blog.csdn.net/blueberry_liang/article/details/90030814 释义 BFC—— Box、Formatting Context box:盒子模型 Formatting Context:渲染文档的容器,css根据它来进行渲染 哪些元素会生成BFC: 根元素 float属性不为none position为absolute

什么是BFC?BFC是什么?为什么会有BFC

块级格式化上下文(Block Formatting Context)简称BFC BFC的目的就是:形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢?   我们通过CSS为元素设置一些属性,就能触发,常用的有四种:     float不为none    postion不为relative和s

CSS相关 | 面试高频问题(三)| 盒模型、BFC、IFC、margin塌陷、flex、grid

CSS面试高频问题(一) CSS面试高频问题(二) 4.盒子模型和box-sizing(★★★★★) CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。 分类: 标准盒子模型(W3C)、怪异盒子模型(IE6) 1.标准盒子模型(W3C): 元素width

前端面试题6道开胃菜CSS+JS+VUE

css区  一:BFC的相关: BFC的概念? 了解:CSS2.1 中只有 BFC 和 IFC,  css3中还增加了 GFC 和 FFC。 BFC 定义: BFC(Block formatting context)直译为“块级格式上下文”, 它是一个独立渲染区域,只有BLOCK-LEVEL BOX参与, 他规定内部的BLOCK-LEVEL BOX如何布局, 并与这个区域外部不