day02-前端面试技巧-（盒模型）
2019-03-01 本文已影响8人
东邪_黄药师
image.png
css盒模型：
CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
标准盒模型与IE盒模型的区别：
-
标准盒模型：
image.png
-
IE盒模型:
image.png
CSS如何设置这两种模型：
- 标准：boxsizing：content-box
- IE：boxsizing：border-box
浏览器默认的是conten-boxt的
JS如何获取盒模型对应的宽和高：
1.dom.style.width/height(只适用获取内联元素的宽和高)
2.dom.currentStyle.width/height(获取渲染后的宽高，但是仅IE支持)
3.window.getComputedStyle(dom).width/height(与2原理相似，但是兼容性，通用性会更好一些)
4.dom.getBoundingClientRect().widht/height(计算元素绝对位置，获取到四个元素left,top,width,height)
根据盒模型解释边距重叠：
BFC（边距重叠解决方案）：
-
bfc的基本概念：
BFC 全称为 块格式化上下文 (Block Formatting Context) 。
-
bfc的原理：
1.BFC，这个元素的垂直方向的边距会发生重叠。
2.bfc的区域不会与浮动元素的box重叠
3.计算bfc高度的时候浮动元素也会参与计算
4.bfc在页面上是一个独立的容器，外面的元素不会影响里面的元素
-
怎么创建bfc：
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
-
bfc的使用场景有哪些？
BFC垂直方向边距重叠 （给子元素增加了父元素）：
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
#margin>p{
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<div style="overflow:hidden">
<p>2</p>
</div>
<p>3</p>
</section>
创建之前：
image.png
创建后的效果：
image.png
BFC不与float重叠（给没有浮动的盒子创建BFC设置 overflow: auto;） :
<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>
创建之前：
image.png
创建后的效果：
image.png
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>
创建前（不会参与计算）：
image.png
创建后（会参与计算）：
image.png
