关于css盒模型

此图为css标准的盒模型，ie盒模型是宽度包含了padding，

改变这两种盒模型使用box-sizing:conten-box(标准盒模型)/border-box(IE盒模型)

关于FC:它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

 设置BFC解决边距重叠问题

1.根元素；

2.float的属性不为none；

3.position为absolute或fixed；

4.display为inline-block，table-cell，table-caption，flex；

5.overflow不为visible

 

 

 

<style>

　　

#box{
background-color: lightgrey;
width: 300px;
border: 10px solid green;
padding: 10px;
margin: 10px;
height:100px;
overflow: auto;
}

</style>

<div id="box"></div>

//获取盒子的内容高度，内容高度也可用用box.clientHeight获取，内容高度不包括边框和外边距和滚动条
var box = document.getElementById("box")
//console.log(`offsetTop:${box.style.height}`) //输出内联样式上的高度
var contentHeight = window.getComputedStyle(box).height //输出 '100px',是浏览器渲染之后的高
console.log(`元素实际高度contentHeight:${contentHeight}`)
//var IEcontentHeight = box.currentStyle.height//输出 '100px',是浏览器渲染之后的高,不过只是ie支持
//console.log(`IE的元素实际高度IEcontentHeight:${IEcontentHeight}`)

console.log(`视窗绝对位置的高getBoundingClientReat height : ${box.getBoundingClientRect().height}`)//输出视窗绝对位置的高,还有宽，left，right
console.log(`视窗绝对位置的做边距getBoundingClientReat left : ${box.getBoundingClientRect().left}`)//输出视窗绝对位置的高,还有宽，left，right

//获取盒子客户端的高度
console.log(`内容的实际高度clientHeight:${box.clientHeight}`) //输出120 (内容高度+padding * 2) 表示内容的实际高度,包括padding
console.log(`元素的实际高度offsetHeight:${box.offsetHeight}`) //输出140 表示元素的实际高度，包括内容的实际高度+边框的高度,可用尺子量的。
console.log(`scrollHeight:${box.scrollHeight}`) // 为子元素的实际高度加margin，也就是子元素的offsetHeight + margin*2。如果该元素没有产生滚动条，即其子元素的高度少于该元素的高度，则scrollHeight等于该元素的clientHeight

//如果box的父容器没有设置定位，则box.offsetLeft是相对body而言，否则是根据离它最近且有设置定位的父容器而言
console.log(`相对它的父容器水平的偏移offsetLeft:${box.offsetLeft}`) //获取box盒子相对它的父容器水平的偏移
console.log(`相对它的父容器垂直的偏移offsetTop:${box.offsetTop}`) //获取box盒子相对它的父容器垂直的偏移