css百分比参照问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css百分比参照问题相关的知识,希望对你有一定的参考价值。

参考技术A 1.参照父元素宽度的元素:padding margin;width;text-indent

2.参照父元素高度的元素:height

3.参照父元素属性:font-size;line-height

4.特殊:相对定位的时候,top(bottom),left(right)参照的是父元素的内容区域的高度与宽度,而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

可参考《CSS权威指南(第三版)》第220页“百分数和外边距”说明:“百分数是相对于父元素的width计算的,所以如果父元素的width以某种方式发生变化,百分数也会变化”

css百分比参照大总结

最近做PC端项目,由于要自适应到800*600,所以免不了要使用百分比的布局方式,但是一开始有点搞不清楚百分比的参照,于是页面的布局怎么调也调不好。

事后我进行了一下总结,希望能够帮到大家:

参照父元素宽度的元素:padding margin width text-indent

参照父元素高度的元素:height

参照父元素属性:font-size   line-height

特殊:相对定位的时候,top(bottom)   left(right)参照的是父元素的内容区域的高度与宽度,而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

下面给一个demo:

先上代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            margin-bottom: 10%;
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 4px solid blue;
            background: red;
        }
        .box>.relative-ele{
            z-index: 1;
            position: relative;
            top: 100%;
            left: 100%;
            width: 10%;
            height: 10%;
            padding: 10%;
            border: 4px solid yellow;
            background: blue;
        }
        .box>.absolute-ele{
            z-index: 1;
            position: absolute;
            top: 100%;
            left: 100%;
            width: 10%;
            height: 10%;
            padding: 10%;
            border: 4px solid yellow;
            background: blue;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="relative-ele"></div>
</div>
<div class="box">
    <div class="absolute-ele"></div>
</div>
</body>
</html>

父盒子盒模型与相对定位的子盒子的盒模型:

技术分享技术分享技术分享

可以看出来相对定位的盒子的百分比定位的top和left值是参照父元素内容的宽度和高度,而不包括padding

父盒子盒模型与绝对定位的子盒子的盒模型:

技术分享技术分享技术分享

可以看出来绝对定位后,盒子大小都发生了改变,也就是说子盒子绝对定位之后top和left值会参照最近的定位盒子的padding-box来进行计算,所有大小的计算都要包括父盒子的padding值

 

附带一点:就是ie7相对定位的参照点不太一样,它参照的是父元素内容的左上角,不包含padding

技术分享技术分享

以上是关于css百分比参照问题的主要内容,如果未能解决你的问题,请参考以下文章

margin padding 百分比参照物

CSS黑科技2CSS百分比实现高度占位自适应(margin/padding)

当padding/margin的取值形式为百分比时。。。。。

margin与padding的百分比参照

定位居中显示

css怎么让盒子固定