Overflow与块状格式上下文

BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左边界相接触: 4.计算BFC的高度时,浮动子元素也参与计算: 5.BFC内部的子元素不会受到外面元素的影响: 6.BFC的区域不会与float的元素区域重叠: 触发BFC条件: float:不为none: overflow的值不为visible: display:inline-block,table…

css-块级格式上下文

定义: 块级格式上下文(Block Formatting Context)是CSS中一个相对冷门的概念,今天被问到才引起注意,下文简单介绍下它的用法,学习资料多来源于网络,实际开发中遇到再继续更博吧. BFC(Block formatting context)直译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level box(块级元素)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗地来说:创建了 BFC的元…

BFC(块状格式化上下文)

今天先来说关于BFC的一些基础知识 BFC是块状格式化上下文,它是一个独立的渲染区域,规定了内部如何布局,并且这个布局和外部毫不相干触发BFC的方法 1.根元素(即html) 2.float属性不为none 3.position属性为absoulute,fixed 4.display为inline-block,table-cell,table-caption,flex,inline-flex 5.overflow不为visiable时…

理解 CSS 布局和块级格式上下文

前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context,内容足够简洁明了. 本文的目的是介绍一些概念,来帮你增强 CSS 码力.如标题所示,这篇文章主要是讲块级格式上下文(BFC,Block Formatting Context).你可能没听过这个术语,但只要你曾经使用…

什么是BFC（块级格式上下文）？

㈠什么是BFC? BFC 全称为块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文). ㈡BFC的布局规则是什么? 1)内部的box会在垂直方向,一个接一个地放置(可以看作BFC中有一个的常规流). 2)Box垂直方向的…

BFC块级格式上下文介绍

块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒子的布局及浮动相互影响的一个区域. – MDN 块格式上下文 BFC是一个容器,在这个容器中的元素不会影响到其他容器的布局,处于不同 BFC 中的元素不会互相干扰. BFC的触发条件根元素浮动元素绝对定位元素 absolute 或 fixed display为 inline-block 或 t…

坑爹的BFC;块格式上下文

Formatting context(FC) Formatting context 是 W3C CSS2.1 规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用.最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC), IE浏览器中没有BFC的概念,但是有个差不多的东东叫做hasLayout .…

BFC——块级格式上下文

BFC中的B指的是block,对应的还有IFC,I指的是inline.对于BFC的理解可以参考层叠上下文.页面中,盒子的排布规则,是生效在对应的BFC中.两个BFC中的布局互不影响.页面的本身的根本身就是BFC,但是页面中的其他元素,则需要我们用css去设置,才会生成新的BFC.有以下方法: float的值不为none. overflow的值不为visible. display的值为table-cell.table-caption.inline-block中的任一个. position的值不为r…

CSS--理解块级格式上下文（BFC）

1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗地来说:创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素(里面怎么布局都不会影响外部),BFC任然属于文档中的普通流 2.BFC的生成: 知道了BFC怎么触发BFC 满足以下条件之一都可以…

CSS外边距合并&块格式上下文

前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考前言之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库("'▽'")),这一次需要动手排一个页面,也挺简单,但是遇到了一个奇怪的问题,所以学习记录一下. 问题测试代码如下: <!doctype html> <html class="no-js" lang=""…

BFC（块级格式上下文）

BFC的生成满足下列css声明之一的元素便会生成BFC 根元素 float的值不为none overflow的值不为visible display的值为inline-block.table-cell.table-caption position的值为absolute或fixed BFC的约束规则浏览器对BFC这块区域的约束规则如下: 生成BFC元素的子元素会一个接一个的放置,垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性.在BFC中相邻的块级…

CSS深入理解学习笔记之overflow

1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scroll:超出可滚动. auto:若超出才出现滚动条. inherit:继承.(IE8+) 注:overflow-x与overflow-y值不同,其中一个属性值被赋予visible,而另一个被赋值为hidden/scroll/auto,则visible会被重置为auto. 兼容性: ①滚动条外观不同: ②…

《CSS世界》读书笔记（十二）

正确看待 CSS 世界里的 margin 合并什么是 margin 合并块元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并成单个外边距,这样的现象称为“margin合并”. (1)块级元素,但不包括浮动元素和绝对定位元素,尽管浮动和绝对定位可以让元素块状化 (2)只发生在垂直方向,准确来说,是只发生在和当前文档流方向的相垂直的方向上 margin 合并的3种场景 (1)相邻兄弟元素margin合并…

学习块格式化上下文（BlockFormattingContext）

什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式化模型. 视觉格式化模型视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制,它也是CSS中的一个概念. 视觉格式化模型定义了盒(Box)的生成,盒主要包括了块盒.行内盒.匿名盒(没有名字不能被选择器选中的盒)以及一些实验性的盒(未来可能添加到…

包含块、层叠上下文、BFC

包含块什么是包含块?简单来说,就是决定一个元素大小和定位的元素.一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素: 1.position:fixed 的元素包含块是当前可视窗口 2.position:absolute 的元素包含块是最近的 position属性为非static的祖先元素 3.静态定位和相对定位的元素包含块是最近的块级祖先元素层叠上下文跟BFC相似,是可以创建出来的(z-index: Number) 同一个层叠上下文中,层叠级别由低到高:边框和…

[转]学习块格式化上下文（BlockFormattingContext）

原文:https://www.cnblogs.com/elcarim5efil/p/4745796.html 格式化上下文格式化上下文( formatting contexts )├── 块级格式化上下文( Block formatting contexts )( BFC )├── 行内格式化上下文( Inline formatting contexts ) ( IFC )├── 自适应格式化上下文( Flex Formatting Contexts )( FFC )└── 网格布局格式化…

CSS的两种格式化上下文：BFC和IFC

CSS的两种格式化上下文文章包含很多个人理解,如果错误,欢迎指出~ 在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的盒子模型.三种元素类型. 本文具体解读了CSS针对block-level元素和inline-level元素设计的两种格式化上下文:BFC(Block Formatting Context)和IFC(Inline Formatting Context),它们规定了block-level元素和inl…

BFC块级格式

BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左边界相接触: 4.计算BFC的高度时,浮动子元素也参与计算: 5.BFC内部的子元素不会受到外面元素的影响: 6.BFC的区域不会与float的元素区域重叠: 触发BFC条件: float:不为none: overflow的值不为visible: display:inline-block,table…

FFMpeg音频重采样和视频格式转

一．视频像素和尺寸转换函数 1．sws_getContext : 像素格式上下文 --------------->多副图像(多路视频)进行转换同时显示 2．struct SwsContext *sws_getCachedContext(struct SwsContext *context , int srcW , int srcH enum AVPixelFormat srcFormat , int dstW , int dstH , enum AVPixelFormat dstForma…

音视频处理之FFmpeg封装格式20180510

一.FFMPEG的封装格式转换器(无编解码) 1.封装格式转换所谓的封装格式转换,就是在AVI,FLV,MKV,MP4这些格式之间转换(对应.avi,.flv,.mkv,.mp4文件). 需要注意的是,本程序并不进行视音频的编码和解码工作.而是直接将视音频压缩码流从一种封装格式文件中获取出来然后打包成另外一种封装格式的文件. 本程序的工作原理如下图1所示: 由图可见,本程序并不进行视频和音频的编解码工作,因此本程序和普通的转码软件相比,有以下两个特点: 处理速度极快.视音频编解码算法十分复杂,…

可视化格式模型(visual formatting model)

原文简书原文:https://www.jianshu.com/p/7632f16ff555 大纲 1.认识可视化模型 2.可视化模型的内容 3.可视化模型的影响因素 1.认识可视化模型盒子模型是CSS中所有元素产生的box的自身构成,而可视化格式模型则是把这些box,按照规则摆放到页面上,也就是通常所说的布局.换句话说,可视化格式模型是整个页面的模型,这个模型规定了怎么在页面里摆放box,box相互作用等等.属于CSS的最为核心的概念之一. 可视化格式模型,官方的说法是,它规定了用户端在媒介…

web前端笔记整理，从入门到上天，周周更新

由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一.HTML 1.注释格式: 作用: 1.解释说明代码的含义(代码量大,后期维护,便于新人交接) 2.调试代码 2.head内标签 //meta:定义关于HTML文档的元信息 <meta name="author" content="作者"> <meta name="de…

【前端知识体系-CSS相关】CSS布局知识强化

1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body>  <section cl…

BFC特性及其简单应用

BFC是什么? BFC(Block Formatting Context)中文直译就是‘块级格式上下文’,它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 通俗点说,BFC是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子内部的元素无论如何翻江倒海,都不会影响到外部.转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.)…