[分享]css中影响元素大小的

CSS中影响元素大小的属性有很多，包括盒模型属性、宽度和高度属性、padding和margin属性等等。

.box {
  /* 盒模型属性 */
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid red;
}

.box2 {
  /* 宽度和高度属性 */
  width: calc(100% - 40px);
  height: 50vh;
}

.box3 {
  /* padding和margin属性 */
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 10px;
} 

盒模型属性会影响元素的实际宽度和高度值，包括padding、border和margin在内。

宽度和高度属性会直接影响元素的大小，可以使用calc()来计算类似百分比减去固定像素值的大小。

padding和margin属性也会影响元素的大小，将元素的padding值和margin值算入宽度和高度当中。

在CSS中，了解这些影响元素大小的属性是非常重要的，可以帮助我们更好地布局和排版网页。