平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况;新建一个BFC后,会阻止元素与外界元素的重叠现象。 先了解几个概念:可替换元素、不可替换元素(non-replaced elemen ...
分类:
Web程序 时间:
2016-07-13 22:53:20
阅读次数:
571
BFC布局规则: 根据 CSS 2.1 8.3.1 Collapsing margins 第一条,两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。 根据 CSS 2.1 8.3.1 Collapsing margins 第三条,生 ...
分类:
其他好文 时间:
2016-07-12 19:20:01
阅读次数:
131
BFC(块级格式化上下文) 一、BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别。从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有普通容器没有的一些特性,例如可以包含浮动元素,上文中的第二类清除浮动的方法(如overflow方法) ...
分类:
其他好文 时间:
2016-06-29 20:27:39
阅读次数:
124
首先字面翻译,这三个字母分别代表什么,box,formatting, context,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 形象点就是说一种规范,规范什么呢?规范盒子内部元素不会影响到外部元素,或者和一种布局上的规范;不明白 ok,谈谈清除浮动的方法里面,有个叫over ...
分类:
其他好文 时间:
2016-06-28 23:26:17
阅读次数:
146
网络上有很多关于hasLayout和BFC相关的文章,但是大部分都显得有些晦涩难懂。所以想用一些比较直观的例子来说明hasLayout和BFC给平时的布局带来的影响。 基础知识 在讲hasLayout和BFC之前,先简单地过一下元素布局的一些基本知识。 元素本身的布局方式可以从display上表现出 ...
分类:
其他好文 时间:
2016-06-28 20:33:15
阅读次数:
185
BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子。 那么我们该怎么使用BFC呢,如何触发BFC呢?: ...
分类:
其他好文 时间:
2016-06-26 16:50:33
阅读次数:
137
什么是BFC? BFC(block-formatting-context):块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。 BFC的生成 既然上文提到BFC是一块渲染区域,那这块渲染区域到底在哪, ...
分类:
其他好文 时间:
2016-06-22 18:51:39
阅读次数:
151
前端精选文摘:BFC 神奇背后的原理 BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于 ...
分类:
其他好文 时间:
2016-06-19 14:14:20
阅读次数:
178
块格式化上下文(block formatting context) 无意间发现这个东西,看了下MDN发现这个东西跟布局有点关系; MDN上的介绍: 块格式化上下文(block formatting context)是页面 CSS 视觉渲染的一部分,它是用于决定块盒子的布局及浮动相互影响的一个区域。 ...
分类:
其他好文 时间:
2016-06-06 01:04:05
阅读次数:
245
来源:那些年我们一起清除的浮动 CSS|Float知多少 学习块格式化上下文 问题引起是2016IFE春季问题的任务三,总的父元素parent包含三个浮动的子元素,容器的高度不能自动伸长以适应内容的高度,出现了高度坍塌问题。 代码如下: (最上面的一条黑线就是parent元素了,可以看到它的高度为0 ...
分类:
其他好文 时间:
2016-06-03 19:00:16
阅读次数:
2856