HTML + CSS 奇怪 DIV 错误

Question

我是 HTML 的新手，我在让两个 div 排队时遇到了一些小问题。第一个div是最上面的框，第二个div是下面的视频框。两者的宽度尺寸相同，但高度不同。每当我将视频框 div 放在顶部框 div 内时，视频框 div 会无缘无故向右移动 5px。我可以通过使用边距来修复它，但我整天都在谷歌搜索，无法找出它发生的原因。这是我的 HTML 代码和 CSS 代码。

.smoothbox
    {
        background-color: darkseagreen;
        border-style: solid;
        border-width: 5px;
        border-radius: 10px;
        border-color: black;
    }
    
    #topbox
    {
        width: 800px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    #video
    {
        width: 800px;
        height: 600px;
        margin-top: 200px;
    }

    <html>
        <head>
            <title>Camagru</title>
            <link rel="stylesheet" href="main.css">
        </head>
        <body>
            <div id="topbox" class="smoothbox">
                <video id="video" class="smoothbox" autoplay></video>
                <button id="snap">Snap Photo</button>
                <canvas id="canvas" width="800" height="600"></canvas>
                <script>
                    //Stream Video
                    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                    {
                        navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                        video.src = window.URL.createObjectURL(stream);
                        video.play();
                        });
                    }
                    //Snap Photo
                    var canvas = document.getElementById('canvas');
                    var context = canvas.getContext('2d');
                    var video = document.getElementById('video');
                
                    document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
                </script>
            </div>
        </body>
    </html>

非常感谢所有帮助！

Answer 1

听起来有可能，因为您将视频嵌套在#topbox div 中，视频上可能有 margin-left 或者#topbox div 上的 padding-left。考虑将这两个值都设置为零，看看会发生什么。

Answer 2

'Div' 会自动取边框因为你给 border-width: 5px; .

Answer 3

问题是您在 .smoothbox 上有一个 5px 的 border，所以 topbox 和 video 的边框都是 5px

所以这就是为什么 video 的绿色区域从左边移动 5px 因为你在 video 容器

的左边（顶部底部和右边）添加了 5px

如果不设置 box-sizing:border-box ，两个 div 都将超过 800px 的宽度，并且宽度为 810px.

请参阅下面的示例 box-sizing: border-box; 以更清楚地了解发生了什么

.smoothbox
{
    background-color: darkseagreen;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
    border-color: black;

}

#topbox
{
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#video
{
    width: 800px;
    height: 600px;
    margin-top: 200px;
      box-sizing:border-box;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topbox" class="smoothbox">
            <video id="video" class="smoothbox" autoplay></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="800" height="600"></canvas>
            <script>
                //Stream Video
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                {
                    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    });
                }
                //Snap Photo
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');

                document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
            </script>
        </div>

您可以使用负边距 (margin-left:-5px)，因此两个 div 将对齐。查看片段

.smoothbox
{
    background-color: darkseagreen;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
    border-color: black;
}

#topbox
{
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#video
{
    width: 800px;
    height: 600px;
    margin-top: 200px;
    margin-left: -5px;
    margin-right: auto;
}

<div id="topbox" class="smoothbox">
            <video id="video" class="smoothbox" autoplay></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="800" height="600"></canvas>
            <script>
                //Stream Video
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                {
                    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    });
                }
                //Snap Photo
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');

                document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
            </script>
        </div>

但是我建议你改变html结构，让他们成为兄弟姐妹。

如果添加 border 则使用 box-sizing:border-box 因为如果不添加 800px; 而不是占用 div 和 border:5px 将占用 810px 而不是

HTML + CSS 奇怪 DIV 错误

HTML + CSS strange DIV error

html

javascript

css

markup