【BFC以及margin的深入探究】的更多相关文章

BFC以及margin的深入探究

BFC(Block Formatting Context) 块级格式化上下文,它是指一个独立的块级渲染区域,只有block-level Box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. 根元素,浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-block, table-cell, 和 table-caption),flex,inline-flex以及overflow值不为"visiable"的块级盒子,都会为他们的内容创建新的块级格式化上下文.…

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow.containing block.bfc.margin collapse,base line,writing mode,bidi,这样一路问下去的,奈何第一个问题(亲我真的只问了position有哪些取值和行为啊)就悲剧了…… 说到position,那么稍微…

深入理解BFC和Margin Collapse

深入理解BFC和Margin Collapse   BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前. 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),…

css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素 根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签…

关于BFC不会被浮动元素遮盖的一些解释

简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box.其实,浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖. 例证 创建两个浮动元素和一个BFC,然后改变BFC的margin值和浮动元素的margin值,观察它们的位置. .f1r { background: skyBlue; float: left; width: 200px; } .f…

BFC深入理解

BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响? 能否用其他css属性清除浮动带来的影响? 种种的疑问,会让你觉得CSS真的不容易精通,说精通过于高大上,就连掌握都挺难的. 在清除浮动方法解析文章中,只是稍微说明了一下上面两个问题的原因是BFC(块级格式化上下文,Block Formatting Contexts).在分享BFC之前,有必要谈谈…

巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: Note that in a horizontal flow, percentages on 'margin-top' and 'mar…

坑爹的BFC;块格式上下文

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

当padding/margin的取值形式为百分比时。。。。。

一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: 利用这个规范,我们可以用来解决移动端的高度自适应占位问题,在移动端,高度一般都是用内部撑开,例如,一个div包着一个图片.如果是用图片撑开div的…

CSS学习笔记09 简单理解BFC

引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style type="text/css"> .div1 {background-color: #FCE38A; width: 200px; height: 1…