一、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
网友评论