对CSS盒模型的认识

1盒模型的基本概念:
    浏览器引擎在渲染标签元素时,是通过计算元素的宽和高来显示布局的,把每一个标签元素当成一个盒子对待,盒子有宽有高这些属性。
     盒模型有标准模型和IE模型两种  

2标准模型和IE模型的区别
    盒模型的组成部分有margin、border、padding、content。标准模型和IE模型在计算元素的宽和高时,是不同的,请看下图
标准盒子模型
标准模型所指的宽和高是content的宽和高,不包含padding和border的宽和高
IE盒子模型
IE模型指的宽和高是border的宽和高,包含padding和border的宽和高

3CSS如何设置这两种模型
    浏览器默认渲染(
计算)模式是标准模型,即box-sizing属性的值默认是content-box,即box-sizing: content-box;
     我们可以设置为border-box来改变成IE模型的计算方式,即box-sizing: border-box;


4
JS如何获取盒模型对应的宽和高
   第一种获取方式:dom.style.width/height 只能获取dom节点的行内样式的宽和高,非
行内(内嵌,外链,导入)的获取不到width和height的值

    第二种获取方式:dom.currentStyle.width/height 通过浏览器渲染之后,拿到的是浏览器及时运行的结果,不管CSS以何种方式(行内,内嵌,外链,导入)引入的,最终的结果是浏览器引擎计算后的准确的值,缺点是只有(
万恶的)IE支持(点我查看CSS引入方式

   第三种获取方式:window.getComputedStyle(dom).width/height 支持IE、FireFox、Chrome,原理和第二种方式相似,只不过兼容性较好一些

   第四种获取方式:dom.getBoundingClientRect().width/height 该方式也是在浏览器及时
运行、计算以后拿到的准确的值,以getBoundingClientRect()方法拿到的,是当前元素基于viewport(视窗)左上角(坐标:0,0)的绝对位置,它得到四个元素值,分别是left、top、width、height,因此,通过此方法也能拿到盒模型的宽和高

5、实例题(根据盒模型解释什么叫边距重叠)

 
    例:红色背景为父元素; 蓝色背景为子元素,子元素到父元素的上边距是10px, 请计算父元素的实际高度(因为浏览器默认是标准模式,所以这里的红色背景看不到,若想显示出红色,请看下图)
     答案1:当浏览器默认在标准模式下渲染时,父元素的高度是被子元素的content+padding+border撑起来的,这里子元素未设置padding和border,因此父元素的高度,默认的实际值是100+0+0=100px,子元素上边界margin-top并未被计算在内;
   答案2:给父元素设置overflow: hidden,此时父元素的高是子元素的content+padding+border+margin是100+0+0+
10=110px,父元素设置了overflow:hidden之后,就相当于通过父元素把子元素单独隔离出一个独立的区域,此时,父元素和子元素不在同一个BFC下,不会互相影响margin,因此子元素设置的margin会被计算在内,来撑出父元素显示的高度。

     所以,以上两种答案都是对的,只是渲染模式不一样而已。


    这里再说一下兄弟元素间上下、左右 margin重叠问题,默认会取较大的数值。例如,div1的margin-bottom:5px,它下面的div2的margin-top:20px;  则div1和div2的间距是20px,不是25px,因为这里边距重叠了。左右同理。

6、BFC(边距重叠解决方案)
  1、BFC的基本概念:
一套布局规则,即Block formatting context,块级格式化上下文
   2、BFC的原理:即BFC的渲染规则
        1、
BFC元素的垂直方向,边距会发生重叠
           2、BFC的区域不会与float box重叠,可以用于清除浮动
           3、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
           4、计算BFC的高度时,浮动元素也参与计算
 
   3、如何创建BFC
        1、给父元素设置overflow:hidden、overflow:auto
        2、float:none
        3、position 的值不是static或不是relative
        4、display:设置为table,table-cell
        以上四种方法都可以创建一个BFC

  4、BFC的使用场景
       



关于CSS盒模型您还可以查看
https://blog.csdn.net/cc7756789w/article/details/50910612
关于BFC您可以查看https://www.jianshu.com/p/66632298e355