bfc | 易学教程

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

阅读更多关于 45道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 优先级

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

阅读更多关于 45道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 优先级（就近原则）：

css3重要知识点和bug解决方法

阅读更多关于 css3重要知识点和bug解决方法

1.图片向下撑大3像素问题在一个盒子里面放一张图片，默认情况下，图片会向下撑大3像素，有以下几种解决方法： 1.1 给图片添加display:block； 1.2 给图片添加 float:left； 1.3 给图片添加 vertical-align:middle; 1.4 给他的父元素加font-size：0； 2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中？给父元素添加宽高，添加行高添加 text-align：center 给图片添加：vertical-align：center 3.元素的类型分类哪几种？各自都有什么特点？块元素独占一行，竖着排，能设置宽高行内元素默认情况下文本一行显示，不能设置宽高行内块状元素 inline-block,既有行内元素的特点又有块状元素的特点可变元素添加float：left 相当于display：block 4.如何实现一个元素消失和出现？ display：none display：block opcity:0; opcity:1; 5.单行文本溢出显示省略号怎么实现？添加width； white-space：nowrap； overflow：hidden； text-overflow：ellipsis； 6.定位的属性值有哪几个？分别有什么特点？ position:absolute 绝对定位，脱离文档流

什么是BFC

阅读更多关于什么是BFC

写CSS样式时，对一个元素设置css,我们首先要知道这个元素是块级元素还是行内元素，而BFC就是用来格式化块级盒子的。 BFC定义：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。满足下列CSS声明之一的元素便会生成BFC： 1.根元素或其它包含它的元素 2.float的值不为none； 3.overflow的值不为visible； 4.position的值不为static； 5.display的值为inline-block、table-cell、table-caption； 6.flex boxes (元素的display: flex或inline-flex) BFC的布局规则是什么样的呢？ 1、内部的元素会在垂直方向一个接一个地排列，可以理解为是BFC中的一个常规流 2、元素垂直方向的距离由margin决定，即属于同一个BFC的两个相邻盒子的margin可能会发生重叠 3、每个元素的左外边距与包含块的左边界相接触(从左往右，否则相反)，即使存在浮动也是如此，这说明BFC中的子元素不会超出它的包含块 4、BFC的区域不会与float元素区域重叠 5、计算BFC的高度时，浮动子元素也参与计算 6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

css实现左边div自适应宽度，右边宽度适应左边

阅读更多关于 css实现左边div自适应宽度，右边宽度适应左边

利用bfc：右边盒子触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。 1 <style> 2 .box{ width: 900px; margin: 0 auto; background-color: #eee; } 3 .left{ min-width: 200px; float: left; background-color: yellow; height: 60px;} 4 .bfc { background-color: green; } 5 .right{ display: inline-block; margin-left: 20px; background-color: red; height: 60px;} 6 </style> 7 <div class="box"> 8 <div class="left"> 9 我是自适应宽度盒子，min-width:200px 10 </div> 11 <div class="bfc"> 12 <div class="right"> 13 我是自适应宽度，铺满剩下宽度 14 </div> 15 </div> 16 </div> 效果如图补充一下：　　BFC翻译过来是块级格式化上下文，和haslayout比较相似，但haslayout是旧版本IE下的一个专有属性，表示元素自己对自身的内容进行组织和计算

前端开发-css基础入门

阅读更多关于前端开发-css基础入门

CSS cascading（层叠） style（样式） sheet（表） css注释 /* 注释内容 */ 快捷键:ctrl ? 引入方式  <div style="width:100px;height:100px;"></div>  <head> <style> div{ background-color: red; height: 100px; width: 100px; } </style> </head>  <link rel="stylesheet" href="css文件路径" > css选择器　　基本选择器元素选择器 div{ } id选择器 #demo 在html中(id="demo") 类选择器 .demo 在html中(class="demo") 通用选择器 *{ } 组合选择器后代选择器 div a 找div下所有的a 直接子元素选择器 div>a 只找下一代a 兄弟选择器 div.a 只找下一个兄弟弟弟选择器 div~a 找到所有兄弟属性选择器 [title] 分组选择器 demo1，demo2 伪类选择器 a:link a:visited a:hover a:sctive input:focus 伪元素选择器 p::before p

见过却不一定了解过的前端面试题-BFC

阅读更多关于见过却不一定了解过的前端面试题-BFC

BFC 块级格式化上下文（Block Formatting Context）。什么叫块级格式化上下文？在块盒子布局过程中，使用以下css属性进行布局所产生的的区域就是块级格式化上下文*。根元素( <html> ) 浮动元素（元素的 float 不是 none ）绝对定位元素（元素的 position 为 absolute 或 fixed ）行内块元素（元素的 display 为 inline-block ）表格单元格（元素的 display 为 table-cell ，HTML表格单元格默认为该值）表格标题（元素的 display 为 table-caption ，HTML表格标题默认为该值）匿名表格单元格元素（元素的 display 为 table、``table-row 、 table-row-group、``table-header-group、``table-footer-group （分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table ） overflow 值不为 visible 的块元素 display 值为 flow-root 的元素 contain 值为 layout 、 content 或 paint 的元素弹性元素（ display 为 flex 或 inline-flex

css盒模型

阅读更多关于 css盒模型

css盒模型一、基本概念：　　标准模型+IE模型二、标准模型和IE模型的区别　　计算宽度和高度的不同　　标准模型宽高只包含内容，不包含padding和border width=content 　　IE模型宽高包含padding和border width=conten+padding+border 三、css如何设置这两种模型　　标准模型：box-sizing: content-box 浏览器默认　　IE模型: box-sizing: border-box 四、js如何设置获取盒模型对应的宽和高　　dom.style.width/height(只能取内联样式的) 　　dom.currentStyle.width/height(只有IE支持) 　　window.getComputedStyle(dom).width/height 　　dom.getBoundingClientRect().width/height (ie9及以上支持) 　　兼容写法：width = dom.getBoundingClientRect().right - left 　　　　　　　height = dom.getBoundingClientRect().bottom - top 五、根据盒模型解释边距重叠六、BFC（边距重叠解决方案）　　BFC基本概念版：块级格式化上下文-解决边距重叠

BFC, IFC

阅读更多关于 BFC, IFC

###11.4 BFC: BFC块级格式化上下文，它是一个环境。当一个块级元素形成一个BFC环境以后，这个块级元素里面的子元素不会影响外面的元素，外面的元素也不会影响里面的元素。但是当子元素里再创建一个子元素，就必须把父级的子元素也触发BFC环境，否则，子元素里的子元素也会影响外面的子元素和其他元素。 overflow:hidden;可以触发BFC环境。当加上overflow:hidden;不是这个元素产生BFC环境，而是这个元素里面的子元素触发BFC 如果给一个元素触发了BFC环境，只能说明这个元素里面的子元素不会影响外面的元素，子元素里的子元素会影响。所以子元素里的子元素必须重新设定BFC环境边距重叠：在BFC环境中，元素的外边距重叠，解决办法：在元素的父元素设置overflow:hidden，触发BFC，里面的子元素触发BFC环境。外边距：两个DIV的之间 button 和 top 取最大的值产生BFC的属性： float:浮动 position:定位 display: overflow:hidden。注：overflow的属性不能为visible; IFC: IFC:行内格式上下文，行内属性自动触发，行内元素以基线对齐属性： line-height; vertical-align; 基线：是以X字母下边为基线。 line-box:行框

css3之BFC、IFC、GFC和FFC

阅读更多关于 css3之BFC、IFC、GFC和FFC

CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。 What's FC？一定不是KFC，FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？ float的值不为none。 overflow的值不为visible。 position的值不为relative和static。 display的值为table-cell, table-caption, inline-block中的任何一个。那BFC一般有什么用呢？比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。 IFC IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响) IFC中的line box一般左右都贴紧整个IFC

订阅 bfc