子元素相对于父元素百分比尺寸问题

2024年4月14日 90次阅读 来源: 洛神赋 
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>百分比尺寸问题</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <style>
        #root {
            width: 800px;
            height: 600px;
            padding: 0 50px;
            position: relative;
            margin: auto;
            background: chocolate;
        }

        .container {
            width: 100%;
            padding: 0 50px;
            height: auto;
            background: chartreuse;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .container > div {
            width: 20%;
            display: flex;
            flex-direction: row;
            margin: 0 50px;
            padding: 0 50px;
        }

        .container > div > button {
            width: 80px;
            height: 40px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="container">
        <div>
            <button>search</button>
            <button>update</button>
        </div>
        <div>
            <button>cancel</button>
            <button>create</button>
        </div>
    </div>
</div>
<script>
</script>
</body>

</html>

子元素尺寸相对于父元素尺寸，以百分比的形式确定时，需要注意的是，此时默认的盒模型是W3C的标准盒模型。
container的width是100%，相对于root。root的尺寸 width: 800px; height: 600px;padding: 0 50px;
那么此时container的width具体是多少呢？800px。不是(800 + 50 2) 100% = 900px

    原文作者：洛神赋
    原文地址: https://segmentfault.com/a/1190000019833169
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞