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

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

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

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

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

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

<!--BFC垂直方向边距重叠-->
<section id="margin">
	<style>
		#margin{
			background: #00FF00;
			overflow: hidden;/*可以解决最外层边距重叠，内部边距重叠还应当给p加一个父元素*/
                             /*可以解决边距重叠问题，给父级元素创建了BFC*/
		}
		#margin p{
			margin: 20px 0 10px;
			background: #FF0000;
		}
	</style>
	<p>1</p>
	<div style="overflow: hidden;">
		<p>2</p>
	</div>
	<p>3</p>
</section>

<!--BFC不与float重叠-->
<section id="layout">
	<style>
		#layout{
			background: pink;
		}
		#layout .left{
			float: left;
			width: 100px;
			height: 100px;
			background: gray;
		}
		#layout .right{
			height: 110px;
			background: yellow;
			overflow: hidden;
		}
	</style>
	<div class="left"></div>
	<div class="right"></div>
</section>

<!--BFC子元素即使是float也会参与高度计算-->
<section id="float">
	<style type="text/css">
		#float{
			background: red;
			overflow: hidden;
		}
		#float .float{
			float: left;
			font-size: 30px;
		}
	</style>
	<div class="float">我是浮动元素</div>
</section>

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

相关推荐