css盒子模型标准

在CSS中，每个元素都被视为一个矩形盒子。CSS盒子模型用于描述这些矩形盒子的布局属性。

box-sizing: content-box;
/* "width"和"height"属性只包括内容，不包括padding和border */
box-sizing: border-box;
/* "width"和"height"属性包括内容、padding和border */
 

盒子模型分为两种：标准盒子模型和IE盒子模型。标准盒子模型中盒子的宽度为内容的宽度，加上padding和border；而IE盒子模型中盒子的宽度包含了padding和border，不仅仅是内容宽度。

/* 标准盒子模型 */
div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* div实际宽度为(200+20*2+5*2)=250px */
/* IE盒子模型 */
div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}
/* div实际宽度为200px */
 

除去宽度、高度、内边距和边框，盒子模型还包括外边距(margin)。外边距表示各个盒子之间的空隙。在设置外边距时，可能会出现margin重叠的情况。

/* margin重叠 */
div {
  margin-top: 20px;
  margin-bottom: 30px;
}
p {
  margin-top: 50px;
}
/* p元素的上外边距会与div元素的下外边距重叠 */
 

为了避免margin重叠的问题，常见的解决方案是使用padding代替。

/* 使用padding替代margin */
div {
  padding-top: 20px;
  padding-bottom: 30px;
}
p {
  margin-top: 50px;
}
/* p元素的上外边距不再会与div元素的下外边距重叠 */
 

总之，CSS盒子模型有助于我们理解和控制HTML元素的布局和样式，开发者可以根据需要灵活选择标准盒子模型或IE盒子模型，并使用padding代替margin以避免重叠问题。