CSS里的块级格式是什么

CSS里的块级格式是什么

今天小编给大家分享一下CSS里的块级格式是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

  1.BFC定义

  BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-levelbox(块级元素)参与,它规定了内部的Block-levelBox如何布局,并且与这个区域外部毫不相干.

  通俗地来说:创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上

  影响外面的元素(里面怎么布局都不会影响外部),BFC任然属于文档中的普通流

  2.BFC的生成:

  知道了BFC怎么触发BFC

  满足以下条件之一都可以触发BFC,变身为BFC

  根元素

  float属性不为none

  position不为static和relative

  overflow不为visible

  display为inline-block,table-cell,table-caption,flex,inline-flex

  你会发现BFC无处不在,只是自己用的时候不知道而已

  3.BFC布局规则:

  变身为BFC后有什么特性呢,以下:

  内部的Box会在垂直方向,一个接一个地放置。

  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  每个元素的marginbox的左边,与包含块borderbox的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  BFC的区域不会与floatbox重叠。

  BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

  计算BFC的高度时,浮动元素也参与计算

  4.BFC作用:

  用起来comeboby

  1.防止外边距重叠

  bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)

  问题:由图可以看到,String1和String2之间只有20px的margin,按理来说应该是40px,但这是在bfc中导致了他们的margin重叠

  代码:

  <style>.container1{

  /*通过overflow:hidden可以创建bfc*/

  overflow:hidden;

  background-color:red;

  width:300px;

  }

  .sub1{

  margin:20px0px;

  background-color:#dea;

  }</style><divclass="container1">

  <divclass="sub1">String1</div>

  <divclass="sub1">String2</div></div>

  解决方法:我们可以在div外面包裹一层容器,并触发该容器生成一个BFC。那么两个div便不属于同一个BFC,就不会发生margin重叠了。

  代码:

  <style>

  .newbfc{

  overflow:hidden;

  }</style><divclass="container1">

  <divclass="sub1">String1</div>

  <divclass="newbfc"><divclass="sub1">String2</div></div></div>

  2.清除浮动:

  问题:当元素的子元素都浮动后,会出现高度坍塌的现象,即父容器的高度不会被撑开

  代码:

  <style>

  .pre2{

  width:200px;

  border:2pxsolidred;

  }

  .float1,.float2{

  width:100px;

  height:100px;

  float:left;

  }

  .float1{

  background-color:#dee;

  }

  .float2{

  background-color:#dcc;

  }</style><divclass="pre2">

  <divclass="float1"></div>

  <divclass="float2"></div></div>

  解决方法:

  bfc的规则:计算BFC的高度时,浮动元素也参与计算所以只要将父容器设置为bfc就可以把子元素包含进去:

  这个容器将包含浮动的子元素,它的高度将扩展到可以包含它的子元素,在这个BFC,这些元素将会回到页面的常规文档流。

  .pre2{

  width:200px;

  border:2pxsolidred;

  /*设置overflow*/

  overflow:hidden;

  }

  3.解决布局:防止文字环绕

  代码:

  <style>.container2{

  overflow:hidden;

  width:200px;

  }

  .box{

  float:left;

  width:100px;

  height:30px;

  background-color:#daa;

  }</style><divclass="container2">

  <divclass="box"></div>

  <pstyle="background-color:#eea">sdfadsfdfffffffffdsfsfffffsfdfsdsdfsdffffffff</p></div>

  这个p元素并没有移动,但是它却出现在浮动元素的下方。p元素的lineboxes(指的是文本行)进行了移位。此处lineboxes的水平收缩为浮动元素提供了空间。

  bfc的规则:每个元素的marginbox的左边,与包含块borderbox的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  解决这个问题只要将p元素添加overflow:hidden使其成为一个新的bfc就可以了

以上就是“CSS里的块级格式是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注恰卡编程网行业资讯频道。

发布于 2022-03-13 23:41:32
收藏
分享
海报
0 条评论
27
上一篇:CSS预处理器Less怎么用 下一篇:CSS长英文单词的页面显示问题如何解决
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码