前端面试题目：谈谈对CSS盒模型的理解

CSS盒模型是CSS的基石，面试一定会问道；

基本概念：标准模型+IE模型；（content，padding，border，margin）

标准模型和IE模型的区别：

CSS如何设置这两种模型：

       box-sizing: content-box;(标准模型，默认)    box-sizing: border-box;(IE模型)

JS如何设置获取盒模型对应的宽和高：

       dom.style.width/height：只能取到内联样式的宽和高；

       dom.currentStyle.width/height：三种样式都可获取到，但只有IE支持；

       window.getComputedStyle(dom).width/height：兼容火狐和谷歌；

       dom.getBoundingClientRect().width/height：返回值有left,top,width,height；

实例题（根据盒模型解释边距重叠）：

       父子重叠，子元素有一个margin-top，但是margin加到了父元素上；
       两个div上下重叠，左右重叠都会出现边距重叠，解决方案是取最大值；
       空元素有上下边距，会出现边距重叠，去最大值；

BFC（边距重叠解决方案）：

为什么加上overflow: hiddden就可以解决？是因为给父级元素创建了一个BFC（块级格式化上下文）

BFC原理就是BFC渲染规则：

      1. BFC这个元素垂直方向边距会发生重叠
      2. BFC区域不会与浮动box重叠
      3. BFC是一个独立的容器 外面的元素不会影响里边的元素，反过来 里边的元素也不会影响外边的元素
      4. 计算BFC元素的高度时 浮动元素也会参与计算

如何创建BFC？

      1. float不为none
      2. position的值不为static或relative
      3. display为table相关
      4. overflow不为visible

	
	
1
	

		
2
	
	
3

	
	
我是浮动元素