表格宽度设置百分比_相对值（百分比和em）介绍

本博客介绍了以下各属性中的相对值以什么为基础：

1、transform:translateX、transform:translateY；

2、margin、padding；

3、width、height；

4、line-height；

5、top/bottom/left/right。

父元素宽高设置 width：300px；height：200px；

子元素宽高设置为 height：150px；width：100px；

父元素border厚度20px；

子元素的border厚度10px；

子元素和父元素设置为box-sizing：content-box；（默认就是content-box）

em可以查看如下链接说明：

1、transform:translateX、transform:translateY：

MDN关于transform的介绍：

博客有说过transform在inline元素中是无效的。

（1）用transform：translateX（50%）测试，可以看到最后计算绝对值是60；

这是由子元素自己的宽度加上两边的border厚度（100+10+10）×50%=60计算得到，所以transform：translateX的相对值（百分比）是以子元素自己的宽度为基础计算的。

子元素自身设置为box-sizing：border-box；计算就不用考虑border厚度，因为宽度已经把border厚度包括了。

如果没有给body设置宽度，就会按照body的自身宽度，也就是窗口宽度与border厚度来计算。（这里只示例了block元素,因为block是占用一行，所以会随着窗口变宽而变化）

（2）子元素自己设置font-size：20px；父元素font-size：10px；

用transform：translateX（0.5em）测试，可以看到最后计算绝对值是10；所以transform：translateX的相对值（em）是以子元素自己的字体大小为基础计算的。

如果没有设置font-size，就会按照浏览器默认的字体大小 font-size:16px为计算基础；

（3）用transform：translateY（50%）测试，可以看到最后计算绝对值是85；

这是由子元素自己的高度height加上两边的border厚度（150+10+10）×50%=85计算得到，所以transform：translateY的相对值（百分比）是以子元素自己的高度height为基础计算的。

子元素自身设置为box-sizing：border-box；计算就不用考虑border厚度，因为高度已经把border厚度包括了。

如果没有给body设置高度，就会按照body的自身高度，这个高度由文档流的高度决定（这个例子中是200+20+20），与body自己的border（10+10）厚度来计算，height等于240px。

（4）子元素自己设置font-size：20px；父元素font-size：10px；

用transform：translateY（0.5em）测试，可以看到最后计算绝对值是10；所以transform：translateY的相对值（em）是以子元素自己的字体大小为基础计算的。

如果没有设置font-size，就会按照浏览器默认的字体大小 font-size:16px为计算基础；

2、margin、padding

（1）用margin：50%；padding：50%；测试，可以看到最后计算绝对值是150；说明margin/padding的相对值（百分比）都是按照父元素的宽度width作为基础。

（2）子元素自己设置font-size：20px；父元素font-size：10px；

用margin：0.5em；padding：0.5em；测试，可以看到最后计算绝对值是10；所以margin：0.5em；padding：0.5em的相对值（em）是以子元素的自身字体大小为基础计算的。

3、width、height；

（1）用 height：50%；width：50%；测试，可以看到最后计算绝对值是height：100px；width：150px；说明height/width的相对值（百分比）都是按照父元素的高度和宽度height/width作为基础。

（2）子元素自己设置font-size：20px；父元素font-size：10px；

用height：0.5em；width：0.5em；测试，可以看到最后计算绝对值是10；所以height：0.5em；width：0.5em；的相对值（em）是以子元素的自身字体大小为基础计算的。

4、line-height

（1）子元素自己设置font-size：20px；父元素font-size：10px；

用line-height：50%；测试，可以看到最后计算绝对值是10；说明line-height：50%的相对值（百分比）都是按照子元素自身的字体大小作为基础。

（2）子元素自己设置font-size：20px；父元素font-size：10px；

用line-height：0.5em；测试，可以看到最后计算绝对值是10；说明line-height：0.5em的相对值（em）都是按照子元素自身的字体大小作为基础。

5、top/bottom/left/right

（1）当使用position：relative前提使用top/bottom/left/right。

（1-1）用top/bottom/left/right：50%测试，可以看到最后计算绝对值是top/bottom：100px；left/right：150px；所以top/bottom和left/right的相对值（百分比）是以父元素的高height和宽width为基础计算的。

（1-2）子元素自己设置font-size：20px；父元素font-size：10px；

用top/bottom/left/right：0.5em测试，可以看到最后计算绝对值是top/bottom/left/right：10px；所以top/bottom和left/right的相对值（em）是以子元素自身的字体大小为基础计算的。

（2）当使用position：absolute前提使用top/bottom/left/right。

（2-1） 在body上增加width：500px；height：400px；把它的非static父级元素定位在body上。

用top/bottom/left/right：50%测试，可以看到最后计算绝对值是top/bottom：200px；left/right：250px；所以top/bottom和left/right的相对值（百分比）是以非static父级元素定位的高height和宽width为基础计算的。

（2-2）在body上增加width：500px；height：400px；fonti-size：30px；把它的非static父级元素定位在body上。

用top/bottom/left/right：0.5em测试，可以看到最后计算绝对值是top/bottom/left/right：10px；所以top/bottom和left/right的相对值（em）子元素自身的字体大小为基础计算的。

总结：

相对值（百分比和em）是以什么为基础计算。

本文为本人的原创文章，著作权归本人所有，转载务必注明来源