1标准模型和IE模型的基本概念和区别
2 CSS如何设置这两种模型
3 JS如何设置获取盒模型对应的宽和高
4 根据盒模型解释边距重叠和解决方案BFC
1 标准模型和IE模型的区别在于内容宽高是否包括padding和border。
标准盒模型:
一个元素的宽度=content
盒子的总宽度=margin+border+padding+width
IE怪异盒模型:
一个元素的宽度=content+padding+border
盒子的总宽度=margin+width
2
3 通过JS获取盒模型对应的宽和高,有以下几种方法:
为了方便书写,用dom来表示获取的HTML的节点。
b.dom.currentStyle.width/height这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。但这种方式只有IE浏览器支持。
c.window.getComputedStyle(dom).width/height这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。
d.dom.getBoundingClientRect().width/height这种方式是根据元素在视窗中的绝对位置来获取宽高的。
e.dom.offsetWidth/offsetHeight最常用的,也是兼容最好的。
4 边距重叠规则:一大一小取最大,一正一负取和
以下方式会创建块级格式化上下文:
BFC应用例子:
领取专属 10元无门槛券
私享最新 技术干货