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

• 定位属性：top,right,bottom,left;
• 盒模型属性：height,width,margin,padding;
• 背景属性：background-position;
• 文本属性：text-indent,line-height,vertical-align;
• 字体属性：font-size.

2.1定位属性

box为父元素，box1为子元素

                body {width: 1000px;height:800px;}
                .box {width: 500px;height: 300px;border: 2px solid yellow;position: relative;}
                .box1 {width: 100px;height: 60px;border: 2px solid red;position: absolute;top:20%;right:20%;}                

2.2盒模型属性：height,width,margin,padding;

box为父元素，box1为子元素

                body {width: 1000px;height:800px;}
                .box {width: 500px;height: 300px;border: 2px solid yellow;padding-top:10%;}
                .box1 {width: 100px;height: 60px;border: 2px solid red;}                

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

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

2.3背景属性：background-position;

• 图像中描述为 50% 50% 的点（中心点）;如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角;如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
• 如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
• background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

2.4文本属性：text-indent,line-height,vertical-align;

            <div>
                <p>text-indent 定义基于父元素宽度的百分比的缩进。当外层不指定宽度时，ie下会基于浏览器宽度。line-height 定义基于元素的字体大小。<span>vertical-align </span>定义基于元素的行高。</p>
                </div>            

                div {  width: 500px;  height: 300px;border: 2px solid yellow;}
                p{text-indent: 20%;  font-size: 20px;  line-height:200%;}
                span { vertical-align: 50%;}            

2.5字体属性：font-size.

浏览器默认字体大小为16px,我们一般默认font-size=62.5%，但也可以根据浏览器窗口大小利用媒体查询进行适当调整。

em有继承特性，存在重复声明的情况，所以我们一般不建议采用。

rem根据html中font-size的声明进行使用，不存在重复声明，建议使用。

绝对定位的包含块

                body {width: 1000px;height:800px;}
                .box {width: 500px;height: 300px;border: 2px solid yellow;}
                .box1 {width: 100px;height: 60px;border: 2px solid red;position: absolute;top:20%;right:20%;}                

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

固定定位的包含块

box为父元素，box1为子元素，box2为子元素

                body {width: 1000px;height:800px;}
                .box {width: 500px;height: 300px;border: 2px solid yellow;position: relative;}
                .box1 {width: 100px;height: 60px;border: 2px solid red;position: absolute;top:20%;right:20%;}
                 .box2 {width: 100px;height: 60px;border: 2px solid blue;position: fixed;top:20%;right:20%;}                

对固定定位的元素，它的包含块是视口（viewport）。