css盒模型
题目:谈谈你对css盒模型的认识
1、基本概念:标准模型+ie模型
2、标准模型和IE模型的区别
3、css如何设置这两种模型
4、js如何设置获取盒模型对应的宽和高
5、实例题 (根据盒模型解释边距重叠)
6、bfc (边距重叠解决方案)
一、基本概念和区别
![](https://img2018.cnblogs.com/blog/331769/201812/331769-20181217064349017-1479382528.png)
如图,看到宽度和高度,他所指的内容,标准模型和ie模型的区别就是,宽度,高度的计算方式不同,标准模型的宽度指的就是content的宽度,不包括padding和border,而ie模型是计算padding和border的。
二、css如何设置这两种模型
box-sizing:content-box;(浏览器默认的方式)
box-sizing:border-box;
三、js如何设置获取盒模型的宽和高
dom.style.width/height
这个宽和高是否就能够取到所有盒模型的宽和高呢,显然不是,这种方式能取到的是盒模型的内联属性(css的三种方式:内嵌,<style> <link>),这种方式只能拿到第一种,这是它的局限性
dom.currentStyle.width/height
这个是拿到浏览器即时运行后的结果,也就是说不管通过内嵌,style,link设置的宽高,这个最终拿到的是渲染以后的宽和高,这个是相对来说比较准确的,但是有一个缺点,这个属性只有ie支持(这是致命的缺点)
window.getComputedStyle(dom).width/height
这个是兼容firefox和chrome的,所以2和3的区别,下面的通用性好一些,原理都是相似的
dom.getBoundingClientRect().width/height
这个也能拿到元素的真实宽高,那么这个元素的作用是什么呢,就是计算元素的绝对位子,所以这个拿到的是4个元素,top,left,width,height,所以这个也能拿到
四、实例题
![](https://img2018.cnblogs.com/blog/331769/201812/331769-20181217065706998-252681064.png)
如图,问父元素的高度是100还是110,理论上都可以,最终取决于它的盒模型是怎么样的
<!--box.html--> <body> <section id="sec"> <style> #sec{ background: red; } .child{ height: 100px; margin-top: 10px; background: yellow } </style> <article class="child"></article> </section> </body>
![](https://img2018.cnblogs.com/blog/331769/201812/331769-20181217065720931-1453737944.png)
此时的盒模型的高度是100,如果把#sec样式加一个overflow,发现盒模型的高度变成了110
![](https://img2018.cnblogs.com/blog/331769/201812/331769-20181217065729668-381759260.png)
为什么呢?现在的这个情况是父子元素边距重叠,取最大值的原则,这里通过对父元素加一个hidden,也就相当于给父元素创建了一个bfc,也就是块级格式化上下文,那么什么是bfc呢
五、BFC(边距重叠解决方案)
1、BFC的基本概念:块级格式化上下文
2、BFC的原理(说白了就是BFC的渲染规则):
这个规则是什么呢?我觉得大家能说出4点就够了
第一个就是BFC这个元素的垂直的边距会发生重叠
第二个是BFC的区域不会与浮动元素的box重叠,这个肯定是用来清除浮动的。
第三个, BFC在页面上是一个独立的容器,外面的元素不会影响它里面的元素,反过来,里面的元素也不会影响到外面到元素。
第四个就是计算BFC高度的时候,浮动元素也会参与计算
3、怎么创建BFC
刚才给父元素加了一个 overflow:hidden就创建了一个BFC,那么除了overflow:hidden,还有哪些写法能创建BFC呢?
第一个是float的值不为none,因为css的float值默认是none,只要设置了浮动就创建了BFC
第二个是position的值不是static或者relative,也就是创建了一个bfc,比如设置成absolute,fixed
第三个是display属性是inline-box或者table-cell,跟table相关的这几个,就创建了BFC
第四个是overflow,overflow为auto,hidden,都可以创建BFC
4、BFC的使用场景有哪些?
下一章