html开发中CSS块格式化上下文实现方法
块格式化上下文
CSS 块级框参与的格式化上下文,称作块格式化上下文(Block Formatting Contexts,简称BFC),它规定了内部的块级框如何排列。
块格式化上下文看似抽象,其实比较简单,它实际上就是页面上的一个块级元素,只是在布局上,该元素内部的元素和外部的元素相互独立,互不影响。
通俗的讲,就是在创建了块格式化上下文的元素中,其子元素都会按照块格式化上下文的规则排列自己。以下元素都会自动为其内容创建一个块格式化上下文:
根元素浮动的元素(float: left | right)
固定定位的元素(position: absolute | fixed)
overflow 属性值为 hidden | auto | scroll 的元素
display 属性值为 table | table-caption | table-cell | flex的元素
表格的单元格(td、th)
表格的标题(display: table-captions,caption)
块格式化上下文具有以下特点:
1)在块格式化上下文中,如果只存在块级框,则所有块级框从包含块的顶部开始,一个接一个地垂直排列,每个框被渲染为完整的一行。
假设在 body 下,有一个 class = "wrapper" 的 p 子元素,该子元素又包含三个 p 子元素。
上述代码中,html 元素是根元素,body 元素是根元素唯一的子元素,.wrapper 又是 body 的子元素。
为了便于观察,为根元素 html 设置了外边距、内边距和红色边框,为 body 元素设置了内边距和黑色边框,为 .wrapper 子元素设置宽度、内边距和蓝色边框,还为其子元素设置上下外边距和灰色边框:
html {
?? margin: 10px;
?? padding: 10px;
?? border: 1px solid red;
}
body {
?? padding: 20px;
?? border: 1px solid black;
}
.wrapper {
?? width: 300px;
?? padding: 10px;
?? border: 1px solid blue;
}
.wrapper p {
?? margin: 10px 0;
?? border: 1px dashed gray;
}图5-8 块格式化上下文中元素垂直排列DB2tSqy9i1xLS51rHN4rHfvuC6z7Ki" src="/uploadfile/Collfiles/20180222/20180222091350132.png" title="相邻元素的垂直外边距合并" />图5-9 相邻元素的垂直外边距合并图5-10 父元素和子元素的外边距合并图5-11 元素自身的垂直外边距合并图5-12 外边距合并使距离一致
???
???
为了方便查看容器中内容的对齐情况,为容器设置宽度、内边距和边框,并让p 向左浮动,为两个子元素设置不同的背景颜色:
.wrapper {
?? width: 300px;
?? padding: 10px;
?? border: 1px solid #ccc;
}
.wrapper p {
?? float: left;
?? width: 60px;
?? height: 60px;
?? background: #f90;
}
p {
?? color: #fff;
?? background: #2595e5;
}
图5-13 内部的框左对齐
p {
?? color: #fff;
?? overflow: hidden;
?? background: #2595e5;
}
图5-14 消除浮动元素的影响
??? some text
???
??? span1
??? span2
为了方便查看每一行的效果,为 p 和 span 设置边框,为 p 设置上下外边距:
.wrapper p,
.wrapper span {
??? border: 1px dashed #ccc;
}
.wrapper p {
??? margin: 10px 0
}
图5-15 块格式化上下文中包含块级元素和行内元素
推荐阅读
-
html开发中CSS块格式化上下文实现方法
-
js开发中时间格式化实现方法
-
《Web开发中让盒子居中的几种方法》_html/css_WEB-ITnose
-
《Web开发中让盒子居中的几种方法》_html/css_WEB-ITnose
-
理解CSS中的BFC(块级可视化上下文)[译]_html/css_WEB-ITnose
-
块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解_html/css_WEB-ITnose
-
理解CSS中的BFC(块级可视化上下文)[译]_html/css_WEB-ITnose
-
CSS在页面布局中实现div垂直居中的方法总结_html/css_WEB-ITnose
-
CSS实现pre标签中内容换行方法_html/css_WEB-ITnose
-
CSS中隐藏滚动条的简单实现方法_html/css_WEB-ITnose