css样式的百分比都相对于谁？

从刚开始接触CSS到现在，一般用的单位都是像素这种绝对的单位。简单方便，而且还不容易出现一些莫名其妙的问题。想必学过CSS，了解了相对单位的童鞋们都应该知道：相对单位于都有一个基准。那么width:100%是相对于谁呢？

一般层级元素

把上面的demo-aprent中加入padding,margin,border值，这些属性的百分比值始终是以父容器的宽度为基准的，而height是以父容器的高度为基准（若父容器没有设置高度，即height值为auto，则浏览器会设置子容器的height属性为auto）

存在定位元素

对于使用position:relative的子类元素而言，width:100%也始终是基于父级元素而并不会基于其上层元素中的relative。

对于绝对定位的子无素，要是其外层的所有元素中都没有用position:relative，则width:100%是基于body，否则就是离基于最近的一个position:relative的元素。

而对于position:fixed的元素，其一直是基于body,所以其宽度100%就是基于body。

我们要弄清楚什么时候合适使用，那我们就要弄清楚它在什么时候多余。说白了就是width什么时候会自动继承。

1.内层子元素必须为块级元素，才有可能出现宽度继承。

2.当父元素宽度确定，子元素不存在浮动，绝对定位，固定定位时，其宽度也能够很好的继承；相反，宽度会零（只有通过里面的内容把其撑开）。

3.当父元素宽度不确定时（宽度是继承而来，或是用的相对单位），不会对继承造成什么影响。

光看不练是没有多大意义的。你可以按照以上的思路来写一下，试一下，或许还有意外惊喜。

来源：千锋html5学院