WEB前端零碎知识整理.pdfVIP

目 录 关于BFC JSON.srtingigy 在项目中遇到的瀑布流问题 本文档使用 看云 构建 - 2 - 关于BFC 关于BFC BFC定义 BFC （Block Formatting Context ），即块格式化上下文 ，它是CSS2.1规范定义的 ，关于CSS渲染定位的一个概 念。 BCF的范围 在MDN中的描述是 ：一个BFC包含创建该上下文元素的所有子元素 ，但不包括创建了新BFC的子元素的内部元 素。 BFC的效果 1. 内部的盒会在垂直方向一个接一个排列 ； 2. 处于同一个BFC中的元素相互影响 ，可能会发生margin collapse ； 3. 每个元素的margin box的左边 ，与容器块border box的左边相接触(对于从左往右的格式化 ，否则相反)。即 使存在浮动也是如此 ； 4. BFC就是页面上的一个隔离的独立容器 ，容器里面的子元素不会影响到外面的元素 ，反之亦然 ； 5. 计算BFC的高度时 ，考虑BFC所包含的所有元素 ，连浮动元素也参与计算 ； 6. 浮动盒区域不叠加到BFC上 ； 创建一个BFC 在盒子上添加如下样式 ： 1. float 除了none以外的值 2. overflow （hidden ，auto ，scroll ） 3. display (table-cell ，table-caption ，inline-block, flex, inline-flex) 4. position值为 （absolute ，fixed ） 5. fieldset元素 常见的是overflow hidden、float left/right、positionabsolute。也就是说 ，每次看到这些属性的时候 ，就代 表了该元素以及创建了一个BFC了。 理解BFC 从上述效果看 ，感觉创建一个BFC ，就像是新建了一个html文档 ，不过这个html文档的作用范围在创建该BFC的 盒子内 如果把一个html文档看成是一个盒子 本文档使用 看云 构建 - 3 - 关于BFC !DOCTYPE html html lang en head meta charset UTF-8 titleDocument/title /head body /body /html 那么 ，以上初始代码的... ，就像用div创建的一个盒子 ，当然这个盒子就有BFC效果。 我们在其中添加2个绿色的方块 ，来对比以上列举的BFC效果。 !DOCTYPE html html lang en head meta charset UTF-8 titleDocument/title style * {margin: 0;padding: 0;} .box {width: 50px;height: 50px;background-color: mediumseagreen;margin: 10px;} /style /head body div class box/div div class box/div /body /html 在浏览器中打开如上图。内部的盒子 （即两个div元素 ，图中表现的两个绿色方块 ）在垂直方向一个接一个排列 ， 本文档使用 看云 构建 - 4 - 关于BFC 符合BFC效果中描述的第1点。 然后我们打开浏览器调试看看。 先看上图中的第一张图 ，我将方块的边距margin设为10px ，边距+绿色方块构成一个margin box ，其左边与浏 览器页面左边接触 ，符合BFC效果中描述的第3点 ： 每个元素的margin box （我们例子中的边距+绿色方块 ）的 左边 ，与容器块border box （浏览器页