Question

我试图围绕响应式网页设计。在这个过程中，我遇到了一些奇怪的东西。采取以下设置：

<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/res/css/300-px.css"></link>
    <link rel="stylesheet" type="text/css" href="/res/css/600-px.css"></link>   
    <link rel="stylesheet" type="text/css" href="/res/css/desktop-px.css"></link>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>

以下CSS（来自三个样式表文件）：

@media (max-width:600px){
    #container {
        width:95%;
        margin-left:2.5%;
        margin-right:2.5%;
        border: 3px dashed black;
        border-radius: 25px;
        background-color:red;
        height:300px;
    }
}

@media (min-width:601px) and (max-width:900px){
    #container {
        width:90%;
        margin-left:5%;
        margin-right:5%;
        border: 3px dashed black;
        border-radius: 25px;
        background-color:green;
        height:300px;
    }
}

@media (min-width:901px){
    #container {
        width:90%;
        margin-left:5%;
        margin-right:5%;
        border: 3px dashed black;
        border-radius: 25px;
        background-color:blue;
        height:300px;
    }
}

容器的宽度为90%，左右边距为5%。在我的浏览器（Chrome和Firefox）中渲染时，边距右边似乎比边距左侧略小。

检查元素时显示的计算值，表示它们的值完全相同。尽管如此，为什么页面上显示的实际保证金权利较小？

我创建了一个CodePen，其中包含您要查看的代码。

Answer 1

这是因为您添加了3px边框。在默认的箱子模型中，边框的宽度不是在框宽度中计算的，所以它在右边“溢出”。

要对此进行核心处理，您可以通过将box-sizing:border-box;添加到#container来更改默认的框模型行为，以便以元素的宽度计算边框宽度。

<强> DEMO

保证金 - 小于保证金 - 左边的价值相等

1 个答案: