css盒模型

css盒模型包括标准模型和IE模型

盒模型包括：content、padding、border、margin这些属性

标准模型的宽高指的是content的宽高

IE模型的宽高是指content、padding、border加起来的宽高

设置这两种模型的css属性：box-sizing: content-box（标准模型，浏览器默认），box-sizing: border-box（IE模型）

 

获取元素的宽高：

1、document.getElementById('id').style.width/height（只能获取内联样式的宽高，通过link或者head里面的style设置的宽高是获取不到的 )

2、document.getElementById('id').currentStyle.width/height（只有IE支持）

3、window.getComputedStyle(document.getElementsByClassName('left')[0]).width（通用性更好）

3、document.getElementsByClassName('left')[0].getBoundingClientRect().width（获取元素距离视窗的距离）

 

BFC全称为Block Formatting Context，即块级格式化上下文

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。注意水平边界是不会重合的。

解决边距重叠问题，创建BFC的方法如下：

• 浮动（float的值不为none）；
• 绝对定位元素（position的值为absolute或fixed）；
• 行内块（display为inline-block）
• 表格单元（display为table、table-cell、table-caption等HTML表格相关属性）；
• 弹性盒（display为flex或inline-flex）；
• overflow不为visible；

具体详情请看https://segmentfault.com/a/1190000012265930