CSS知识点汇聚

收集CSS知识点，减少踩坑，日常更新。

box-sizing

在CSS盒模型中，是否将元素的border或者padding的宽度和高度计算在元素的width和height内。默认情况下，元素的border或者padding是不计算在元素的width和height内，也就是说元素显示内容的区域就是我们所设置的width和height

两种属性值

• context-box: 默认值，保持我们所设置的内容区域大小
• border-box: 保持元素的宽度大小，如果元素有border或者padding，就会压缩我们所设置的内容区域大小

计算公式

.context-box {
  box-sizing: context-box;
}

.border-box {
  box-sizing: border-box;
}

.element {
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 20px;
}

• element元素在context-box内能够显示的内容大小为100px*100px
• element元素在border-box内能够显示的内容大小为（100px-10px*2-20px*2)*（100px-10px*2-20px*2)

demo结果