CSS盒模型

一、CSS盒模型

    标准模型

    IE模型

    使用CSS3的box-sizing属性设置何种模型

    box-sizing: content-box;    //标准模型

    box-sizing: border-box;    //IE模型

二、JS获取盒模型对应的宽和高

element.style.width/height;    //只能取得内联样式的宽高值

element.currentStyle.width/height;    //只有IE支持

window.getComputedStyle(element).width/height;    //兼容性更好

element.getBoundingClientRect().width/height    //getBoundingClientRect()用于计算元素的绝对位置，得到top、left、width、height 四个元素

三、BFC

块级元素格式化上下文，边距重叠解决方案

四、BFC原理——BFC渲染规则

1. BFC元素垂直方向边距重叠

2. BFC区域不会与浮动元素BOX重叠

3. BFC在页面上是一个独立的容器

4. 计算BFC高度时，浮动元素也参与计算

五、创建BFC

float值不为none

position值不为static、relative

display值为inline、table

overflow值不为visible