width:100%; 这个100%指的是什么,具体是怎么算的?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 1000px;
            border: 10px orange solid;
        }

        .header, .footer {
            width: 100%;
            background: #ddd;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .container {
            padding: 0 220px 0 220px;
            background: red;
        }

        .left {

        }

        .middle {
            width: 100%;
            background: blue;
        }

        .right {

        }
    </style>
</head>
<body>
<div class="header">头布局</div>
<div class="container">
    <div class="left">左侧内容左侧内容左侧内容左侧内容左侧内容左侧内容左侧内容左侧内容</div>
    <div class="middle">中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容</div>
    <div class="right">右侧内容右侧内容右侧内容右侧内容右侧内容右侧内容右侧内容右侧内容右侧内容右侧内容</div>
</div>
<div class="footer">尾布局</div>

</body>
</html>

在这个布局中,.middle的宽度设置为100%,我看到它的实际宽度: 如容器的宽度-左padding -右padding? 是这样吗? 需要减去border的宽度吗?

qq_夜_71 2019-05-20

源自：CSS网页布局基础 3-2 圣杯布局案例（了解即可）

收起

1回答

慕移动6521215 回答被采纳获得+3积分 2019-05-20 18:27:47

width：100% 是相对父元素来指定的，比如父元素是1000px,那么子元素宽度设定100%，子元素也是1000px, middle 的100%，也是跟随父元素来定的，pading是内边距，也就是你这个middle里面的内容+padding的内边距=middle100%

收起回答

qq_夜_71 提问者 #1

width,设置的不是内容的宽度吗?之前的课程讲的是: width+左padding+右padding+左边框宽度+右边框宽度=总的宽度. 现在我有点混淆了,能再具体解释一下吗?

2019-05-20 18:32:13
慕移动6521215 回复提问者 qq_夜_71 #2

是盒子的宽度也就是说你的内容是一个盒子啊，盒子包含内容+内边距啊！如果设外边距的话的，你原来设定的盒子宽度就会变大了。

2019-05-20 18:39:54
慕移动6521215 #3

你可以这么想，内边距设定是死的了，不可以缩小扩大改变了，里面的内容是100% 就可以自适应跟随改变啊

2019-05-20 18:44:39