<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl
分类:
Web程序 时间:
2016-01-30 13:51:40
阅读次数:
185
BFC的理解与应用首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前。什么是BFC(Block formatting contexts)w3c规范中的BFC定义:浮动...
分类:
其他好文 时间:
2016-01-27 12:44:01
阅读次数:
171
有时候我们在CSS布局的时候需要实现两栏布局,且其中一栏的宽度不固定。据我的经验,有以下几种方法:inline-block首先两个元素不跨行,又要可以设置宽高,当然是inline-block,但是用此方法有个非常大的缺陷,就是width属性不好设置js计算百分比计算calc属性Float + ove...
分类:
其他好文 时间:
2016-01-25 11:29:58
阅读次数:
126
浮动 浮动是浏览器定位的一种方式,也是现在最常用的一种布局方式。通过两次的静态页面练习,加上查阅一些资料,对浮动进行了整理。总结了10种清除浮动的方式以及各自的优缺点。加深了对浮动的理解和认识。一、浮动的特性 1、包裹性(BFC-块级元素上下文)2、破坏行(让父元素高度塌陷)二、浮动产生的原因 一般...
分类:
Web程序 时间:
2016-01-12 21:25:59
阅读次数:
233
当触发以下两种模式后就是一块独立的区域 不受外界的影响。BFC (block formatting context) 标准浏览器(除了ie678的 其他浏览器)块级元素格式上下文 a、float的值不为none。 b、overflow的值不为visible。 c、display的值为table-ce...
分类:
其他好文 时间:
2015-12-17 15:47:28
阅读次数:
125
bfc 定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干。 BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin ...
分类:
Web程序 时间:
2015-12-13 23:35:21
阅读次数:
219
在网页的排版布局中,都会用到float(浮动)来让网页的排版更加自由,突破块级元素独霸一行的特性。但是当我们将这些块级元素进行浮动后,我们会发现这些块级元素已经脱离了原本的文档流,跳出三界不在五行中了。这会给我们带了很多不必要的麻烦。这时候就需要用到BFC了。博主在刚接触BFC时也对其懵懵懂懂,但本...
分类:
其他好文 时间:
2015-12-07 02:14:57
阅读次数:
153
在我们做的网页上通常最重要的其中一点就是美观度,bfc他是一个块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。因为我现在天天在做网页了,之前没怎么关注bfc与ifc原理,以至于我做出...
分类:
Web程序 时间:
2015-12-06 22:34:21
阅读次数:
667
float的值不为noneoverflow的值不为visibledisplay的值为inline-block、table-cell、table-captionposition的值为absolute或fixed display:table也认为可以生成BFC,其实这里的主要原因在于Table会默认生....
分类:
其他好文 时间:
2015-12-06 21:00:38
阅读次数:
121