zf-fe

✍️ Tangxt

⏳ 2020-06-27

🏷️ DOM 操作

29-DOM操作-复习CSS中盒子模型属性

了解一下：

哪一个属性获得的是元素的哪一部分样式信息 -> 这些盒子模型属性都代表什么？

这些属性和方法，在jQuery里边都有封装到！

let box = document.getElementById('box');

// 内容宽度+左右padding
box.clientWidth
// 内容高度+上下padding
box.clientHeight

要了解这俩属性，先来看看CSS的盒子模型！

盒子模型

盒子的宽度 = width + 左右padding + 左右border

如果左右padding为0，左右border也为0，那么width值就可以看成是盒子的宽度啦！

需求：

搞个300*300的盒子出来

这样写？

.box {
  width: 300px;
  height: 300px;
  padding: 10px;  
  border: 2px solid yellow;
  margin: 10px;
}

可以看到，盒子的实际大小是：324*324，而我们要的是300*300，所以我们改一下盒子的width和height值：

.box {
  width: 276px;
  height: 276px;
}

假如有一天设计稿变了，觉得这padding太大了，于是，修改该盒子的padding为5px

这样一来，盒子大小又变了，为了保证盒子是300*300的大小，于是我们又修改了盒子的width和height值……

同理，border如果有一天变化了也是如此，当然，你也可以通过修改padding值，来维持300*300的大小！

所以，CSS3里边就给我们提供了新的盒子模型属性！即border-box

题外话：

盒子3D模型

我们设置box-sizing的值为border-box

那么我们写的width和height值不再是content的宽高，而是盒子的最后大小

如这样：

.box {
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  padding: 10px;  
  border: 2px solid yellow;
  margin: 10px;
}

那么这个盒子始终会保持 300*300 的大小，无论你如何修改padding 或 border 的值，content都会自动跟着收缩，让盒子大小始终保持不变！

我们一般在写CSS的时候，都会让盒子变为 border-box 这种模型，因为这方便我们写完width和height之后，就不用再因为padding 、border的变化而手动计算宽高了！