Question

我最近读到浮标出来了，内联块是最好的前进方式。我还了解了盒子大小的属性。

我想知道为什么我必须减少下面代码中前两个框中任何一个的宽度，使它们彼此相邻。我认为这正是盒子大小的属性应该避免的吗？

另外，我很想知道如何防止方框2和方框3之间的边框加倍。

HTML：

<main>
    <section id="textInput">Input</section>
    <section id="display">Output</section>
    <section id="buttons">
        <button type="button" id="button1">Click me!</button>
    </section>
</main>

CSS：

main {
    width: 600px;
    margin: 50px auto;
}
#textInput {
    box-sizing: border-box;
    display: inline-block;  
    padding: 2px;
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}
#display {
    box-sizing: border-box;
    display: inline-block;
    padding: 2px;
    width: 300px;
    border: 1px solid blue;
    height: 100px;
}
#buttons {
    box-sizing: border-box;
    height: 100px;
    border: 1px solid blue;
    text-align: center;
}

Answer 1

对于双边框问题，只需在border-bottom:none;和#textInput上设置#display，如下所示，您也可以border-right:none;以相同的方式使用#textInput }：

修改

你的HTML中实际上有不可见的空格（导致问题），检查更新的代码，你不需要减小宽度..

使用box-sizing: border-box;时，宽度分布如下：

边框宽度（左右） + 填充（左右） + 元素宽度（剩余） = 在CSS中设置的宽度属性

main { width: 600px; margin: 50px auto; } #textInput { box-sizing: border-box; display: inline-block; padding: 2px; width: 300px; height: 100px; border: 1px solid blue; border-bottom:none; border-right:none; } #display { box-sizing: border-box; display: inline-block; padding: 2px; width: 300px; border: 1px solid blue; border-bottom:none; height: 100px; } #buttons { box-sizing: border-box; height: 100px; border: 1px solid blue; text-align: center; }

<main> <section id="textInput">Input</section><section id="display">Output</section><section id="buttons"> <button type="button" id="button1">Click me!</button> </section> </main>

理解没有浮动的CSS Box布局

1 个答案: