做简历用什么网站,html编辑工具有哪些,网站服务器和空间大小,福田的网站建设公司1. 前言 FC#xff08;Formatting Contexts#xff09;#xff0c;是CSS2.1的一个概念#xff0c;是页面中的一块渲染区域#xff0c;具有一套渲染规则#xff0c;决定FC中子元素如何定位#xff0c;以及和其他元素的关系和相互作用。在说FC之前说一下文档流。
1.1. 普…1. 前言 FCFormatting Contexts是CSS2.1的一个概念是页面中的一块渲染区域具有一套渲染规则决定FC中子元素如何定位以及和其他元素的关系和相互作用。在说FC之前说一下文档流。
1.1. 普通流 元素按照其所有HTML中的位置先后位置至上而下布局行内元素水平排列直到当前行被占满然后换行块级元素则会被渲染为新的完整的一行元素默认都是普通流定位。
1.2 浮动 当一个元素被设置浮动效果后它会脱离普通流向左右向右偏移所在容器的边框位置或碰到另一个浮动元素为止。
1.3 绝对定位 元素会整体脱离普通流因此绝对定位不会对其兄弟元素造成影响。
2. BFC BFCBlock Formatting Contexts块级格式化上下文是页面上一个隔离渲染区域BFC中的子元素不会在布局上影响外面的元素。
BFC形成条件
根元素即html元素显示元素displayinline-block、table-cell、table-caption三种定位元素position除relative、static、sticky值以外的值absolute、fixed两种浮动元素float除none值以外的值left、right溢出元素overflow除visible值以外的值hidden、scroll、auto
特性
内部Box块级元素垂直方向一个接一个放置BFC中的子元素之间垂直方向上的距离由margin决定BFC中的子元素之间BFC区域不会与浮动元素区域重叠BFC和浮动元素同级之间计算BFC高度时浮动元素也参与计算BFC和浮动元素父子之间BFC是页面上一个独立容器窗口中的子元素不影响外面元素BFC和其他元素同级之间
2.1 内部盒子垂直方向一个接一个放置 不在BFC里块级Box也会垂直排列这一条规则不用多说
2.2 垂直方向上的距离由margin决定 块级元素垂直外边距会折叠即由外边距较大的为准不会发生margin穿透问题。
!DOCTYPE html
html
headstyle.container {float: left;width: 100px;height: 100px;background-color: red;}.box:first-child {height: 20px;margin: 10px 0;background-color: green;}.box:last-child {height: 20px;margin: 20px 0;background-color: green;}/style
/head
bodydiv classcontainerdiv classbox/divdiv classbox/div/div
/body
/html
2.3 BFC区域不会与浮动元素区域重叠 float元素固定宽度BFC元素不设置宽度BFC元素宽度会自适应
!DOCTYPE html
html
headstyle.box:nth-child(1) {float: left; /*既是浮动元素也是BFC*/width: 200px;height: 300px;margin-right: 10px;background-color: red;}.box:nth-child(2) {overflow: hidden; /*设置BFC不被浮动元素覆盖*/height: 300px;background-color: purple;}/style
/head
bodydiv classbox/divdiv classbox/div
/body
/html
2.4 计算BFC高度时浮动元素也参与计算
!DOCTYPE html
html
headstyle.container {background-color: red;padding: 5px;overflow: hidden;}.box {float: left;height: 20px;width: 20px;margin: 20px 0;background-color: green;}/style
/head
bodydiv classcontainerdiv classbox/div/div
/body
/html
2.5 BFC是页面上一个独立容器窗口中的子元素不影响外面元素
!DOCTYPE html
html
headstyle.container {float: left;width: 100px;height: 150px;background-color: red;}.wrapper {overflow: hidden;}.box:first-child {height: 20px;margin: 10px 0;background-color: green;}.box:last-child {height: 20px;margin: 20px 0;background-color: green;}/style
/head
bodydiv classcontainerdiv classwrapperdiv classbox/div/divdiv classbox/div/div
/body
/html
3. IFC IFCInline Formatting Contexts内联格式化上下文 。
作用
水平居中当一个块要在环境中水平居中时设置其为inline-block则会在外层产生IFC通过text-align则可以使其水平居中垂直居中创建一个IFC用其中一个元素撑开父元素的高度然后设置其vertical-align:middle其他行内元素则可以在此父元素下垂直居中
4. GFC GFCGridLayout Formatting Contexts网格布局格式化上下文
形成条件
显示元素displaygrid、inline-grid两种
参见【CSS】布局方式梳理和总结-CSDN博客中的CSS3网格布局。
5. FFC FFCFlex Formatting Contexts布局格式化上下文
形成条件
显示元素displayflex、inline-flex两种
参见【CSS】布局方式梳理和总结-CSDN博客中的 CSS3 Flex布局。
参见
区块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)
CSS深入理解流体特性和BFC特性下多栏自适应布局 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
注以上如有不合理之处还请帮忙指出大家一起交流学习~
