css百分比参照大总结

Posted 2020-10-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>