一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的 ...
分类：
其他好文 时间：
2016-10-02 19:40:46
阅读次数：
189
利用bfc：右边盒子触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。 效果如图 补充一下： BFC翻译过来是块级格式化上下文，和haslayout比较相似，但haslayout是旧版本IE下的一个专有属性，表示元素自己对自身的内容进行组织和计算。BFC相当于一个独立的渲染单元，内外元素不会 ...
分类：
Web程序 时间：
2016-09-26 11:03:08
阅读次数：
258
在学习CSS的过程中，掌握一些常用方法或效果实现的原理对于我们的学习来说是很有帮助的。如最常见的清除浮动和取消外边距塌陷时使用overflow:hidden;，在学习初期往往只知道有这种用法，且使用时会受限，这样在学习掌握的过程中难免困惑和记错。在这里，根据查找网上学习资料和个人理解，尝试着用对BF ...
分类：
其他好文 时间：
2016-09-22 01:11:36
阅读次数：
150
1.opaitg→fultar（0-100） 2.png符号→导包（插件） 3.图包→导包、图片 4.BFC→zoom：1（无限值） hork layowt技术 5.双倍margin兼容问题 6.IE下3px差距 7.font-size 10px下→审查元素（正常16px） 8.子元素绑架父元素（解 ...
分类：
其他好文 时间：
2016-09-18 20:56:36
阅读次数：
131
hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念，在很多时候，我们需要触发它们去实现有些效果。例如清除浮动时需要触发hasLayout与BFC；很多自适应的两栏和三栏布局（两边固定宽度，中间自适应）需要触发hasLayout与BFC；很多奇形怪状的IE bug的解决需要触发 ...
分类：
其他好文 时间：
2016-09-18 19:31:26
阅读次数：
94
BFC块级格式上下文，独立的一个渲染区域 1、同一个BFC的两个相邻盒子间的margin会重叠（垂直方向）； 2、BFC内部的盒子在垂直方向上会一个接一个的放置； 3、每个子元素的左外边距与包含块的左边界相接触； 4、计算BFC的高度时，浮动子元素也参与计算； 5、BFC内部的子元素不会受到外面元素 ...
分类：
其他好文 时间：
2016-09-18 01:11:10
阅读次数：
232
一、boder在某些情况下会触发BFC环境，一般用轮廓（outline）而不用边框二、雪碧图技术（精灵图）是一种CSS图像合并技术：（循环）；是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。优点：1）减少加载网页图片时对服务器的请求次数可以合并多数背景图片和小 ...
分类：
其他好文 时间：
2016-09-17 10:35:31
阅读次数：
119
1.BFC－块级元素－块级格式化上下文布局规则：独立区域，与外部毫不相关内部box会在垂直方向，一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时，也要计算浮动元素它是被触发（被生成）的会触发生成BFC环境的元素：根元素float属性不为nonep ...
分类：
Web程序 时间：
2016-09-11 20:22:42
阅读次数：
139
BFC and IFC 1，IFC -- 针对行内元素 -- 行内格式上下文 BFC --针对块级元素 -- 块级格式上下文 2，IFC特点： 行框的高度由包含元素的高度和有没有float元素决定。 通常，行框的左边距接触到包含快的左边，右边距接触到包含块的右边 浮动元素可能会处于包含块边缘与行框边 ...
分类：
其他好文 时间：
2016-09-11 20:06:39
阅读次数：
141
实习以来做了三个小控件，都是用的CSS2.1里传统的DIV+CSS布局方式，综合使用position、margin、float、BFC等属性或特性将元素放到指定的位置上。然而面对日益复杂的界面，这些来自于上个时代、主要针对普通文档流的属性越来越力不从心，比如一个垂直居中就很让人头疼。后来遇到一个布局 ...
分类：
Web程序 时间：
2016-09-09 18:46:46
阅读次数：
244
