div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

若想使用 padding 和 margin 来调整及美化 div 内容的布局和样式，但是又不想让 div 的宽度超出父元素，就需要采取一些方法避免这个问题。以下是两个解决方法的示例。

方法一：使用calc()

使用 calc() 允许您执行基本的算术运算来设置 div 的宽度。例如：

div {
  box-sizing: border-box; /* 将边框和内边距包含在盒子的总宽度中 */ 
  width: calc(100% - 20px); /* 计算方式为父元素的百分之百减去20像素 */
  padding: 10px; /* 等量的padding */
  margin: 0; /* 例给出的父级没有margin */
  background-color: yellow; /* 测试用 */
}

方法二：使用flex布局

由于使用 box-sizing 和 calc() 技术较为复杂，所以还可以通过flex技术来解决问题。例如：

.parent {
  display: flex; /* 父级添加flex布局 */
}

.child {
  flex: 1; /* 子级占据空间的比例，可以根据实际情况设置 */
  padding: 10px; /* 等量的padding */
  margin: 0; /* 例子中的父级没有margin */
  background-color: yellow; /* 测试用 */
}

鉴于以上两种解决方法都是应用广泛的技术，可以选择任何一种来避免 div 宽度超出父级的问题。同时，根据具体情况调整布局样式以达到最佳效果！