一、什么是CSS盒模型？
盒模型是初学CSS必须要掌握的一个点，涉及到页面的整体布局。常说的CSS盒模型分为W3C标准盒模型和IE盒模型。下面上一张图直观的看二者区别：
标准盒模型和IE盒模型
很明显IE盒模型的width和height包含了padding和border，而标准盒模型没有包含。
那么二者怎么转化呢？
box-sizing: content-box: 指的是W3C标准盒模型，也是默认的设置属性。
box-sizing: border-box：指的是IE盒模型，width和height包含了padding和border。
二、JS如何获取盒模型对应的宽和高？
- dom.style.width/height：对节点样式可读可写，但只能读或写内嵌的CSS样式对于在<style>或外联样式不能读写。
- dom.currentStyle.width/height：拿到的是渲染之后的宽和高，比较真实，但支持IE浏览器
- window.getComputedStyle(dom).width/height：方法是只读的，只能获取样式，不能设置。
-
dom.getBoundingClientRect().width/height：
getBoundingClientRect()方法得到8个值，除了 width 和 height 外的属性x、y、left、top、right和bottom都是相对于视口(viewport)的左上角位置而言的。如下：
<style media="screen">
#box {
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="box"></div>
<script>
var box = document.getElementById('box');
console.log(box.getBoundingClientRect());
// x: 8, y: 8, width: 100, height: 100, top: 8, left 8, bottom: 108, right: 108
</script>
三、BFC
1、什么是BFC？
BFC(Block Formatting Context)：块级格式化上下文。是一种边距重叠解决方案。
2、BFC的原理
- (1) 在BFC元素的垂直方向的边距会发生重叠。
- (2) BFC的区域不会与浮动元素Box重叠。
- (3) BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素也不会影响外面的元素。(张鑫旭在他的博客中称BFC是CSS世界的结界，就是这个意思。)
- (4) 计算BFC高度的时候，浮动元素也会参与计算。
3、如何创建BFC？
- (1) <html> 根元素
- (1) float值不为none，即只要设置了float值就创建了一个BFC。
- (2) position的值只要不是static或relative，就创建了一个BFC。
- (3) display值为inline-block或table-cell或table-caption等，就创建了一个BFC。
- (4) overflow值不为visible，即为auto或者hidden时，就创建了一个BFC。
4、BFC的使用场景
- (1) BFC垂直方向边距重叠问题
<style>
#margin {
background: #1890FF;
overflow: hidden;
}
#margin p {
margin: 15px auto 25px;
background: yellowgreen;
}
</style>
<section id="margin">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</section>
边距重叠
1，2，3，4的上边距应该都是15px，下边距都是25px，很明显，1和2，2和3，3和4之间的边距发生了重叠，重叠的原则就是取较大值，即1和2之间的距离是25px。
给某个子元素添加一个父元素，然后给这个父元素添加一个BFC，可以解决该子元素的边距重叠问题，如下，给2添加一个父级div，然后给定样式overflow: hidden。
<style>
#margin {
background: #1890FF;
overflow: hidden;
}
#margin p {
margin: 15px auto 25px;
background: yellowgreen;
}
</style>
<section id="margin">
<p>1</p>
<div style="overflow: hidden">
<p>2</p>
</div>
<p>3</p>
<p>4</p>
</section>
消除边距重叠
1和2，2和3之间就没有边距重叠现象了，边距都变成15+25=40px了，而不是之前取较大值的25px。
- (2) BFC不与float重叠
<style>
#layout {
background: blue;
}
.left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
.right {
height: 150px;
background: yellowgreen;
}
</style>
<section id="layout">
<div class="left">1</div>
<div class="right">2</div>
</section>
与float元素重叠
图中可以看到1与2因为高度不同，发生了部分重叠，背景蓝色完全被遮挡。
可以给右侧div设定overflow: hidden;来创建一个BFC元素，消除重叠，如下：
<style>
#layout {
background: blue;
}
.left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
.right {
height: 150px;
background: yellowgreen;
overflow: hidden;
}
</style>
<section id="layout">
<div class="left">1</div>
<div class="right">2</div>
</section>
BFC不与float重叠
1和2的重叠消除了，背景蓝色显示出来。
- (3) BFC子元素即使是float元素，也会参与高度计算
<style>
#float {
background: blue;
}
.float {
float: left;
color: yellowgreen;
}
</style>
<section id="float">
<div class="float">这是一个浮动元素</div>
</section>
子元素为浮动元素,不参与父元素高度计算
子元素为浮动元素时候，父级元素颜色未显示，高度为0，子元素不参与父级元素高度的计算。
当把父级元素设为BFC时候，子元素也会参与到父级元素的高的计算中来，如下：
<style>
#float {
background: blue;
overflow: hidden;
}
.float {
float: left;
font-size: 35px;
color:yellowgreen;
}
</style>
<section id="float">
<div class="float">这是一个浮动元素</div>
</section>
BFC子元素即使是float元素，也会参与高度计算
给父级元素添加overflow: hidden;或float: left创建一个BFC之后，父级元素背景颜色出现，且子元素的高度参与了父级元素高度的计算。
网友评论