专栏首页前端自习课【CSS】410- 关于CSS盒子模型、BFC及其应用

【CSS】410- 关于CSS盒子模型、BFC及其应用

关于CSS的盒子模型,正确的解释应该是这样的:

把所有 HTML 元素都看作是一个 盒子(Box), 这个盒子包着一层又一层, 这就是盒模型.

随便写个 div, 打开 Chrome 的开发者工具, 在右边栏能看到这样一个直观的盒模型图.

这个 div 从外到内被分成了四层, 分别是:

  • Margin(外边距) - 清除边框外的区域, 外边距是透明的.
  • Border(边框) - 围绕在内边距和内容外的边框.
  • Padding(内边距) - 清除内容周围的区域, 内边距是透明的.
  • Content(内容) - 盒子的内容, 显示文本和图像等.

box-sizing

盒模型又被分为 IE盒模型W3C标准盒模型 两种类型.

在 IE8+ 的浏览器中要使用哪个盒模型可以由 box-sizing 控制. 默认值为 content-box, 即W3C标准盒模型; 如果将 box-sizing 设为 border-box 则用的是IE盒模型.

这两者的区别在于:

  1. IE盒模型的盒子大小为 content + padding + border.
  2. W3C标准盒模型的盒子大小为 content, 不包括 paddingborder.

可以这样理解:

IE盒模型的盒子总大小就是 content 的大小, paddingborder 会被并进 content 内一起计算, content 将会被压缩.

上图中, 元素样式为 width: 200px; height: 200px; padding: 10px; border: 1px solid #333333; 可以看到元素(盒子)的总大小为 (200 * 200)px. content 则是被压缩成了 ((200 - (10 + 1) * 2)/2)px. 呃... 看得懂这串算式不..?

W3C标准盒模型的盒子总大小是 contentpadding 以及 border 的总和大小, 后两者另算大小.

上图可以看到元素(盒子)的总大小为 (222 * 222)px, 这个 222 就是 200 + (10 + 1) * 2 得出来的. content 大小为 200, paddingborder 另算大小. 总和大小就是元素(盒子)的总大小.

BFC 原理

BFC 即 Block Formatting Contexts, 翻成中文是 块级格式化上下文. 具有 BFC 特性的元素, 可以看作是隔离了的独立容器, 容器里面的元素不会在布局上影响到外面的元素, 并且 BFC 具有普通容器所没有的一些特性。

可以这样来理解, 将 BFC 理解为一个完全封闭的盒子, 盒子内部的元素无论如何摆放, 也不会影响到盒子外面.

只要元素触发以下任意一条, 便视其具有 BFC 特性(创建BFC的方式):

  1. html根元素
  2. float浮动
  3. 绝对定位
  4. overflow不为visible
  5. display为表格布局或者弹性布局

BFC的特性:

  1. 内部Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定,在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。
  3. 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)
  4. 形成了BFC的区域不会与float box重叠
  5. 计算BFC高度时,浮动元素也参与计算。

BFC主要的作用:

  1. 清除浮动
  2. 防止同一BFC容器中的相邻元素垂直方向的外边距重叠问题

举例

1. 同一个 BFC 下的两个块级元素之间的外边距会发生折叠.

如上图所示, 这是两个一毛一样的 div. 它们的样式同为

width: 100px; 
height: 100px; 
margin: 50px; 
background: #37A7FF

但它们之间的距离却只有 100px, 并不是想象中的 (100 + 100)px. 这是因为它们之间的外边距折叠了. 你可以这样理解, 只有一个外边距起作用了. 如果有另外一种场景, 两个元素的外边距长短不一样, 那会是外边距较长的那一个起作用.

就是这样. 如果想要避免这种情况, 可以把这两个元素分别放到一个具有 BFC 特性的盒子内.

2. 清除浮动. 这个很容易理解, 浮动的元素会脱离文档的普通流. 如果盒子内的元素是浮动元素且盒子本身不具备 BFC 特性, 那么这个盒子在视觉上并不会包裹住内部浮动元素, 总大小也不包括内部浮动元素. 如下图.

触发盒子的 BFC 特性后:

3. 阻止元素被浮动元素覆盖 下图是一个文字环绕效果.

蓝色 div 是一个浮动元素, 灰色 div 是一个块级元素. 会造成上图的原因是因为灰色 div 被蓝色 div 所覆盖, 但文本不会被覆盖, 所以被强行压缩换行. 如果想要避免这种情况, 可以触发灰色 div 的 BFC 特性.

总结就是, BFC 可以适用于各种结构布局.

本文分享自微信公众号 - 前端自习课(FE-study),作者:aymin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【CSS】378- [译]44个 CSS 精选知识点

    一个周五的晚上,闲来无事整理下自己的 github(经常做收藏党),今天打算都过一遍,发现一个 star很高的项目,里面有大量的 CSS 片段,而且标题很诱人,...

    pingan8787
  • 【CSS】352- 有趣的CSS弹跳动画

      这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着...

    pingan8787
  • 【Web技术】502- Web 视频播放前前后后那些事

    这是因为当时没有其他方法可以在浏览器上流式传输视频。作为用户,您可以选择安装Flash或Silverlight之类的第三方插件,还是根本无法播放任何视频。

    pingan8787
  • 50道CSS基础面试题

    慕白
  • 50道CSS面试题(附答案)

    标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度=内容宽度(content+bo...

    用户1093975
  • 近期Dribbble设计作品赏析(优点+吐槽)

    静电说:对于Dribbble或者Behance来说,我一直有个态度,那就是:“取其精华去其糟粕”,不要把他们当成教科书一样的神级存在。Dribbble设计存在的...

    用户5009027
  • Xcode 自动生成文档

    swift-documentation: https://nshipster.com/swift-documentation/

    iOSDevLog
  • PHP扩展功能--发送邮件

    程序小工
  • Kubernetes v1.18 正式发布!抢先一览

    持续关注 「K8S 生态周报」 ( https://zhuanlan.zhihu.com/container )的小伙伴们,在每周的上游进展中,应该已经了解到了...

    Jintao Zhang
  • 浅谈错排公式的推导及应用

    近期学弟在HDU刷题时遇到了关于错排公式的一些问题,我作为过来人就写这篇博客来指导他们~~~ 错排的定义:一段序列中一共有n个元素,那么可知这些元素一共有n!种...

    Angel_Kitty

扫码关注云+社区

领取腾讯云代金券