css中的BFC
2016-02-26 21:08
519 查看
CSS layout入门
元素与盒
在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的。元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为none的元素则不生成盒。
除了元素之外,HTML中的文本节点也可能会生成盒。
盒模型
一个盒包括了内容(content)、边框(border)、内边距(padding)、外边距(margin)。下图展示了盒模型的直观意义:![](http://www.w3.org/TR/2011/REC-CSS2-20110607/images/boxdim.png)
盒的尺寸(width与height)定义受到box-sizing属性的影响。box-sizing可选择content-box(默认), padding-box和border-box三种模式。
正常流
正常流是页面,大部分盒排布于正常流中。正常流中的盒必定位于某一格式化上下文中,正常流中有两种格式化上下文:块级格式化上下文(block formatting context,简称BFC)和行内格式化上下文(inline formatting context,IFC)。在块级格式化上下文中,盒呈纵向排布,在行内格式化上下文中,盒则呈横向排布。
正常流根容器中是块级格式化上下文,不同的盒可能会在内部产生行内格式化上下文或者块级格式化上下文。
块级与行内级
正常流中的盒分为块级与行内级两种,任何一个行内级盒都不能够直接被放入块级格式化上下文中。如果有一个HTML元素生成了一个行内盒,而其所在的上下文是块级的话,那么应当为它生成一个匿名块级盒,匿名块级盒会在内部生成行内格式化上下文。元素的display属性会决定盒是行内级还是块级:
block, table, flex, grid, list-item 为块级
inline, inline-block, inline-table, inline-flex, inline-grid 为行内级
格式化上下文
display同时还可能决定元素内部如何显示,一些容器型元素生成的盒会产生BFC和IFC以外的格式化上下文。有一类盒被称为块容器,它们能够包含块级盒。块容器要么创建块级格式化上下文,这样它内部仅仅包含块级盒,要么创建一个行内格式化上下文,这样它内部仅仅包含行内级元素。(也就是说,块容器中不可能既包含块级盒,又包含行内级盒,一旦他的子盒中有块级盒,所有行内级盒都会被自动创建匿名盒包裹)。
在非块级格式化上下文中的块容器总是会创建新的块级格式化上下文:如display为inline-blocks, table-cells, 和table-captions所生成的盒。而自身也在块级格式化上下文中的块容器,则只有overflow不为visible的情形下才会创建新的块级格式化上下文。
绝对定位和浮动的块容器则总是会创建新的块级格式化上下文。
display值为table或者inline-table的元素将会生成表格(table),表格内部会使用特殊的格式化方式来排布其内部元素。
display值为grid或者inline-grid的元素将会生成格元素(grid element),与table情形类似,它内部也是使用特殊的格式化方式来牌不其内部元素,
display值为flex或者inline-flex的元素将会生成自适应容器(flex container),自适应容器在其内部产生自适应格式化上下文(flex formatting context)。
相关文章推荐
- css sprites
- dedecms导航判断当前选中样式的方法
- 【转】 为SeekBar滑块设置固定值以及自定义Seekbar,progressbar样式--不错
- Css中的盒模型及盒模型宽度计算
- CSS3 关于@font-face引用中文字体解决办法
- Xcode 修改系统的代码块样式 Code Snippet
- Magento修改css样式
- css3 布局
- CSS动态实现文本框清除按钮的隐藏与显示
- 自定义TabHost,TabWidget样式 .
- html入门/元素/属性/格式化/样式
- CSS水平方向自适应布局方法小结
- 平台中配置网格列表样式报:ORA-01461错误
- css引用图片的方法
- 平台中配置网格列表样式报:ORA-01461错误
- CSS 知识小积累
- 浅谈外边距的叠加
- 页面定制CSS代码初探(二):自定义h2标题样式 添加阴影 添加底色 等
- CSS3中如何使元素曲线运动
- css3中webkit-linear-gradient、box-shadow属性的使用