一、BFC元素简介与基本表现。 BFC全程"Block Formatting Context",中文为"块级格式化上下文"。记住一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻雨覆雨都不会影响外部的元素。所以,避免margin穿透、清楚浮动什么的也就好理解了。 什么时候出发BFC呢? ...
分类:
其他好文 时间:
2016-09-08 17:55:10
阅读次数:
140
一、BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的 ...
分类:
Web程序 时间:
2016-09-03 16:44:41
阅读次数:
210
块级格式化上下文浮动绝对定位元素行内块元素overflow 属性值不为 visible 的元素最常见的是:竖直margin创建一个块级格式化上下文 BFC中盒子的对齐 BFC应用 清除浮动 其原理:当在父元素中设置overflow:hidden时就会触发BFC,所以他内部的元素就不会影响外面的布局, ...
分类:
其他好文 时间:
2016-08-23 14:36:50
阅读次数:
170
css布局“黑技术”、“偏方”、技巧、“无道理”(万能的overflow:hidden;) bfc的一些原理及应用 ...
分类:
Web程序 时间:
2016-08-21 13:43:46
阅读次数:
201
margin重叠也就是我们常说的CSS 外边距合并,W3C给出如下定义: 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 查看详情 margin折叠的产生有几个条件: 这些margin都处于普通流中,并在同一个BFC中 ...
分类:
其他好文 时间:
2016-08-16 10:25:39
阅读次数:
94
BFC中的B指的是block,对应的还有IFC,I指的是inline。对于BFC的理解可以参考层叠上下文。页面中,盒子的排布规则,是生效在对应的BFC中。两个BFC中的布局互不影响。页面的本身的根本身就是BFC,但是页面中的其他元素,则需要我们用css去设置,才会生成新的BFC。有以下方法: 详细内 ...
分类:
其他好文 时间:
2016-08-13 19:35:09
阅读次数:
161
一、BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的 ...
分类:
其他好文 时间:
2016-08-09 18:51:50
阅读次数:
134
一、总结: 在第一篇css布局实践心得总结中总结了通过给元素设置position:absolute的方式让元素处在BFC(块级格式化上下文)的环境中,处在BFC环境中的元素是独立的,它和外面其他元素毫无关系。 今天很兴奋的是实践到了通过将元素设置成line-block的方式让元素处在BFC的环境中, ...
分类:
Web程序 时间:
2016-08-03 23:51:07
阅读次数:
216
今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本。然后在控制多行文本溢出的 ...
分类:
其他好文 时间:
2016-08-03 18:36:43
阅读次数:
150
BFC 简介Box 盒子模型Formatting ContextBFC 定义BFC布局规则:如何生成 BFCBFC 应用1 自适应两栏布局2 清除浮动3 清除浮动 BFC 简介 Box 盒子模型 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类... ...
分类:
其他好文 时间:
2016-08-02 18:42:08
阅读次数:
124