ie9+ 布局相关点滴总结

calc

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>,<frequency>,<angle>, <time>, <percentage>, <number>, or <integer>is allowed.

<div class="banner">This is a banner!</div>
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 50px)

vh, vw

相对于视口的高度。视口被均分为100单位的vh

兼容是 ie9+

1vh 是屏幕1%的高度，height:calc(100%)