Javascript 宽度

1. CSS 盒子模型

参考: 菜鸟教程,www.runoob.com/css/css-box…

• 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
• 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
• 下面的图片说明了盒子模型(Box Model)：

2. dom 节点的宽度和高度

• 盒子的宽度 = Content宽度 + 左右Padding值 + 左右Border值 + 左右margin值
• 盒子的高度 = Content高度 + 上下Padding值 + 上下Border值 + 上下margin值

3. 两种盒子模型

根据css属性的width和height计算方式不同，分两种盒子模型

• 标准盒子模型
  • width = Content宽度
  • height = Content高度
• IE盒子模型
  • width = Content宽度 + 左右Padding值 + 左右Border值
  • height = Content高度 + 上下Padding值 + 上下Border值

4. 计算宽度和高度

标准盒子模型

.fWrap {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 1px solid #000;
    margin: 20px;
    background-color: #895;
}
复制代码

box-sizing: border-box 效果：

.fWrap {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 1px solid #000;
    margin: 20px;
    background-color: #895;
    box-sizing: border-box;
}
复制代码

box-sizing可以改变盒子模型，

• box-sizing：content-box 标准盒子模型
• box-sizing: border-box IE盒子模型

5. JS 位置

5.1 clientWidth

标准盒子模型，IE盒子模型：

• clientWidth = Content宽度 + 左右Padding值
• clientHeigh = Content高度 + 上下Padding值
• clientTop：元素上边框的厚度，当没有指定边框厚底时，一般为0
• clientLeft：border-left

5.2 offsetWidth

标准盒子模型，IE盒子模型：

• offsetWidth = Content宽度 + 左右Padding值 + 左右Border值 = clientWidth + 左右Border值
• offsetHeith = Content高度 + 上下Padding值 + 上下Border值 = clientHeight + 上下Border值
• offsetTop：当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离
• offsetLeft: 当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

5.3 scrollWidth

标准盒子模型，IE盒子模型：

• scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）
• scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
• scrollTop：内容层顶部 到 可视区域顶部的距离