63
CSS布局中有一些概念可以在您理解CSS游戏后真正增强它们。本文是关于块格式化上下文(BFC)。你可能从来没有听说过这个术语,但如果你曾经用CSS做过布局,你可能知道它是什么。了解BFC是什么,它为什么工作,以及如何创建它是有用的,可以帮助您了解布局如何在CSS中工作。
温州网站开发在本文中,我将通过您可能熟悉的示例来解释BFC是什么。然后,我将向您展示一个新的显示值,一旦您了解了BFC是什么以及为什么需要BFC,这才真正有意义。
使用简单的float示例最容易理解块格式上下文(BFC)的行为。在下面的示例中,我有一个框,其中包含左侧浮动的图像和一些文本。如果我们有大量的文本,它会包裹漂浮的图像,然后边界会围绕整个地块运行。
<div class="outer"> <div class="float">I am a floated element.</div> I am text inside the outer box. </div>
.outer { border: 5px dotted rgb(214,129,137); border-radius: 5px; width: 450px; padding: 10px; margin-bottom: 40px; } .float { padding: 10px; border: 5px solid rgba(214,129,137,.4); border-radius: 5px; background-color: rgba(233,78,119,.4); color: #fff; float: left; width: 200px; margin: 0 20px 0 0; }
如果我删除了一些文本,那么就不足以环绕图像,并且由于浮动从文档流中取出,边框会上升并在图像下方运行到文本的高度。
发生这种情况是因为当我们浮动元素时,文本所在的框保持相同的宽度,缩短为浮动元素腾出空间的是文本的行框。这就是为什么背景和边框似乎会在我们的浮动后面运行。
我们通常有两种方法来解决这个布局问题。一种方法是使用clearfix hack,它具有在文本和图像下方插入元素并将其设置为清除两者的效果。另一种方法是使用overflow属性,其值不是默认值visible。
.outer { overflow: auto; }
您可以将BFC视为页面内的迷你布局。元素创建BFC后,所有内容都包含在其中。正如我们所看到的,这包括不再从盒子底部戳出的漂浮元素。BFC还会导致一些其他有用的行为。
BFC可以防止边距崩溃
了解边缘折叠是另一种被低估的CSS技能。在下一个例子中,我有一个背景颜色为灰色的div。
这个div里面有两个段落。外部div元素的边缘底部为40像素; 段落的上下边距为20像素。
.outer { background-color: #ccc; margin: 0 0 40px 0; } p { padding: 0; margin: 20px 0 20px 0; background-color: rgb(233,78,119); color: #fff; }
由于p元素的边缘和外部div上的边距之间没有任何东西,因此两者将会崩溃,因此段落最终与框的顶部和底部齐平。我们在段落的上方和下方看不到任何灰色。
但是,如果我们将盒子设为BFC,它现在包含段落及其边距,因此它们不会崩溃,我们可以看到边缘后面的容器的灰色背景。
.outer { background-color: #ccc; margin: 0 0 40px 0; overflow: auto; }
BFC再一次完成了包含内部事物的工作,阻止他们逃离并开箱即用。
BFC停止内容包装浮动。 您还将熟悉BFC的这种行为,因为它是使用浮点数的任何列类型布局的工作方式。如果项目创建BFC,则该项目不会包装任何浮动。在下面的例子中,我有这样的标记:
<div class="outer"> <div class="float">I am a floated element.</div> <div class="text">I am text</div> </div>
具有浮动类的项目向左浮动,因此div中的文本在它包围浮动之后出现。
我可以通过使包装文本的div成为BFC来防止包装行为。
.text { overflow: auto; }
这基本上是我们可以创建具有多个列的浮动布局的方式。浮动项目还会为该项目创建BFC,因此如果右侧的列高于左侧的列,则我们的列不会尝试相互缠绕。
除了用于overflow创建BFC之外,其他一些CSS属性还会创建BFC。正如我们所看到的,浮动元素会创建一个BFC。所以你的浮动物品里面会包含任何东西。
使用position: absolute或position: fixed在元素上。
使用display: inline-block,display: table-cell或display: table-caption。该table-cell和table-captions为这些HTML元素的默认,所以如果你有一个数据表,例如,每个单元将创建一个BFC。
使用column-span: all,用于跨越多列布局的列。Flex和Grid项也会创建类似BFC的东西,除了它们分别被描述为Flex格式上下文和网格格式上下文。这反映了每个参与的布局类型。块格式化上下文表示该项目正在参与块布局,Flex格式上下文表示该项目正在参与Flex布局。在实践中,结果是相同的,包含浮点数并且边距不会崩溃。
使用溢出或其他方法创建BFC有两个问题。首先,这些方法具有基于它们真正设计的副作用。overflow方法创建一个BFC并包含浮点数,但在某些情况下,您可能会发现有不需要的滚动条,或者剪切了阴影。这是因为溢出属性旨在让您告诉浏览器在溢出情况下要做什么 - 导致滚动条或剪辑内容。浏览器正在完成您告诉它的操作!
即使在没有任何不必要的副作用的情况下,使用溢出也可能让另一个开发人员感到困惑。为什么溢出设置为自动或滚动?原始开发者的意图是什么?他们想要这个组件上的滚动条吗?
什么是有用的将是一种创建BFC的方法,否则它是惰性的,不会产生其他行为,只能创建迷你布局,以及安全地在其中发生事情的能力。该方法不会引起任何意外问题,也可以明确开发人员的意图。CSS工作组认为这也可能非常方便,因此我们有一个新的display属性值- flow-root。
您可以display: flow-root在本文的任何情况下使用,其中创建新的BFC将是有利的 - 包含浮动,防止边缘折叠,或防止项目包裹浮动。
如果您的浏览器支持display: flow-root最新的Firefox或Chrome,您可以在下面的CodePen中看到所有这些内容。
浏览器支持显示:flow-root
浏览器对此值的支持是有限的,但是如果您认为它会很方便,那么请继续在Edge中投票。但是,即使您现在无法在代码中使用方便的流根功能,您现在也可以了解BFC是什么,以及当您使用溢出或其他方法来包含浮点数时您正在执行的操作。例如,如果要在非支持的浏览器中为flex或网格布局创建回退,那么了解BFC将停止包装浮动项的事实非常有用。
您还可以理解在浏览器如何布局网页方面非常重要的内容。虽然它们本身似乎无关紧要,但正是这些小知识可以加快创建和调试CSS布局所需的时间。
温州网站开发
热门分享
最新文章
2019.10.21
温州网站设计公司:有用的(免费)jQuery插件,以丰富网站的用户体验
2019.09.24
温州高端网站建设:最快的方式让你的网页设计编码
2019.09.16
温州网页设计:如何测试网站多个浏览器和设备同步
2019.09.16
温州企业网站建设:在iPad如何调试网站吗
2019.08.19
前2019年网页设计趋势:你从来没有使用过
2019.08.19
温州高端网站设计:你需要知道的关于视觉感知和网站设计
2019.08.16
温州高端建站:使用HTML,CSS和Javascript创建8个交互式信息图表
2019.08.16
温州网站定制:为什么好的设计会获得更好的营销效果
2019.08.16
温州网站制作:如何通过动画令人愉快地欺骗用户
2019.08.16
温州网站开发:使电子邮件选择美丽和有效绽放
随机推荐
2019.07.18
温州网站定制:如何使用Google Search Console进行搜索引擎优化
2019.08.16
温州网站开发:使电子邮件选择美丽和有效绽放
2019.10.21
温州网站设计公司:有用的(免费)jQuery插件,以丰富网站的用户体验
2019.07.12
温州做网站:动画视频如何帮助你的营销
2019.07.13
温州网站开发:XML Sitemaps与HTML站点地图
2019.07.13
温州做网站:站点地图Bing的最佳实践
2019.08.13
温州网页设计:设计无浏览器的Web
2019.09.24
温州高端网站建设:最快的方式让你的网页设计编码
2019.08.15
温州网站定制:商业网页设计的7个技巧
2019.08.14
温州网站优化:10个必要的SEO排名因素