BFC与IFC

更新日期: 2019-04-09阅读: 2.9k标签: 元素

块级元素与块元素

块级元素

块级元素是那些视觉上会被格式化成块状的元素,通俗一点来说就是那些会换新行的元素。例例如:display属性为block, list-item, table, flex, grid。

块元素

块元素是 display 属性值为 block 的元素,它应该是 块级元素 的一个子集。


行内级元素与行内元素

行内级元素

行内级元素是那些不会为自身内容形成新的块,而让内容分布在多行中的元素。
例如:display属性为inline, inline-table, inline-block, inline-flex, inline-grid。

行内元素

行内元素仅仅是display属性值为inline的元素。


置换和非置换元素

置换元素

浏览器根据元素的标签和属性,来决定元素的具体显示内容。
常见的置换元素有这些:img,input,textarea,select,button等

置换元素宽度定义
  • 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度
  • 若宽度的计算值为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度
  • 若宽度的计算值为 auto 且高度有 非auto 的计算值,并且元素有固有宽高比,则 width的使用值为“高度使用值 * 固有宽高比”
比如img 当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置
  • 除此之外,当 width 的计算值为 auto 时,则宽度的使用值为 300px
比如iframe, canvas#####置换元素高度定义
置换元素高度定义
  • 若宽高的计算值都为 auto 且元素有固有高度,则height的使用值为该固有高度
  • 若高度的计算值为 auto 且元素有固有高度,则height的使用值为该固有高度
  • 若高度的计算值为 auto 且宽度有 非auto 的计算值,并且元素有固有宽高比,则 height 的使用值为:宽度使用值/固有宽高比
  • 若高度的计算值为 auto 且上述条件完全不符,则height的使用值不能大于150px,且宽度不能大于长方形高度的2倍

非置换元素

浏览器中的大多数元素都是不可置换元素,即其内容直接展示给浏览器。

非置换元素,宽度设置是不适用


BFC

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。

BFC就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此

触发BFC

  • 根元素
  • float的值不为none
  • overflow的值为auto,scroll或hidden
  • display的值为table-cell、table-caption、inline-block、flex 或 inline-flex
  • position的值不为relative和static

BFC布局规则

  1. 内部的盒子会在垂直方向,一个个地放置
  2. 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠
  3. 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此
  4. BFC的区域不会与float重叠
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此
  6. 计算BFC的高度时,浮动元素也参与计算


IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"。

IFC布局规则

  1. 在一个IFC中,从父级元素的顶部开始,盒子一个接一个横向排列
  2. 一个line box总是足够高对于包含在它内的所有盒子。然后,它也许比包含在它内最高的盒子高
  3. 当盒子的高度比包含它的line box的高度低,在line box内的盒子的垂直对齐线通过'vertical align'属性决定
  4. 当在一行中行内级盒子的总宽度比包含他们的line box的宽度小,他们的在line box中的水平放置位置由'text align'属性决定
  5. 当一个行内盒子超过了line box的宽度,则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs


链接: https://www.fly63.com/article/detial/2777

使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

在网页中,如果需要使用辅助性/装饰性的内容的时候,这就需要使用伪元素了。在使用伪元素的时候,会发现js并不真能直接控制它,这篇文章主要就介绍下如果间接的控制、修改css中伪元素的方法

CSS隐藏元素的五种方法

用css隐藏页面元素有许多种方法。1、opacity:0;2、visibility:hidden;3、diaplay:none;4、position:absolute;5、clip-path。大家可以根据具体情况选择适合的方法来隐藏元素

CSS隐藏页面元素常用方法_不同场景下使用CSS隐藏元素

使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别

js动态生成html元素并为元素追加属性

动态生成HTML元素的方法有三种:document.createElement()创建元素,再用appendChild( )添加、使用innerHTML直接将元素添加到指定节点、jQuery创建节点...

原生js删除元素

通过id删除;通过class获取元素;清空一个元素,即删除一个元素的所有子元素 ;原理很简单,就是不断的判断要清空的div还有没有子节点,有的话就删除一个子节点(这里是它的首个子节点),直到删除完毕为止。

原生JS如何获取当前元素属于父元素第几个子元素

我们经常通过document.getElementById 方法来获取到一个元素,这个时候我们经常需要有一个需求,那就是如何判断这个元素在父元素中的位置。原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性,额外需要注意的是该属性会遍历text节点,即回车键。

在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录

前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发现比较大小的判断就出了问题:

JS 创建元素的三种方法

动态创建元素一 document.write()body标签中就会插入但是这种方法几乎不用,因为这回影响页面的布局,甚至会将页面原来的内容冲刷掉,从而只显示输出内容;动态创建元素二 innerHTML

去除inline-block元素间的间距

真正意义上的inline-block水平呈现的元素间,换行显示或者空格隔开的情况下会有间距,这是因为浏览器在解析时,会将换行等读取成一个空格导致。

什么是可替换元素?

请问什么是可替换元素和非可替换元素,它们的差异是什么?并举例说明。前端面试中 HTML 的题目本来就最少,而且并不难,翻来覆去也就那几样。我们之前已经谈到过最经典的 HTML 语义化 ,今天就借此机会来谈谈可替换元素。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!