132-css-11-布局~盒模型
盒模型
CSS 盒模型实质上是一个包围每个 HTML 元素的框。展示在页面上的每一个元素都可以视为一个盒模型。
盒模型包括：
-
外边距 → margin（可以为负值）
-
边框 → border
-
内边距 → padding（不允许负值）
-
实际的内容 → content
- 无论是div、span、还是a都是盒子。
- 图片、表单元素一律看作是文本，它们并不是盒子，因为一张图片里面并不能放东西，它自己就是自己的内容。
宽度计算：
offsetWidth = 内容 + 内边距（padding） + 边框（border）
分类：
- 标准模型width不计算padding和border；
- ie模型width计算padding 和border；
（标准盒模型 box-sizing: content-box）offsetWidth = width + padding + border
（怪异盒模型 box-sizing: border-box）offsetWidth = width
box-sizing
box-sizing: content-box|border-box|inherit;
- content-box
- 默认值，设置为W3C标准盒模型
- border-box
- 设置为IE盒模型
- inherit
- 继承父级盒子类型
JS如何设置/获取盒模型对应的宽和高？
offsetWidth、offsetHeight
.box {}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.offsetWidth;
let height = targetDom.offsetHeight;
console.log('width',width)
console.log('height',height)
参考：