3-2 CSS盒模型
2017-10-15 本文已影响15人
zhangmz
1、标准模型
2、IE模型
3、CSS如何设置这两个模型
box-sizing:content-box; //浏览器默认
box-sizing:border-box
4、JS如何获取盒模型对应的宽和高
dom.style.width/height //只能取到内联样式
dom.currentStyle.width/height //只有IE支持
window.getComputedStyle(dom).width/heigth //通用性更好
dom.getBoundingClientRect().width/heigth //计算一个元素的绝对位置，根据视窗（左上角）绝对位置，拿到4个元素（top、right、bottom，left）
5、实例题
子元素高度为100px，上边距为10px，计算父元素的高度
6、BFC（边距重叠解决方案）
（1）BFC基本概念
- 块级格式化上下文
（2）BFC原理（BFC渲染规则）
- 在BFC这个元素的垂直方向的边距会发生重叠
- BFC区域不会与浮动元素的边距重叠，常用于清除浮动和布局
- BFC在页面上是一个独立的容器，外边的元素不会影响里面的元素，反之亦然
- 计算BFC高度的时候，浮动元素也会参与运算
（3）怎么样创建BFC
- float不为none
- position值不是static或者relative
- display为inline-block 或table相关的display
- overflow不为visible，等于auto、hidden
（4） 使用场景
