css盒子模型的基本概念:标准模型+ie模型
标准模型的宽高是content的宽高,不包括padding和border。
ie模型的宽高是包括padding和border的
css是如何设置这两种模型的
box-sizing:content-box (标准)
box-sizing:border-box(ie)
js如何获得盒子模型对应的宽高
dom.style.width/height 只能取到内联的css样式设置的宽高
dom.currenStyle.width/height 可以取到所有样式设置的宽高,但只有ie支持
window.getComputedStyle(dom).width/height 谷歌浏览器
dom.getBoundingClientRect().width/height 计算元素的绝对位置,获得leift、right、top、bottom4个值
边距重叠
兄弟盒子直接外边距取最大的值
空元素盒子的边距取该元素最大的值,比如上边距30px,下边距20px,取30px;
父子元素用bfc解决
BFC边距重叠解决方案
基本概念:块级格式化上下文
原理(渲染规则):
1、bfc元素上学边距会发生重叠
2、bfc元素区域不会与浮动元素发生重叠(用于清除浮动)
3、bfc元素是一个独立元素,外面的元素不会影响里面的元素
4、计算bfc元素高度的时候,浮动元素也会参与计算
如何创建bfc
float值不为none,只要浮动了,就创建了一个bfc元素
position的值为fix和absolute
dispaly设置为table相关属性
overflow为hidden和auto