css中的盒子模型

 1.基本概念

标准模型+IE模型，margin、border、padding、content

2.标准模型和IE模型的区别计算宽度、高度的不同，如何计算？
标准模型的宽度和高度=content的宽度和高度；
IE模型的宽度和高度=content+padding+border的宽度和高度。

3.CSS如何设置这两种模型使用css3属性box-sizing设置
标准模型box-sizing:content-box；(浏览器默认)
IE模型box-sizing:border-box。顺便说说box-sizing的使用box-sizing 属性可以被用来调整这些表现:
content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高
4.JS如何设置、获取盒模型对应的宽和高dom.style.width/height；只能取出内联样式的宽高。
dom.currentStyle.width/height；浏览器渲染后的宽高，仅IE支持。
window.getComputedStyle(dom).width/height；兼容Firefox，Chrome。
dom.getBoundingClientRect().width/height；计算一个元素的绝对位置，根据视窗viewpoint可获取到width，height，top，left。5.实例题一个题目：块级元素嵌一个子块级元素，子元素的高度为100px,子元素与父元素的上边距是10px,求父元素的高度？答案100px,110px都对。（根据盒模型解释边距重叠，拔高题）考察点：边距重叠
1.父子元素。
2.兄弟元素：取margin-top和margin-bottom的最大值作为边距。
3.空元素：空元素的margin-top和margin-bottom取一个最大值作为边距。
<section id=”sec”>
<style>
#sec{
background-color: red;
overflow: hidden;
/*不加此句话，父元素高度100px,加上此句话，父元素高度110px*/
}
.child{
height: 100px;
margin-top: 10px;
background-color: blue;
}
</style>
<article class=”child”>overflow: hidden;给父元素sec创建的一个BFC。父元素上不加此句话，父元素高度100px,加上此句话，父元素高度110px</article>
<ction>
 6.BFC(边距重叠解决方案)/IFCBFC基本概念：
BFC:block formatting context，块级格式化上下文；
IFC:inline formatting context，内联元素格式化上下文。
BFC的原理（渲染规则）：
1.在BFC元素垂直方向的边距会发生重叠；
2.BFC的区域不会与浮动元素的box重叠，可用来清除浮动和布局的；
3.BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素不会影响外面的元素；
4.计算BFC高度的时候，浮动元素也会参加计算。
如何创建BFC？
1.float的值不为none；
2.position的值不为static或者relative；
3.display属性值为inline-block, table-cell, 和 table-caption，table;
4.overflow的值不为visiable，即overflow:auto;/overflow:hidden都可创建BFC
BFC的使用场景?
1.BFC垂直方向边距重叠
<!– BFC垂直方向边距重叠 –>
<section id=”margin”>
<style>
#margin{
background-color: red;
overflow: hidden;/*创建BFC*/
}
#margin p{
margin: 5px auto 25px;
background-color: blue;
}
</style>
<h3 style=”background-color: #fff;”>BFC垂直方向边距重叠，margin: 5px auto 25px;</h3>
<p>1</p>
<p>2</p>
<p>3</p><h3 style=”background-color: #fff;”>清除重叠，给子元素增加一个父元素f，给他f创建一个BFC</h3>
<p>1</p>
<div style=”overflow: hidden;background-color: yellow;”>
<p>2</p>
</div>
<p>3</p>
<ction>

2.BFC元素不会与浮动元素重叠
<!–BFC不与float重叠（布局时的应用，清除浮动） –>
<section id=”layout”>
<style>
#layout{
background-color: red;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
#layout .right{
height: 110px;
background-color: blue;
}
</style>
<h3 style=”background-color: #fff;”>左侧固定宽度，右侧自适应；左浮动，且右侧高度高于左侧</h3>
<div class=”left”>float: left;height: 100px;</div>
<div class=”right”>height: 110px;</div><h3 style=”background-color: #fff;”>BFC不与float重叠</h3>
<div class=”left”>float: left;height: 100px;</div>
<div class=”right” style=”overflow: auto;”>height: 110px;用overflow: auto;创建BFC，就不会再与左侧部分发生重叠</div>
<ction>

3.BFC子元素即使是float也会参与计（正常情况下，子元素是float元素时，不参与计算）
<!– BFC子元素即使是float也会参与计 –>
<h3 style=”background-color: #fff;”>子元素是float元素时，不参与计算，父元素红色背景不显示</h3>
<section id=”float”>
<style>
#float{
background-color: red;
}
#float .float{
float: left;
}
#float:after{
content: “”;
}
</style>
<div class=”float”>我是浮动元素,子元素是浮动元素的时候，高度计算没有包含进来，此时父级元素高度为0</div>
<ction><h3 style=”background-color: #fff;”>BFC子元素即使是float也会参与计算，父元素为BFC，背景为红色</h3>
<section id=”float2″>
<style>
#float2{
background-color: red;
overflow: hidden;/*创建BFC*/
}
#float2 .float{
float: left;
}
</style>
<div class=”float”>我是浮动元素,BFC子元素是浮动元素的时候，参与计算，此时父级元素高度是21px;</div>
<ction>