标准模型 + IE模型
- 标准模型宽高为content的宽高
box-sizing: content-box;
- IE模型宽高是 content + border + padding 的宽高
box-sizing: border-box;
js如何设置和获取元素宽高
dom.style.width/height // 只能获取内联样式的宽和高
dom.currentStyle.width/height // 能够拿到最后的样式,但只有ie支持
window.getComputedStyle(dom).width/height // 能兼容
dom.getBoundingClientRect().width/height
BFC (解决边距重叠问题)
基本概念:块级格式化上下文
原理:
- bfc垂直方向上边距会发生重叠
- bfc区域不会与浮动元素的box重叠
- bfc是一个独立容器,内外不会相互影响
- 计算bfc高度时,浮动元素也会参与计算
如何创建bfc:
- float不为none
- position不是static或者relative
- display设置table相关,table-cell,table-caption,or inline-block任何一个
- overflow不为visible
文章评论