css计算属性、动态计算值（calc和box-sizeing有异曲同工之妙）

 <div class="redbox">文字文字</div>

问题复现

// 会左右滚动 因为 width:100%; 你还 padding-left:30px;
.redbox{
  width:100%;
  height:30px;
  padding-left:30px;
  background:#c00;
}

calc举例

// 现在用calc 可以自动帮你减去 padding-left:30px; 的30px 不用担心100%-px单位怎么算 交给浏览器计算就好了
.redbox{
  width:calc(100% - 30px);
  height:30px;
  padding-left:30px;
  background:#c00;
}

  height: calc(100% - 40px);  //注：减号前后要有空格，否则很可能不生效！！

box-sizing举例

// 现在用box-sizing  和calc计算属性一样 只不过这里不需要你自己计算 你写一个box-sizing:border-box属性就好了
// 这样盒子模型就变了 会自定帮你自己算 而不会左右滚动 或者溢出/掉下来
.redbox{
  width:100%;
  height:30px;
  padding-left:30px;
  box-sizing: border-box;
  background:#c00;
}