100% so với kế thừa

Question

Hiểu biết của tôi là width: '100%' cho phép chiều rộng của đối tượng giống với chiều rộng của đối tượng, trong khi width: inherit chỉ thực hiện khi chiều rộng của bố mẹ được chỉ định rõ ràng. Sự hiểu biết này có đúng không?

Nếu có, có vẻ như khi width: inherit hoạt động, thì width: '100%' sẽ luôn hoạt động, vì vậy bạn luôn có thể sử dụng sau. Sau đó, mục đích của việc viết width: inherit là gì? Khi nào nó trở nên hữu ích?

Nếu hiểu biết của tôi sai, sự khác nhau giữa hai điều là gì?

Tương tự với height.

Answer 1

Xem jsfiddle http://jsfiddle.net/bt5nj/2/ và http://jsfiddle.net/bt5nj/3/

width:inherit kế thừa chiều rộng mà xác định bởi mẹ.

HTML:

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

CSS:

#parent 
{ 
    width:50%; 
    height:30px; 
} 
#child 
{ 
    width:inherit; 
    height:100%; 
    background-color:red; 
} 

Điều này làm cho child chiều rộng 25%, nhưng nếu tôi xác định lại nó với width:100% nó sẽ xác định chiều rộng của child 50%.