css盒子模型计算高的公式,【知识梳理】3.2CSS盒模型

题目：谈谈你对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。

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。getBoundingClientRect()

5.实例题

一个题目：块级元素嵌一个子块级元素，子元素的高度为100px,子元素与父元素的上边距是10px,求父元素的高度？答案100px,110px都对。(根据盒模型解释边距重叠，拔高题)

考察点：边距重叠

1.父子元素。

2.兄弟元素：取margin-top和margin-bottom的最大值作为边距。

3.空元素：空元素的margin-top和margin-bottom取一个最大值作为边距。

#sec{

background-color: red;

overflow: hidden;

/*不加此句话，父元素高度100px,加上此句话，父元素高度110px*/

}

.child{

height: 100px;

margin-top: 10px;

background-color: blue;

}

overflow: hidden;给父元素sec创建的一个BFC。父元素上不加此句话，父元素高度100px,加上此句话，父元素高度110px

6.BFC(边距重叠解决方案)/IFC

BFC基本概念：

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垂直方向边距重叠

#margin{

background-color: red;

overflow: hidden;/*创建BFC*/

}

#margin p{

margin: 5px auto 25px;

background-color: blue;

}

BFC垂直方向边距重叠，margin: 5px auto 25px;

1

2

3

清除重叠，给子元素增加一个父元素f，给他f创建一个BFC

1

2

3

2.BFC元素不会与浮动元素重叠

#layout{

background-color: red;

}

#layout .left{

float: left;

width: 100px;

height: 100px;

background-color: pink;

}

#layout .right{

height: 110px;

background-color: blue;

}

左侧固定宽度，右侧自适应；左浮动，且右侧高度高于左侧

float: left;height: 100px;

height: 110px;

BFC不与float重叠

float: left;height: 100px;

height: 110px;用overflow: auto;创建BFC，就不会再与左侧部分发生重叠

3.BFC子元素即使是float也会参与计(正常情况下，子元素是float元素时，不参与计算)

子元素是float元素时，不参与计算，父元素红色背景不显示

#float{

background-color: red;

}

#float .float{

float: left;

}

#float:after{

content: "";

}

我是浮动元素,子元素是浮动元素的时候，高度计算没有包含进来，此时父级元素高度为0

BFC子元素即使是float也会参与计算，父元素为BFC，背景为红色

#float2{

background-color: red;

overflow: hidden;/*创建BFC*/

}

#float2 .float{

float: left;

}

我是浮动元素,BFC子元素是浮动元素的时候，参与计算，此时父级元素高度是21px;