what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使用手写罢了.但是它的重要性确是杠杠的,可以这么说,没有它就就没有什么css布局. BFC,全称 Block Formatting Context,翻译成块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局. 看一大堆文字可能有点抽…

什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文).BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个 BFC 中…

1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 通俗讲,BFC就是一种布局方式,在创建了 BFC后,其子元素会一个接一个地放置:盒子们自所在的 containing block 顶部起,水平方向上一个接一个撑满整个宽度,垂 直方向上他们的起点是包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在 同一个BFC中…

1,什么是BFC BFC(Block Formatting Context)块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其他环境中的布局.它是W3C CSS2.1规范中的一个概念,是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level box如何布局,并且这个区域与外部毫不想干, 2,生成BFC 下面的方法可以创建一个新的BFC (1)浮动元素,float: left | right (2)…

本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规则0.000001览> BFC -- block formatting context 块级格式上下文 块级元素(block-level elements)--  display:block/list-item/table/flex块级盒(block-level boxes)--  块级盒是指参与了BF…

认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Context 的元素的特点 其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性. 相邻的块级元素的垂直边距会折叠(collapse). 每一个元素左外边(margin)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边)…

01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流 就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子布局:单个内容的布局,把内容放入盒子,加上盒子三件套(padding.boder.margin). 块盒子纵向布局:块级元素单独一行,按照顺序垂直排列,并按其margin分离. 内联盒子水平布局:内联元素会在一行水平排列,高度.宽度都取决于内容,直到空间不足另起一行(换行).高矮不齐,底部对齐. 边…

CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 定义:当两个垂直外边距相遇时,将形成一个外边距. 合并的场景: 一个元素出现在另一个元素上面时: 示例: 一个元素包含另一个元素时(没有内边距或边框把它们的外边距分开) 如图效果中,父容器box和子元素box1的上外边距合并,与子元素…

CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · 注意DOM结构的排列顺序. 因为左右两侧的DOM都是浮动布局,而中间的DOM则是普通的文档流,所以为了规避浏览器正常的页面渲染,即先解析左侧DOM(浮动),再解析中间的DOM(普通文档流,宽度100%)而导致解析最后的右侧DOM(浮动)时因为宽度的问题,而掉到下一行的情况. · 因为DOM结构顺序实际内…

在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己孤陋寡闻了,以前在看资料的时候无意中看过圣杯布局和双飞翼布局这样的名词,只不过当时基础是在太差直接忽略了(当然现在也是在打基础,但是好歹相对几个月前已经有了质的改变).今天总结时再次看到这两个布局方法,当然再也不能错过了. 圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象…

浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的块级格式化上下文. 在一个块级格式化上下文里,盒子从包含块的顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的.两个相邻的块级盒子的垂直外边距会发生叠加. 在块级格式化上下文中,每一个盒子的左外边缘(margin-left)会触碰到容…

目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类 三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动 四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法…

css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC). developer center上面有对BFC的一段描述: 一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block b…

一.总结: 在第一篇css布局实践心得总结中总结了通过给元素设置position:absolute的方式让元素处在BFC(块级格式化上下文)的环境中,处在BFC环境中的元素是独立的,它和外面其他元素毫无关系. 今天很兴奋的是实践到了通过将元素设置成inline-block的方式让元素处在BFC的环境中,让其与外面的元素隔绝关系.还是引用这张图.…

一.摘要: 今天在写一个页面,对css中的BFC(块级格式化范围)有了一点体会,今天把遇到的问题和解决方案总结下来,额外还总结一下强大的负外边距的使用心得. 二.总结:…

对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:http://www.cnblogs.com/Dudy/p/4085292.html.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的demo链接打开,然后在控制台中查看最终的css,或者是点击codepen上的“Vi…

css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在正常流中,要让一个元素不在正常流中,唯一的方法就是使之成为浮动元素或定位元素. 标准流中,块级元素独占一行,垂直放置.行级元素在水平方向上一个接一个的排列. 二.垂直外边距的合并问题(margin collapse) 在标准流布局中垂直外边距的合并有两种情况. 1.在标准流中上下两个盒子的外边距回合…

一.网页布局的几种情况 今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考. 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所示,css布局可以分为以下几大块: 盒子内部的布局 文本的布局 盒模型本身的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布局 正常流normal flow下的盒子的布局 BFC布局上…

一.什么是BFC: 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染.让我们看看有哪些盒子: block-level b…

   1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下文)的缩写,它是W3C CSS 2.1 规范中的一个概念,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 2.什么情况下会创建BFC CSS规范说明了在下列这些情况下会创建新的block format…

对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的demo链接打开,然后在控制台中查看最终的css,或者是点击codepen上的"View Compiled"按钮,可以查看编译后的css 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所示,CSS布局是可以分为几大块的: 盒子内部的布局 文本的布局…

深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识. css布局篇已经讲个2篇了,前面我们深入讲解了 盒模型与box-sizing, 元素分类,行框,定位与浮动等知识点.今天呢,我们把css布局篇做一个结尾,最后讲解下margin的问题和格式化上下文. 一.margin的问题 margin问题主要在垂直方向上.在垂直方向上,元素…

深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识." 首先来列下大纲 盒模型 IE盒模型 W3C盒模型 box-sizing 元素的分类 块级元素 行内元素 行内块级元素 行框 定位与浮动 文档流 包含块 浮动清除 margin问题 格式化上下文(formatting context) BFC.IFC.FFC.GFC…

布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要使用若干个盒子,自然就是上下结构,无需其他设置. b) 左右结构:此时使用若干个盒子,并进行相应的浮动,通常的模式: i. 2个盒子:一左一右 ii. 3个盒子:两左一右或两右一左,或一边倒. iii. 更多盒子:通常一边倒. 浮动解释 浮动就像水中的气泡,会“网上浮” 更形象的比喻:大家(所有标签…

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-column by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最…

前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白帽子的Web安全技能 从源头消除安全隐患 打造安全无虞的Web应用> >> >>  前言 之前一直听到有人提到 CSS里的BFC,正巧在 IFE的练习里遇到了外边距折叠的问题,所以正好弄清楚BFC的机制. (参考来源 见文末的 Reference) 一 什么是 BFC 和之前所有…

对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章: http://www.cnblogs.com/Dudy/p/4085292.html 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所示,CSS布局是可以分为几大块的: 盒子内部的布局 文本的布局…

前言 现在,我们被称为前端工程师.然而,早年给我们的称呼却是页面仔.或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html. 其实,我们可能经常在聊组件化,咋地咋地.但是,回过头来思考一下,如果你看到一张设计稿的时候,连布局都不清不楚,谈何组件化呢.所以,我们需要在分清楚组件之前,先来分清楚布局.废话说了这么多,只是想告诉你,布局这个东西真的很重要.本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容.如果你喜欢我的文章,欢迎评论,欢迎Star~.欢迎关…

CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较详细 HTML和CSS高级指南之二--定位详解(译文):介绍浮动的使用,详细介绍定位的技巧,包括如何准确的给元素在 X 轴.Y 轴和 Z 轴定位 三栏式布局 涉及浮动和清除浮动,主要讲解"圣杯"和"双飞翼"两种解决方法.这两种方法实现的都是三栏布局,两边的盒子宽度固定,…

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