.con{
   width:100%;
}

div.con 下面有 两个 div.a 和 div.b 

需求：

实现 .b 宽度 120px; .a 宽度为 .con 实际宽度 - .b 宽度

解决方案：

.con {
  width: 100%;
  display: flex; /* 使用 flex 布局，方便子元素宽度分配 */
  box-sizing: border-box; /* 使元素的宽度包含边框和内边距 */
}

.b {
  width: 120px;
}

.a {
  flex-grow: 1; /* 让.a 元素占据剩余空间 */
  width: calc(100% - 120px); /* 使用 calc 函数计算宽度，100% 为.con 的宽度减去.b 的宽度 */
}

代码解释：

.con 类：
width: 100%; 将 .con 元素的宽度设置为父元素的 100%。
display: flex; 把 .con 元素设置为弹性容器，其子元素（.a 和 .b）将遵循弹性布局规则。
box-sizing: border-box; 确保元素的宽度包含边框和内边距，防止因添加边框或内边距导致元素宽度超出 .con 的宽度。
.b 类：
width: 120px; 明确设置 .b 元素的宽度为 120 像素。
.a 类：
flex-grow: 1; 让 .a 元素可以占据 .con 容器中除了 .b 元素宽度外的剩余空间。
width: calc(100% - 120px); 利用 calc 函数精确计算 .a 的宽度，即 .con 的 100% 宽度减去 .b 的 120 像素宽度。
这样可以确保 .a 的宽度动态适应 .con 的宽度变化。

需要注意的是，上述代码中使用了 calc 函数，其语法为 calc(expression)，expression 是一个数学表达式，
可以使用加（+）、减（-）、乘（*）、除（/）运算符，并且可以混合使用百分比和像素等不同的长度单位。
使用 flex 布局可以更好地实现子元素宽度的动态分配，当 .con 的宽度发生变化时，.a 和 .b 的宽度会根据上述规则自动调整。
同时，box-sizing 的设置可以避免一些布局上的宽度计算问题，确保布局的稳定性。