css中calc(100%-10px)这个calc的百分比参考的什么？

Question

css中calc(100%-10px)这个calc的百分比参考的什么？

Answer 1

一般来说是父容器的尺寸

Answer 2

100%参考的是父级元素，具体是宽高取决于你设置的属性。height 和 margin 是不一样的。

换句话说

1. height: 100% 等于 height: calc(100%)
2. width: 100% 等于 width: calc(100%)
3. 但是height: 100%不等于width: 100%，这里面的100%也不等于。
4. 基于3可以理解 calc(100%)也是不等于的。

5. 有人说之前那个说话不好懂，那我换一个。比如说 height:100% 是基于父元素的 height 的高度。 width:100% 是基于父元素的 width 的宽度。但是 margin 和 padding 都是基于父元素的宽度计算的。和高度没啥关系。 所以100%是一样的。

   1. 

测试地址：http://jsrun.pro/upfKp