1、基本概念：标准模型+IE模型
margin、border、padding、content
2、标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的
width:100px; 如果是IE，100px包括border和padding，
3、css如何设置这两种模型
box-sizing:content-box;
box-sizing:border-box; /IE模型/
4、js如何设置获取盒模型对应的宽和高
dom.style.width/height // 只能取到内联样式
dom.currentStyle.width/height // 取到渲染后的样式（只有IE支持）
window.getComputedStyle(dom).width/height // 兼容firefox，chrome，兼容性更好
dom.getBoundingClientRect().width/height // 运行后的宽度，getBoundingClientRect()能得到left/top/width/height，bounding:范围,rect，矩形
<body>
<section>
<style>
#dom {
height: 400px;
width: 100px;
background-color: red;
}
</style>
<div id='dom' style="width:200px;height:200px;">
<!-- <div id='dom'> -->
88888
</div>
</section>
</body>
<script>
// var w = document.getElementById('dom').style.width; //如果行内元素没有设置像素 获取为空 200px
// var w = document.getElementById('dom').currentStyle.width; //ie 浏览器 其他报错 200px
// var w = window.getComputedStyle(document.getElementById('dom')).width; //兼容firefox，chrome，兼容性更好 200px
// var w = document.getElementById('dom').getBoundingClientRect().width; // 200
// var w = document.getElementById('dom').getBoundingClientRect().left; // 8 默认宽度
// console.dir(w)
</script>
5、实例题（根据盒模型解释边距重叠）
（1）边距重叠：父子元素，兄弟元素，空元素上下边距
（2）#sec的子元素是.child
①#sec{}
.child{height:100px;margin-top:10px;}
这时#sec的高度为100px;
②#sec{overflow:hidden;}
.child{height:100px;margin-top:10px;}
这时#sec的高度为110px;
6、BFC（边距重叠解决方案）
（1）BFC的基本概念：块级格式化上下文,Block Formatting Context
IFC：内联元素格式化上下文，不过面试问的比较多的是BFC
（2）BFC原理/BFC渲染规则
①BFC元素垂直方向的边距会发生重叠
②BFC的区域不会与浮动元素的box重叠（可用于清除浮动）
③BFC为一个独立的元素，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。
④计算BFC高度的时候，浮动元素也会参与计算。
（3）如何创建BFC
①float值不为none；
②position的值不为static(默认值),relative，即为absolute,fixed
③display为inline box,table-cell,table,table-caption，跟table相关的。
④overflow不为visible，overflow为auto,hidden;
⑤根元素
（4）BFC的使用场景
①属于同一个BFC上的元素垂直方向边距重叠
②BFC元素不与float重叠
③清除浮动：子元素是浮动元素的时候，把外层元素设置成BFC的时候，子元素的浮动元素也会参与到父级元素的高度计算上来。
<!--BFC不与float重叠-->
<section id="layout">
<style media="screen">
#layout{
background:red;
}
#layout .left{
float:left;
width:100px;
height:100px;
background:pink;
}
#layout .right{
height:110px;
background:#ccc;
overflow:auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
<!--BFC子元素即使是float，也会参与高度计算-->
<section id="float">
<style media="screen">
#float{
background:red;
/*overflow:auto;*/
float:left;
}
#float .float{
float:left;
font-size:30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
BFC详解：https://www.jianshu.com/writer#/notebooks/26471780/notes/44644373/preview
知识大全
网友评论