css盒模型

css盒模型

一、基本概念：

　　标准模型+IE模型

二、标准模型和IE模型的区别

　　计算宽度和高度的不同
　　标准模型宽高只包含内容，不包含padding和border width=content
　　IE模型宽高包含padding和border width=conten+padding+border

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

　　标准模型：box-sizing: content-box 浏览器默认
　　IE模型: box-sizing: border-box

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

　　dom.style.width/height(只能取内联样式的)
　　dom.currentStyle.width/height(只有IE支持)
　　window.getComputedStyle(dom).width/height
　　dom.getBoundingClientRect().width/height (ie9及以上支持)
　　兼容写法：width = dom.getBoundingClientRect().right - left
　　　　　　　height = dom.getBoundingClientRect().bottom - top

五、根据盒模型解释边距重叠

六、BFC（边距重叠解决方案）

　　BFC基本概念版：块级格式化上下文-解决边距重叠
　　原理-渲染规则：
　　　　1.BFC元素垂直方向边距会发生重叠
　　　　2.BFC的区域不会与浮动元素重叠-清除浮动
　　　　3.BFC在页面上是一个容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素
　　　　4.计算BFC高度时，浮动元素也会参与计算

　　如何创建BFC：
　　　　1.float值不为none
　　　　2.position值不为static和relative
　　　　3.display值为inline-box或者table相关的值
　　　　4.overflow值不为visible
　　BFC使用场景：
　　　　1.处理垂直方向边距重叠
　　　　2.不与浮动元素重叠
　　　　3.清除浮动
　　　　　　1、给父级元素设置BFC
　　　　　　2、浮动元素后加空元素设置clear：both
　　　　　　3、父级元素设置伪类after {content: "";display:block;clear:both;}