前端必须要了解的一些知识 (五)

 

 

盒模型

标准模型和IE模型

 

 

标准模型和IE模型的区别

1计算宽度和高度的不同

ie中content的宽度包括padding和border这两个属性

 

css是如何设置这两种模型的

border-box 是·ie

默认 content-box

 

js如何获取盒模型的宽和高

四种方法

1.dom.style.width/height 只能获取行内样式

2.dom.currentStyle.width/height只适合ie，兼容性问题

3.window.getComputedStyle(dom).width/height可以准确获取//兼容性最好

4.dom.getBoundingClientRect().width/height

getBoundingClientRect()可以返回一个包含几个参数的对象，left，top，width,height.等。。盒模型距离viewport 左上角的距离。

 

 

 

拔高

解释边距重叠

margin边距重叠取最大值

 

 

引出BFC和IFC

IFC在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

 

BFC的使用场景

 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC的生成

既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

　　看到有道友文章中把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC

BFC的约束规

1. 内部的Box会在垂直方向上一个接一个的放置
2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

 

清除浮动的四种方式及其原理理解

 利用clear样式

 

 父元素结束标签之前插入清除浮动的块级元素

 

利用伪元素（clearfix）

 

利用overflow清除浮动