两个概念 感觉BFC挺重要的,于是最近查阅网上资料后小结一下,如果有不对的地方还望指正. 先理解两个概念: BOX :盒子模型 Block-Leave Box :块级元素 display属性为block, list-item, table的元素,会生成block-level box,并且参与 block fomatting context: Inline-Leave Box : 行内元素 display 属性为 inline, inline-block, inline-table的元素,会生成i…

什么是BFC(Block formatting contexts) BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的.转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列. BFC的运用 在w3c的规范中,除了上…

今天在这里谈谈css中BFC.“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.满足以下任何一条件,即可形成“BFC”. 1.float的值不为none. 2.overflow的值不为visible. 3.display的值为table-cell, table-caption, inline-block中的任何一个. 4.position的值不为relative和static.…

原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构.使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项,可以方便地显示盒子的边框和背景,从而让我们能从另外一个角度来审视页面的构成. 1.1 元素盒子的属性 1.边框(border):可…

因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只是表示了一种状态,a:hover只是表示了鼠标悬浮状态下的a标签,和一般的a标签用法没有区别,a:hover span.title即表示为鼠标悬浮状态的a标签的span的样式,和a span.title 用法没有区别…

CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatting Contexts) FFC(Flex Formatting Contexts) GFC(GridLayout Formatting Contexts) 什么是FC? FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一…

Css 02 Url  ./  http://www. Src  引入 拿取过来内容 Href 引用 连接前往 a  link 现在所有的命名 请按照下面我说的去命名 可以使用字母 数字 下划线组成  但是不能以数字开头 一.CSS常用属性 颜色属性 Color 背景属性 text-indent:21.0pt">Background-image: 背景图片 Background-repeat: 背景重复 Repeat-x(x轴方向重复) | repeat-y(y轴方向重复) |no-rep…

BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-blocks , table-cells , table-captions ,和overflow 的值不为 visible 的元素,(除了这个值已经被传到了视口的时候)将创建一个新的 块级格式化上下文 . 上面的引述几乎总结了一个 BFC 是怎样形成的.但是让我们以另一种方式来重新定义以便能更好的去理解.一个…

CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+margin左右边距值+border的左右宽度 高度同理 外边距合并 上下外边距会合并一般发生在普通文档流中,行内框,浮动框或绝对定位之间外边距不会合并 一般合并的外边距会取那个较大的值 Box-sizing属性(content-box|border-box|inherit) Content-box: 总…

BFC是CSS中一个看不见的盒子,(先理解CSS的盒子模型).它的页面渲染方式与普通流的盒子模型不同,它决定了其子元素将如何定位(所用属于BFC的box 都默认左对齐),以及和其他元素的关系和相互作用 .如何才能形成BFC盒模型呢? 1.float 属性值不为none: 2.position 属性值不为 static 和 relative: 3.display 属性为:table-cell || table-caption || inline-block || flex || inline-fl…