1.背景介绍

CSS 的属性值中经常会出现百分比，并且百分比是实现页面自适应很重要的一种方法。但是有哪些属性可以用百分比来进行设置呢？设置的原则又是什么呢？

2.知识剖析

可以使用百分比的样式属性: 

定位：top,right,bottom,left; 

盒模型：height,width,margin,padding, 

背景：background-position,background-size(css3), 

文本：text-indent，

字体：font-size;

各个属性使用详细：

top,right,bottom,left:全兼容,

height：基于包含它的块级对象的百分比高度。

width：基于包含它的块级对象的百分比宽度。

margin：百分数是相对于父元素的 width 计算的。

padding：百分数是相对于父元素的 width 计算的。

3.常见问题

1.怎么让字体设置进行自适应？

2.宽度设置为百分比是怎么使用的?

3.使用百分比要注意什么？

4.解决方案

1.利用媒体查询和字体的百分比设置。

2.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义，而非百分比)，div用百分比是无效的。如果坚持要用百分比，请换成table标签。

3.认清子元素的父元素

5.编码实战

6.扩展思考

定位属性的包含块一定是父元素吗？

绝对定位的包含块

定位属性的百分比的参考系是包含块。关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。

7.参考文献

CSS样式的设置

CSS 属性之中经常出现的百分比

W3School.

8.更多讨论