bfc

CSS基础 定位盒子完美居中 旋转 rotate 3D变形（CSS3） rotateXYZ() 透视perspective translate3d demo1 开门 demo2 翻转图片 CSS动画 CSS3伸缩布局 justify-content属性，水平对齐方式 align-items属性，垂直对齐方式 flex-wrap控制换行 align-content 对齐 order 控制子项目的排列顺序 BFC 什么是BFC 产生BFC的条件 BFC元素所具有的特性 BFC的作用 背景渐变色 浏览器私有前缀 背景渐变色 CSS3 W3C统一验证工具 CSS压缩 旋转轮播图 靶心制作 定位盒子完美居中 div { width : 200px ; height : 200px ; background-color : pink ; position : absolute ; left : 50% ; top : 50% ; /*这是以前的写法，碰到宽度为奇数不好除的就不行了，同时还需要计算，如果盒子变大了还需要重新手动计算，不适用*/ /*margin-left: -100px; margin-top: -100px; */ /*这是完美写法，translate水平移动距离，且 % 是参照自己的宽度为标准的，而不是参照父级盒子的标准*/ transform : translate (

题目概览 iframe框架都有哪些优缺点？ 简述你对BFC规范的理解 统计某一字符或字符串在另一个字符串中出现的次数 题目解答 iframe框架都有哪些优缺点？ 概念：frame是一种框架，也是一种很常见的网页嵌入方式 <iframe id='ifr1' url='https:xxxxx' width='1080px' height='960px'></iframe> 优点 iframe能够原封不动的把嵌入的网页展现出来；可以实现异步刷新，单个 iframe 刷新不影响整体窗口的刷新（可以实现无刷新上传，在 FormData 无法使用时） 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；可以实现跨域，每个 iframe 的源都可以不相同（方便引入第三方内容） 缺点 会产生很多页面，不容易管理； iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容

1.什么是BFC BFC 全称为 块格式化上下文 (Block Formatting Context) 。 2.BFC有啥作用 1.使 BFC 内部浮动元素只在内部发挥作用，不会不会影响到外部 2.解决边距重叠问题（同时能清除浮动） 3.BFC的原理（BFC的渲染规则） 1.BFC元素垂直方向的边距会发生重叠 2.BFC的区域不会与浮动元素的box重叠，可以包含浮动元素（用来清除浮动） 3.BFC在页面上是一个独立的元素，里面与外面的元素相互不影响 4.计算BFC的高度，浮动元素也会参与计算 4.如何创建BFC 1.float不为null 2.position不为static/relative 3.display的值为table-cell,table-caption,or inline-block中的任何一个 4.overflow值不为visible 5.代码上手 <!-- BFC垂直方向边距重叠 --> < section id = " margin " > < style > #margin { background : pink ; overflow : hidden ; } #margin>p { margin : 5px auto 25px ; background : red ; } </ style > < p > 1 </ p > < div style ="

BFC定义： 　　BFC(Block formatting context)直译为"块级格式化上下文"。 　　它是一个独立的渲染区域，只有Block-level box参与， 　　它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC布局规则特性： 在BFC中 ， 盒子从顶端开始垂直的一个接一个排列 盒子垂直方向的距离有margin决定，属于同一个BFC的两个相邻的盒子发生重叠 在BFC中，每个盒子的左外边距（margin-left）会触碰到容器的左边缘（border-left） BFC的区域不会与浮动盒子重叠，而是紧贴浮动边缘。 浮动的元素会被父级计算高度（父级触发了BFC） 计算BFC的高度时，其浮动子元素元素也参与计算 BFC触发条件：　 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible BFC用途： 清除浮动 解决 外边距合并 问题　　（让两个盒子不属于同一个BFC） 右侧盒子自适应 外边距合并: （ 注： 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并 ） 相邻块级元素外边距合 　　　　

BFC与IFC 在我们做的网页上通常最重要的其中一点就是美观度，bfc他是一个块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 因为我现在天天在做网页了，之前没怎么关注bfc与ifc原理，以至于我做出来的网页有点偏差。所以要深刻学习以下知识。 bfc：指它里面的子元素不会影响到外面的元素 加上一个overflow:hilden该元素的子元素是一个bfc下面 只要触发的是个bfc那么它对外面都没有影响。 1.block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context； 2.inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context； 块级元素，在浏览器中通常是垂直布局，然后可以用margin来控制块级元素之间的间距，并列和嵌套的块级元素都存在外边距，也就是margin合并的问题。 而行内元素是以水平的方式布局，垂直方向的margin

A . 常见定位方案 . 1. 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 . . 2. 浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。 注：浮动的元素无法覆盖后面的：display:inline、inline-block、flex；overflow:hidden、scroll、auto . . 3. 绝对定位 (absolute positioning) 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。 . B . 什么是BFC？ BFC 全称为 块格式化上下文 (Block Formatting Context) 。 它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 它属于普通流。 具有 BFC 特性的元素可以看作是 隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素 ，并且 BFC

Box: CSS布局的基本单位 　　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子： BFC 快级格式化上下文 block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context； （块元素参与BFC） IFC 内联格式化上下文 inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context； （行内元素参与IFC） run-in box: css3 中才有， 这儿先不讲了。 Formatting context 是 W3C CSS2.1 规范中的一个概念。 它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 最常见的 Formatting

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。 一、BFC是什么？ 　　在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 　　Box: CSS布局的基本单位 　　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子： block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context； inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline

这些个知识点是我个人认为的，下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子设置：display: flex; justify-content: center;align-items: center; 使用 CSS3 transform 父盒子设置: display:relative Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%; 使用 display:table-cell 方法 父盒子设置: display:table-cell; text-align:center;vertical-align:middle ; Div 设置: display:inline-block;vertical-align:middle ; 2.position 几个属性的作用 position 的常见四个属性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。 static:默认位置。 在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position

摘要 刚看了一个关于前端面试题的帖子，有些css题虽然能答出来，但出于学习的目的与好奇心，觉得有必要加深一下对功能实现原理的了解。整理出一份文档，共勉。 正文 行内元素的高 众所周知，行内元素是无法通过直接设置height样式来设置高度的，我们常用的方法是设置 line-height , font-size 来撑高。可是不知道道友们有没有发现，比如： <span style="font-size: 16px"> hello </span> 这段HTML在浏览器查看span的高度并不是16px 尝试设置行高也无济于事，不过还是找到了原因所在。W3C 规范 文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法（摘自 参考 ）。不过实际上这个对样式的影响不是很大,或者设置display: inline-block；line-height: 1。 vertical-align属性的理解 vertical-algin理解 vertical-algin 元素相对于基线(baseline, 字符的基线要底部偏上一些)的偏移量。vertical-align的值除了 baseline , middle 也是可以为px数值的。而那些特殊有意义的单词也可以理解为对应了相应的px值。借用一张表，这里描述的比较详细 下图栗子 扩展一句：行内元素的高 =