Css盒模型以及BFC

版权声明：欢迎转载，转载请注明来源，谢谢！ https://blog.csdn.net/a8725585/article/details/80823083

##Css盒模型

css中所有html元素都可以看成为一个盒子，一个盒模型包括margin、border、padding、content
###分类

• 标准模型-width与height按照content宽高计算
  
• IE模型-width与height按照content+padding+border计算
  
  ###两种模型设置方法（Css3）

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

###js获取宽高

/*标签属性中的*/
dom.style.width/height
/*计算后的*/
/*标签style中(内联)+内嵌中的+外部的*/
dom.currentStyle.width/height // (仅IE支持)
window.getComputedStyle(dom).width/height(全兼容)
dom.getBoundingClientRect().width/height

---

##BFC(块级格式化上下文)
###边距重叠

父子元素，子元素margin，父元素高度和子元素一样
###Bfc原理(规则)

• 属于同一个BFC的两个相邻Box的margin会发生重叠
• BFC的区域不会与float box重叠
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
• 计算BFC的高度时，浮动元素也参与计算

###创建bfc方法

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

###bfc的使应用

• 自适应两栏布局
• 清除浮动（高度塌陷）或者使用伪元素before after 中clear:both
• 防止垂直margin重叠