html - 宽度 :100% vs. 宽度:继承

Question

我的理解是 width: 100% 让元素的宽度与其父元素的宽度相同，而 width: inherit 只有在明确指定父元素的宽度时才这样做.这种理解是否正确？

如果是这样，在我看来，当 width: inherit 有效时，width: 100% 将始终有效，因此您始终可以使用后者。那么，写width:inherit的目的是什么？什么时候有用？

如果我的理解有误，请问两者有什么区别？

与 height 类似。

Answer 1

参见 jsfiddle http://jsfiddle.net/bt5nj/2/和 http://jsfiddle.net/bt5nj/3/

width:inherit 继承 parent 定义的宽度。

HTML:

  <div id="parent">
      <div id="child"></div>
  </div>​

CSS:

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

这使得 child 的宽度为 25%，但是如果我用 width:100% 重新定义它，它将定义 child 的宽度为 50%。