谈谈你对css盒模型的理解

一、基本概念

标准模型 和 IE盒模型

内容：border + content+ margin+padding

两种盒模型的区别

计算高度和宽度的方式不同

1.png

标准盒模型的计算方式 是content 的高度和宽度

1.png

IE盒模型的计算方式是 content+padding+border

二、css如何设置这两种模型

 box-sizing: border-box; // ```IE```盒模型
  box-sizing: content-box;  //标准盒模型

三、 js如何设置获取盒模型对应的宽和高

 
我是浮动元素
 

1.获取内联样式的宽、高.. (只能获取内联样式）

content.style.width    //500px 
content.style.height  //100px

2.内联和外联样式都能取到（只支持IE）

content.currentStyle.width / height

3. 所有的都支持

window.getComputedStyle(content).width/height

4. 计算绝对位置，能获取4个元素值 top right width height

content.getBoundingClientRect().width  /  height  / top  /right

三、盒模型边距重叠

对于行内元素 margin-top margin-bottom设置无效，margin-left margin-right有效！ 对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则

（1） 都是整数 margin值取两者的最大值

（2） 都是负数 margin值取最小值

（3）两者正负相反，margin值取两者之和

四、BFC（块级格式化上下文）解决边距重叠问题（也可以清除浮动）

原理：（渲染规则）

（1） BFC这个元素的垂直方向的边距会发生重叠。
（2）BFC的区域不会与浮动元素的box重叠
（3）BFC在页面是一个独立的容器，内外元素互补干涉
（4）计算BFC高度的时候浮动元素也会参与计算

五、怎么创建BFC

根元素：
（1） float属性不为none

（2） position为 absolute或fixed

（3） display为inline-block table-cell`````` table-caption``````flex`````` inline-flex

（4） overflow不为visible

六、应用场景

（1） 父元素和子元素的边距重叠

1.png

（2） BFC不与float重叠

1.png

2.png

 

        
        
左浮动
        
右自适应
    

（3）BFC子元素即使是浮动元素，也不影响父集元素的计算。
如果不创建BFC 父级元素的高为 0

        
        
我是浮动元素