BFC和margin坍塌

BFC和margin坍塌的相关文章

深入理解BFC和Margin Collapse

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

由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(转)

作者写的很详细,感谢分享.来源:http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前. 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,

BFC 和 margin collapse（重叠）

写过很多页面的样式,但是却少有理论的基础,近日看到了关于BFC和一些关于magin collapse的知识 ,决定系统的整理一下. 一.BFC是什么? BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 二.BFC布局规则? 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin

CSS篇——BFC与margin

首先FC: Formatting Context 指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用. CSS2.1中有BFC(block)和IFC(Inline). BFC的布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)

BFC与margin重叠

在平时做项目的时候,有些时候会发生margin重叠的现象,但这种情况并不是一直都会发生,那到底什么时候会发生margin重叠呢.在网上搜索了一些资料,大致做了一些整理. 首先,会发生margin重叠的肯定是同一个BFC内的块级元素,例如div.ul等,不是块级元素不会发生重叠.(内联元素是不能设置高.行高.内外边距的,而且内联元素只能容纳文本或者其他内联元素.) 重叠的情况大致可以分为以下几种: 1.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并. 2.当

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css中的margin及外边距折叠

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

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

一个基础却又容易混淆的 css 知识点 本文依赖于一个基础却又容易混淆的 css 知识点:当 margin/padding 取形式为百分比的值时,无论是 left/right,还是top/bottom,都是以父元素的width为参照物的! 高度自适应占位 假设有这么个场景: 如上图所示,有这么一种用来放图片的容器,图片都是正方形(为了方便举例用正方形,实际上只要固定长宽比例即可).在 PC 端好办,容器的宽高都写死是多少 px,这样即使图片加载不出来容器都不会变型.但是在移动端,由于各机型分辨率