3-4 CSS盒模型

题目:谈谈你对CSS 盒模型的认识

• 基本概念 标准模型+IE模型
• 标准模型和IE模型的区别
• CSS 如何设置这两种模型
• JS如何设置获取盒模型对应的宽和高
• 实例题(根据盒模型解释边距重叠)
• BFC(边距重叠解决方案)

---

1.标准模型和IE模型的区别

• 在于宽和高的计算方式不同,标准模型的宽高是指内容宽度和高度,不包含padding和border;IE模型的宽高是计算padding和border的

2.CSS 如何设置这两种模型

• 其实很简单,就用box-sizing这个属性,用box-sizing:content-box,box-sizing:border-box 来区分这两种模型,第一种是指标准模型,第二种很显然是指IE模型

3.JS如何设置获取盒模型对应的宽和高

• 1:dom的style属性获取dom.style.width/height ;注意:这种方式只能取内联样式的宽高

  2:dom.currentStyle.width/heght,得到的是及时运行的一个结果(浏览器最终渲染的结果),三种设置的css的方式都可以获取;注意这种方式只有IE支持

  3:window.getComputedStyle(dom).width/height,这种方式兼容fx和chrome,通用性最好

  4:dom.getBoundingClientReact().width/height,也能拿到元素真实的宽高,这个方法经常使用的场景是计算一个元素的绝对位置

4.实例题(根据盒模型解释边距重叠)

• 父子元素边距重叠

3-4 CSS盒模型（一）.mp4_20171116_135220.277 - 副本_看图王.jpg

问题:这个父元素的高度是多少?当然答案很简单高度是100px;但是当在父元素添加一条属性overflow:hidden后高度就会变成110px;

原因:加了overflow:hidden ,相当于加了一个bfc(块级格式化上下文),下面第五条将会讲解BFC

• 兄弟元素边距重叠

元素重叠后边距大小的计算遵循这样一条原则,重叠的原则是取重叠部分最大值;

还有一种是空元素重叠,比如他有margin-top和margin-bottom,也是取最大的那个值

5. BFC (边距重叠解决方案)

   • 基本概念: 块级格式化上下文

   • bfc的原理(也就是bfc的渲染规则):

     1: 在bfc元素内的子元素上垂直方向的边距会发生重叠(按边距重叠的原则取最大值);

     • 如果不想让他们重叠的解决办法:在子元素外再套一个bfc元素

     2: bfc元素的区域不会与浮动元素的box重叠,这个特性是用来清除浮动和布局来用的

     • 比如左侧有个浮动的div元素,右边也有个div,它的高度比左侧高,这时候右侧的内容会侵入到左侧,解决的办法就睡在右侧元素上创建一个bfc

     3: bfc 在页面上是一个独立的容器,外面的元素不会影响里面的元素,反过来里面的元素也不会影响外面的元素

     4: 计算bfc 高度的时候浮动元素也会参与计算;详细说法就是,bfc的子元素即使设置为浮动的时候,bfc元素也会参与高度计算

     • 在父元素内如果子元素设置为浮动,父元素是没有高度的,当我们把父元素设置为bfc的时候,父元素的高度是参与计算的

   • 如何创建bfc?

     1:浮动元素不为none

     2:position不为static或者relative

     3:display设为inline-block或者table

     4:overflow不为visiblity,其他的都可以

   • bfc的使用场景

     清除浮动

     ​