基本概念
盒模型的基本组成: 从里向外分别是 Content、Padding、Border、Margin.
但盒模型分为: 标准模型 和 IE模型.
标准模型(content-box)
IE模型(border-box)
#box {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 4px solid #000;
}
这是上诉两个模型部分样式代码。可以看到:
标准模型: content内容宽高不受内边距与边框影响,盒模型宽高由content+padding+border组成
IE模型: content内容宽高受边距与边框影响, 盒模型宽度即为content宽高。content内包含padding和border。
设置两种模型的方法:
由CSS3属性 box-sizing 设置。
语法:
box-sizing: content-box(标准模型)|border-box(IE模型)|inherit;
JS如何设置获取盒模型对应的宽和高:
1. dom.style.width/height
只能取到dom元素内联样式所设置的宽高。故外联和嵌套样式无法获取。
2. dom.currentStyle.width/height
获取页面渲染完成后的结果。(但只支持IE)
3. window.getComputedStyle(dom).width/height
也是获取页面渲染后结果,这个方法能获取当前元素css的最终属性值。但是该方法只能获取值,不能设置。
4. dom.getBoundingClientRect().width/height
根据元素在视窗中的绝对位置(左上角)来获取宽高的.可以获得四个元素(top,left,width,height)
5.dom.offsetWidth/offsetHeight
offsetWidth/offsetHeight获取的是盒模型的宽度/高度。
顺便想起来了这张图,收藏了许久。刚开始比较懵,一条一条看还是蛮有用的。
文章内容主要来自慕课网课程,并加上了自己的理解和收集的知识。