bfc | 易学教程

CSS：BFC，块级元素居中

阅读更多关于 CSS：BFC，块级元素居中

1.BFC BFC的英文全称是block formatting context，即格式化上下文，当元素触发BFC时会变成一个独立的环境。这里列举一个触发BFC的方法，在父级元素加入overflow:hidden;其适用场景有：(1)为父级找高(2)子级margin-top将父级一起往下带(3)兄弟级元素浮动后影响其他元素，将受影响的元素触发BFC变成独立环境 2.可以触发BFC的元素： (1)根元素 (2)float (3)overflow:auto.scroll.hidden (4)display:flex.table-cell.table-caption.inline-block.inline-flex (5)position:absolute.fixed.relative 3.块级元素水平垂直居中方法 (1) 未知块级元素的宽高：给父级元素设置display:flex;align-items:center(垂直居中);justify-content:center(水平居中); (2) 已知块级元素的宽高：给父元素设置position:relative;子元素设置position:absolute;top:50%;left:50%;margin-top:-hight/2;margin-left:-width/2; (3) 已知块级元素的宽高：给子元素设置position

小聊BFC

阅读更多关于小聊BFC

“不起眼”的BFC BFC 这个词可能之前没怎么听过，可是稍微接触过前端的人都知道css中有点小坑啊 !!!! 今天想要跟大家分享一下个人对于 BFC 的一个理解。如有不足或理解错误的地方，还望各位大佬指出，哈哈，感激感激。要是喜欢的话，也不妨点个赞啊。 *1.BFC 的定义： * **BFC** （**Block fomatting context**）：是一个独立的渲染区域，只有块级元素参与，规定了内部的块级元素如何布局，并与区域外部的毫不相干。 *2.BFC 的创建： overflow 的值不为visible float 的值不为none position 的值不为static display 的值为inline-block、table-cell、table-caption（因为table会默认生成一个匿名的table-cell,而table-cell又会生成BFC） *3.BFC应用元素垂直方向上下重叠(margin大的值会覆盖小的值，而不是两值之和) .box p { margin: 10px 0; background-color: yellow; } .box p:nth-child(1) { margin-bottom: 25px; } 效果如下：解决方法： <div class="box" id="box"> <p>Lorem ipsum dolor

常规流之块级格式化上下文（Block Formatting Contexts）

阅读更多关于常规流之块级格式化上下文（Block Formatting Contexts）

　　在css2.1中，常规流包括块框（block boxes）的块格式化（block formatting）,行内框（inline boxes）的行内格式化（inline formatting），块级框（block-level-boxes）或行内级框（inline-level-boxes）的相对定位。常规流中的框属于一个格式化上下文，可能是块或者是行内，但不能同时都是。块级框参与块级格式化上下文，行内级框参与行内级格式化上下文。今天我们先来说说块级格式化上下文，也就是我们常说的BFC。一.形成块级格式化上下文绝对定位元素（fixed其实是absolute的一个子集） display为inline-block，table-cell，table-caption，flex，inline-flex（这里有一点要注意的，display-table本身不会形成BFC，但是它会产生匿名框，其中包含的dispaly：table-cell元素会形成BFC） overflow不为visible 根元素 float属性不为none 　这里要说明的是这些是形成块格式化上下文，而不是说是参与块级格式化上下文，这两个概念很容易弄混，大家可以仔细体会下。块格式化上下文是一个独立的渲染区域，而且只会有块级框（block-level box）来参与，它规定内部的块级框如何布局

css盒模型

阅读更多关于 css盒模型

1. 标准盒模型IE和模型及区别 2. css如何设置两种和模型 3. js获取和模型对应的宽和高 4. 根据和模型解释边距重叠 5. 边距重叠解决方案（BFC） 1. IE盒模型宽高包含border和padding，标准盒模型不包含 2. 设置两种和模型　　box-sizing： content-box 标准盒模型（浏览器默认）　　box-sizing： border-box IE盒模型 3. 获取内联元素宽高 dom.style.width/height 　获取内部样式和外部样式 dom.currentStyle.width/height (IE) window.getComputedstyle(dom).width/height (chrome/Firefox) 4. BFC 块级格式化上下文　原理：　　　　BFC元素垂直方向发生重叠　　　　BFC区域不会与浮动元素重叠　　　　BFC在页面中是独立容器　　　　计算BFC元素浮动元素参与计算创建BFC：　　　　float值不为none 　　　　position值不为static和reletive 　　　　overflow值不为visible 　　　　display值非table相关的来源： https://www.cnblogs.com/fakem0nk/p/9483051.html

CSS学习笔记07 盒子模型

阅读更多关于 CSS学习笔记07 盒子模型

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;} 8 .div2 {background-color: #EAFFD0; width: 200px; height: 100px;} 9 .div3 {background-color: #95E1D3; width: 200px; height: 100px;} 10 </style> 11 </head> 12 13 <body> 14 <div class="div1">div1</div> 15 <div class="div2">div2</div> 16 <div class="div3">div3</div> 17 </body> 18 </html> 可以看到，块级元素的排列顺序是从上往下，即使所在行的宽度可以容纳多个元素，现在同时给div1与div2添加外边距本来div1的下边距为50px，div2的上边距为50px，按道理他们之间的距离应为100px才对，可是这里却只有50px了

关于BFC的理解

阅读更多关于关于BFC的理解

关于BFC的理解标签： css,BFC 关于BFC是在一篇技术帖中看到的，当时看得起荤八素。没有真正理解其中的原理及解决的问题。直到后来在工作中遇到BFC类似的问题，但是却没有意识到这是BFC类的问题，可能是之前文章没有认真看的缘故吧！而在最近看到清除浮动的问题，其中有提到BFC是一种清除浮动的方案，文章看完之后才发现原来之前工作中遇到的类似的问题可以这样解决，这居然就是BFC。所以觉得有必要记录下我对BFC的理解，浅浅的理解，欢迎来喷！ 1.什么是BFC BFC （Block Formatting Context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。大家都知道在css中，对于一个元素需要知道它的类型是block还是inline，因为在css中布局是以盒子为对象和基本单位，盒子类型的不同决定了不同的格式化上下文渲染方式。既然盒子的类型会影响网页中具体元素的布局，那么BFC又是怎么来影响盒子从而影响最终的布局的呢？如何产生BFC CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC: 根元素 float的值不为none overflow的值不为visible display的值为inline-block、table

BFC 块级格式化上下文

阅读更多关于 BFC 块级格式化上下文

块级格式化上下文（Block Fromatting Context）是按照块级盒子布局的。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。即满足以下其中任一或多个条件： 1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible 作用：内部的Box会在垂直方向上一个接一个的放置垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块

检验你的前端基础——Sit the test

阅读更多关于检验你的前端基础——Sit the test

　　最近有时间，想把酝酿的几篇博客都写出来，今天前端小学生带着10个问题，跟大家分享一下学习CSS的一些体会，我觉得想学好CSS，必须保持一颗好奇心和刨根问底的劲头，而不是复制粘贴，得过且过。本人能力有限，这篇文章从构思加完成用了四五天，如果你和我一样是前端小白，不妨仔细斟酌体会，以期领悟到一些东西；如果你是业界大牛，也请你驻足随意瞄上两眼，把言辞内容不妥的地方指出来，我们共同讨论。时刻保持好奇心　　第一问：当margin的值为百分比形式时，为什么浏览器会根据父容器宽度得出计算值？　　在我之前一篇博客检验你的前端基础——Sit the test 中，聊到了margin值为<percentage>时的计算方法。假如有一个父容器宽度400px，高度600px，其子元素设置margin:20% 20%后的计算值应该为“margin:120px 80px”还是“margin:80px 80px”呢？按照那篇博客中的理论，第二个是正确答案。但是在今天这篇文章中，我给出的答案是第一个肯定错，第二个也不一定对。一个符合W3C标准的浏览器会根据父容器的宽度进行计算，但是这个仅限于书写模式为横向的时候。因为在横向排版时，宽度“有迹可循”，可以把浏览器宽度作为参考，但是高度是不固定的，所以margin百分比值在计算时会参考父容器的宽度。当书写模式改为纵向，其计算参考便会变为父容器的高度了。

自用CSS基础笔记-①入门知识

阅读更多关于自用CSS基础笔记-①入门知识

CSS优化界面 CSS选择器：（C3） ①id选择器②类选择器③标签选择器 ④通配符选择器⑤伪类选择器:（链接伪类a:link/visited/hover/active，结构伪类E:frist-child/E:last-child/E:nth-child(n)，目标伪类:target） ⑥复合选择器 ⒈交集选择器[既标签又类名，连写] ⒉并集选择器[逗号] ⒊后代选择器[空格] ⒋子元素选择器[＞] ⑦属性选择器 ⑴E[attr] （attr是属性值） ⑵E[attr=val]（全等） ⑶E[attr^=val]（属性值以val开头）⑷E[attr$=val]（属性值以val结尾）⑸E[attr*=val]（任意位置包含val） ⑧伪元素选择器:: E::frist-letter，E::frist-line，E::selection，E::before，E::after。（前/后添加content）类选择、伪类选择器就是选取对象，而伪元素选择器本质是插入一个行内元素（盒子）审查不到标签却能显示盒模型，要伪元素不占位要用绝对定位。 CSS简写： ①background:url(images/x.png) no-repeat fixed center -25px,url(images/x.png) no-repeat scroll center -25px #000;颜色最后加

50道CSS基础面试题（附答案）

阅读更多关于 50道CSS基础面试题（附答案）

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

订阅 bfc