Html 分区百分比_Html_Css - Fatal编程技术网

Html 分区百分比

html css

Html 分区百分比,html,css,Html,Css,新的，所以道歉，如果我错过了一个重要的教训，在CSS 我想用CSS做一个简单的练习。。。一个div中的一个div，两个div的大小都是百分比，因此它们对不断变化的窗口大小做出响应。这是我的密码：百分比测试 html，正文{ 身高：100%；保证金：0； } #外{ 身高：100%；宽度：100%；背景颜色：黄色； } #内在的{ 身高：90%；宽度：90%； /*利润率：5%*/ 背景颜色：蓝色； } 一切都和我想的一样；外部div占据整个屏幕，内部div占据外部div的90

新的，所以道歉，如果我错过了一个重要的教训，在CSS

我想用CSS做一个简单的练习。。。一个div中的一个div，两个div的大小都是百分比，因此它们对不断变化的窗口大小做出响应。这是我的密码：


百分比测试
html，正文{
身高：100%；
保证金：0；
}
#外{
身高：100%；
宽度：100%；
背景颜色：黄色；
}
#内在的{
身高：90%；
宽度：90%；
/*利润率：5%*/
背景颜色：蓝色；
}

一切都和我想的一样；外部div占据整个屏幕，内部div占据外部div的90%。如果我加上这个（即添加另一个内部div，更改百分比），一切都会达到我的预期。如果我在内部div中添加一个周围的边距（在本例中为5%，但被注释掉），我希望内部div在外部div中居中（上/下，左/右）。它适用于侧面和底部，但不适用于顶部。相反，外部div被推离顶部的主体（我假设为5%，但我不确定）。有没有想过为什么会发生这种情况？

这是CSS框模型默认的工作方式。对象的尺寸是设置的宽度/高度加上任何边框/边距/填充

要在指定的宽度中包含任何边框/边距/填充，请使用框大小：边框框；CSS中该元素的设置。

框大小将包括宽度大小内的填充和边框

提示

在某些浏览器中，上页边距经常失败
使用边距底部或填充顶部创建垂直空间
高度100%不会拉伸，以适应最外层的容器，而不会造成额外的冲击
div将只取决于其内容的大小

使用框尺寸：边框框；也许它有助于阅读：绝对是一个傻瓜-这个问题已经在这里得到了回答。检查答案的更新版本

<head>
    <title>Percentage Test</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #outer {
            height: 100%;
            width: 100%;
            background-color: yellow;
        }

        #inner {
            height: 90%;
            width: 90%;
            /* margin: 5%; */
            background-color: blue;
        }
    </style>
</head>


<body>
    <div id="outer"><div id="inner"></div></div>
</body>

    #outer {
        height: 100%;
        width: 100%;
        padding:5px;
        background-color: yellow;
        box-sizing:border-box;
    }

    #inner {
        height: 100%;
        width: 100%;
        /* margin: 5%; */
        background-color: blue;
        box-sizing:border-box;
    }