CSS 盒子模型（Box Model）-----js获取容器的宽高位置尺寸

盒模型

• 什么是盒模型
  在网页中，一个元素占有空间的大小由content、padding、border、margin这四个部分组成。这4个部分一起构成了css中元素的盒模型。

• 盒模型的组成：
  由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。

• 盒模型有两种标准：
  一种是标准盒子模型（W3C盒子模型），
  盒子模型的总宽度（或者高度）= 样式中所设置的width( height ) + padding + border + margin

  注意：这里的 样式中所设置的width/height = content宽度(高度)，即样式中所设置的width/height的值，也就是box-sizing：content-box 所规定的容器大小

  另一种是IE盒子模型（怪异盒子模型），
  盒子模型的总宽度（或者高度）= 样式中所设置的width( height ) + margin

  注意：width/height = content + padding + border，即样式中所设置的width/height的值
  也就是box-sizing：border-box所规定的容器大小

• 两种盒模型的区别：
  在标准盒模型中，样式中所设置的宽/高 = content的宽/高
  在怪异盒模型中，样式中所设置的宽/高 = content的宽/高 + padding + border;

  不论哪种模型，其盒模型的宽/高 = content + padding + border + margin;

<style>
.box__wrap {
    width: 200px;
    height: 100px;
    padding: 20px;
    border:1px solid red;
   // box-sizing:content-box;   // 标准盒模型
   // box-sizing:border-box;   // 怪异盒模型
}
</style>

<div class="box__wrap">盒模型</div>

在标准盒模型中，样式中设置的width/height = content的宽/高, 即容器宽242px;
在怪异盒模型中，样式中设置的width/height = content的宽/高 + padding + border;即容器的宽240px;

• box-sizing：border-box / content-box / inherit
  我们可以通过CSS属性 box-sizing 来对这两种标准进行切换，
  当值为 content-box 时为标准盒子模型，
  值为 border-box 时为IE盒子模型。
• 盒模型的作用：当对一个文档进行布局的时候，浏览器的渲染引擎会根据盒模型标准将所有元素表示为一个个矩形的盒子。

js如何设置获取盒模型对应的宽和高

1、获取内联样式

  dom.style.width/height

2、 获取渲染后的样式（兼容firefox，chrome）------- getComputedStyle(dom)

 window.getComputedStyle(dom).width/height

3、获取渲染后的位置以及宽高 ------ dom.getBoundingClientRect( )

 dom.getBoundingClientRect().width/height

①getBoundingClientRect用于获取某个元素相对于视窗的位置集合。getBoundingClientRect()能得到top/right/bottom/left/width/height，
②bounding:范围,rect:矩形。
③淘宝自适应js里用的就是这个方法

版权声明：本文为CSDN博主「瓜冬瓜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42561383/article/details/90609465

版权声明：本文为CSDN博主「aSuncat」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/aSuncat/article/details/88789368