做一个网站成本多少,高端科研网站设计,网站建设就业方向,企业文化简介网站怎么做前言 - CSS中的文档流
在介绍BFC之前#xff0c;需要先给大家介绍一下文档流。 我们常说的文档流其实分为定位流、浮动流、普通流三种。 1. 绝对定位(Absolute positioning) 如果元素的属性 position 为 absolute 或 fixed#xff0c;它就是一个绝对定位元素。 在…前言 - CSS中的文档流
在介绍BFC之前需要先给大家介绍一下文档流。 我们常说的文档流其实分为定位流、浮动流、普通流三种。 1. 绝对定位(Absolute positioning) 如果元素的属性 position 为 absolute 或 fixed它就是一个绝对定位元素。 在绝对定位布局中元素会整体脱离普通流因此绝对定位元素不会对其兄弟元素造成影响而元素具体的位置由绝对定位的坐标决定。 它的定位相对于它的包含块相关CSS属性top、bottom、left、right 对于 position: absolute元素定位将相对于上级元素中最近的一个relative、fixed、absolute如果没有则相对于body 对于 position:fixed正常来说是相对于浏览器窗口定位的但是当元素祖先的 transform 属性非 none 时会相对于该祖先进行定位。 2. 浮动 (float) 在浮动布局中元素首先按照普通流的位置出现然后根据浮动的方向尽可能的向左边或右边偏移其效果与印刷排版中的文本环绕相似。 3. 普通流 (normal flow) 普通流其实就是指BFC中的FC。FC(Formatting Context)直译过来是格式化上下文它是页面中的一块渲染区域有一套渲染规则决定了其子元素如何布局以及和其他元素之间的关系和作用。 在普通流中元素按照其在 HTML 中的先后位置至上而下布局在这个过程中行内元素水平排列直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。 除非另外指定否则所有元素默认都是普通流定位也可以说普通流中元素的位置由该元素在 HTML 文档中的位置决定。
BFC定义
先看下MDN上关于BFC的定义 块格式化上下文Block Formatting ContextBFC 是Web页面的可视CSS渲染的一部分是块盒子的布局过程发生的区域
也是浮动元素与其他元素交互的区域。 具有 BFC 特性的元素可以看作是隔离了的独立容器容器里面的元素不会在布局上影响到外面的元素并且 BFC 具有普通容器所没有的一些特性。 通俗一点来讲可以把 BFC 理解为一个封闭的大箱子箱子内部的元素无论如何翻江倒海都不会影响到外部。 除了 BFC还有
IFC行级格式化上下文- inline 内联GFC网格布局格式化上下文- display: gridFFC自适应格式化上下文- display: flex或display: inline-flex 注意同一个元素不能同时存在于两个 BFC 中。
BFC的触发方式 MDN上对于BFC的触发条件写的很多总结一下常见的触发方式有只需要满足一个条件即可触发 BFC 的特性
根元素即 浮动元素float 值为 left 、rightoverflow 值不为 visible即为 auto、scroll、hiddendisplay 值为 inline-block、table-cell、table-caption、table、inline-table、- – flex、inline-flex、grid、inline-grid绝对定位元素position 值为 absolute、fixed
BFC的特性
BFC 是页面上的一个独立容器容器里面的子元素不会影响外面的元素。BFC 内部的块级盒会在垂直方向上一个接一个排列同一 BFC 下的相邻块级元素可能发生外边距折叠创建新的 BFC 可以避免外边距折叠每个元素的外边距盒margin box的左边与包含块边框盒border box的左边相接触从右向左的格式的话则相反即使存在浮动浮动盒的区域不会和 BFC 重叠计算 BFC 的高度时浮动元素也会参与计算
应用 BFC是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面元素反之亦然。我们可以利用BFC的这个特性来做很多事。 自适应两列布局 左列浮动定宽或不定宽都可以给右列开启 BFC。
divdiv classleft浮动元素无固定宽度/divdiv classright自适应/div
/div* {margin: 0;padding: 0;
}
.left {float: left;height: 200px;margin-right: 10px;background-color: red;
}
.right {overflow: hidden;height: 200px;background-color: yellow;
}将左列设为左浮动将自身高度塌陷使得其它块级元素可以和它占据同一行的位置。
右列为 div 块级元素利用其自身的流特性占满整行。右列设置overflow: hidden,触发 BFC 特性使其自身与左列的浮动元素隔离开不占满整行。这即是上面说的 BFC 的特性之一浮动盒的区域不会和 BFC 重叠
防止外边距margin重叠 兄弟元素之间的外边距重叠
divdiv classchild1/divdiv classchild2/div
/div* {margin: 0;padding: 0;
}
.child1 {width: 100px;height: 100px;margin-bottom: 10px;background-color: red;
}
.child2 {width: 100px;height: 100px;margin-top: 20px;background-color: green;
}两个块级元素红色 div 距离底部 10px绿色 div 距离顶部 20px按道理应该两个块级元素相距 30px 才对但实际却是取距离较大的一个即 20px。 块级元素的上外边距和下外边距有时会合并或折叠为一个外边距其大小取其中的较大者这种行为称为外边距折叠重叠注意这个是发生在属于同一 BFC 下的块级元素之间 根据 BFC 特性创建一个新的 BFC 就不会发生 margin 折叠了。比如我们在他们两个 div 外层再包裹一层容器加属性 overflow: hidden触发 BFC那么两个 div 就不属于同个 BFC 了。
divdiv classparentdiv classchild1/div/divdiv classparentdiv classchild2/div/div
/divdivdiv classparentdiv classchild1/div/divdiv classparentdiv classchild2/div/div
/div这个关于兄弟元素外边距叠加的问题除了触发 BFC 也有其他方案比如你统一只用上边距或下边距就不会有上面的问题。 父子元素的外边距重叠 这种情况存在父元素与其第一个或最后一个子元素之间嵌套元素。 如果在父元素与其第一个/最后一个子元素之间不存在边框、内边距、行内内容也没有创建块格式化上下文、或者清除浮动将两者的外边距 分开此时子元素的外边距会“溢出”到父元素的外面。
div idparentdiv idchild/div
/div* {margin: 0;padding: 0;
}
#parent {width: 200px;height: 200px;background-color: green;margin-top: 20px;
}
#child {width: 100px;height: 100px;background-color: red;margin-top: 30px;
}如上图红色的 div 在绿色的 div 内部且设置了 margin-top 为 30px但我们发现红色 div 的顶部与绿色 div 顶部重合并没有距离顶部 30px而是溢出到父元素的外面计算。即本来父元素距离顶部只有 20px被子元素溢出影响外边距重叠取较大的值则距离顶部 30px。 解决办法
给父元素触发 BFC如添加overflow: hidden给父元素添加 border给父元素添加 padding 这样就能实现我们期望的效果了 清除浮动解决令父元素高度坍塌的问题 当容器内子元素设置浮动时脱离了文档流容器中总父元素高度只有边框部分高度
div classparentdiv classchild/div
/div* {margin: 0;padding: 0;
}
.parent {border: 4px solid red;
}
.child {float: left;width: 200px;height: 200px;background-color: blue;
}解决办法给父元素触发 BFC使其有 BFC 特性计算 BFC 的高度时浮动元素也会参与计算
.parent {overflow: hidden;border: 4px solid red;
}上面我们都是用的 overflow: hidden 触发 BFC因为确实常用但是触发 BFC 也不止是只有这一种方法。 如上面写的所示可以设置float: left;float: right;display: inline-block;overflow: auto;display: flex;display: table;position 为 absolute 或 fixed 等等这些都可以触发不过父元素宽度表现不一定相同但父元素高度都被撑出来了。 当然实际运用可不是随便挑一个走还是根据场景选择。
