css之BFC和IFC

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:如果   padding   元素   就会   wrap   size   mar   内部   abs   

BFC

BFC(Block Formatting Context)  ------ 块级格式化上下文

w3c规范定义:浮动元素和绝对定位元素,非块级盒子的块级容器(inline-blocks,table-cells,table-captions),以及overflow的值不为visiable的块级盒子,都会为它们的内容创建新的BFC

相关定义:

block-level boxes(块级盒)------  一个 block-level element块级元素 (‘display‘ 属性值为 ‘block‘, ‘list-item‘ 或是 ‘table’) 会生成一个 block-level box,这样的盒子会参与到 block-formatting context (一种布局的方式) 中

block-formatting context(BFC) ------ 在这种布局下,盒子所在的containing block顶部起一个接一个垂直排列,水平方向上撑满整个宽度。

containing block(包含块)------ 盒子本身为其子孙建立containing block,用于计算内部盒子的位置、大小。

哪些元素会触发BFC:

  1.根元素;

  2.float属性不为none;

  3.position为absolute或者fixed

  4.display:inline-block,table-cell,table-caption,flex

  5.overflow不为visible

BFC布局准则:

  1.内部盒子在垂直方向上,一个个垂直放置

  2.其不会和float(浮动元素)重叠

  3.其垂直方向由margin决定,同一BFC布局下的元素的margin会重叠

  4.在其布局下,子元素的内容不管怎么变化都不会影响到其外部元素

  5.其高度会把float浮动元素的高度也算进去

  6.元素的左边会和其包含的盒子的左边想接触,存在浮动也是如此

BFC的用途:

  1.由于不会和浮动元素进行重叠,所以在自适应的两栏布局上起到了很好的作用。

  2.可以清除内部的浮动

  3.可以去margin重叠,因为不同BFC布局下的元素margin不会重叠

样例分析:

  自适应两栏布局

 <div>
          <img class="leftbox" src="../images/none_new.png">
          <div class="rightbox">
             <h3>开发商</h3>
             <span>sdfsdfsdfsdfs士大夫撒旦法</span>
          </div>
     </div>

  左边图片左浮动,右边内容可以设置BFC布局,不会和浮动元素进行重叠。

  广为流传的俩种两栏自适应布局:

.rightbox{overflow: hidden;*display:inline-block;} //缺点是hidden可能会隐藏溢出部分
.rightbox{display: table-cell;width:2000px;*display: inline-block;*width: auto}

IFC

IFC( Inline Formatting Contex)  ------  内联格式化上下文

w3c规范定义:从父元素的顶部开始,盒子一个接着一个横向排列,横向的margin/border/padding在这些盒子中都是有效的。盒子间可能通过不同的方式垂直对齐(底部、顶部、文字基线对齐)。

相关定义:

line box (行盒模型)  -----  根据块状容器内,每一行的多个内联元素共同生成一个行盒模型。当内联盒子的宽度超过line box,内联盒子会被分解成几个盒子,然后分布在几个line box里面,如果内联盒子不能被分解(例如:单词或者white-space:nowrap),它就会超过line-box。

影响布局的css:

  1.font-size

  2.line-height

  3.height

  4.vertical-align

css之BFC和IFC

标签:如果   padding   元素   就会   wrap   size   mar   内部   abs   

原文:https://www.cnblogs.com/wjmm/p/8400387.html

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区