摘要：中的盒模型传统盒模型在传统盒子模型中我们说的宽度和高度是指该块元素内容的宽度和高度。在这个基础上我们在修改或者块元素的宽度讲不会发生变化。
CSS中的盒模型
传统盒模型
在传统盒子模型中我们说的宽度和高度是指该块元素内容的宽度和高度。
而一个块元素的宽度是
width === width+padding(left/right)+border(left/right);
相应的一个块元素的高度是
height === height+padding(top/bottom)+border(top/bottom);
CSS3中的盒模型
在css3中新增加了盒子模型
.box{
border-sizing: border-box;
}
此时块元素的的width和height仅仅是这个块元素的宽度和高度。它包含了这个块元素的padding和border。在这个基础上我们在修改padding或者border块元素的宽度讲不会发生变化。改变的是内容的宽高。
JS中也提供了一些属性和方法用来描述当前元素的样式,主要有以下几种：
备注：通过JS盒子模型属性获取的结果是不带单位的。而且只能是整数（它会自动四舍五入，进行计算）
clientWidth/clientHeight
clientWidth/clientHeight：当前盒子可视区域的宽度和高度
可视区域是指：内容的宽高+padding
clientWidth = width + padding(left + right); clientHeight = height + padding(top + bottom);
可视区域和内容是否溢出以及我们是否设置了overflow：hidden没有关系
在我们的项目中，我经常这样使用这两个属性
//获取当前页面一屏幕的宽度 W = document.documentElement.clientWidth||document.body.clientWidth; //获取当前页面一屏幕的高度 H = document.documentElement.clientHeight||document.body.clientHeight;
利用这个就可以实现让一个盒子水平和垂直居中。
即实现相对定位，计算出来left和top就可以实现
//width和height是盒子的宽高 left = (W-width)/2; top = (H-height)/2;
clientLeft/clientTop
clientLeft:盒子左边框的宽度。
clientTop:盒子上边框的高度。
它俩获取的结果其实就是border-width。
JS中只有clientLeft和clientTop，没有clientRight和clientBottom这两个属性。
offsetWidth/offsetHeight
offsetWidth/offsetHeight就是在clientWidth和clientHeight的基础上加上盒子的边框。
即：
offsetWidth === clientWidth + border(left/right); offsetHeight === clientHeight + border(top/bottom)
和内容是否溢出没有关系。
在我们的项目中，如果想获取一个盒子的宽度和高度，我们一般用offsetWidth（而不是clientWidth）和offsetHeight，因为border也算是当前盒子的一部分。
scrollWwidth/scrollHeight
1) 没有内容溢出情况下：
获取的结果和clientWidth/clientHeight是一样的
2) 有内容溢出的情况下:
真实内容的宽度和高度（包含溢出的内容），在加上左边的padding 和上边的padding 值。
//有横向滚动条时，获取当前页面的真实宽度
document.documentElement.scrollWidth||document.body.scrollWidth;
//有纵向滚动条时，获取当前页面的真实高度
document.documentElement.scrollHeight||document.body.scrollHeight;
window.getComputedStyle/currentStyle
在JS中获取元素具体的样式值：例如获取某个元素的paddingLeft值。
方法一：
currentElement.style.XXX
例如：
box.style.paddingLeft
注意这个方法是获取当前元素的行内样式。只能获取当前元素的行内样式，内嵌或者外联样式是不能获取的。
方法二：
通过 window.getComputedStyle/currentStyle可以获取所有经过浏览器计算过的样式。
或者当前元素的paddingLeft值，使用例子：
window.getComputedStyle(box, null).paddingLeft //或者下面这个方法，box是当前元素，第二个参数是当前元素的伪类，一般为 window.getComputedStyle(box, null)["paddingLeft"]
window.getComputedStyle在IE6~8中不兼容。不兼容的原因是因为在IE6~8下，window对象没有getComputedStyle属性发放导致的。所以在IE6~8中我们使用currentStyle属性。备注currentStyle只有IE中才有，其他浏览器中都没有这个属性。使用方法例子：
box.currentStyle["paddingLeft"]; //或者 box.currentStyle.paddingLeft
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101281.html
摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章，然而笔者在读的时...
阅读 3538·2021-10-14 09:43
阅读 3170·2021-08-25 09:38
阅读 425·2019-08-30 15:55
阅读 1204·2019-08-30 13:05
阅读 2124·2019-08-29 16:05
阅读 383·2019-08-29 12:58
阅读 2688·2019-08-29 12:34
阅读 3131·2019-08-26 12:15
