Question

我创建了一个快速简单的html文档来练习花车思考，这个简单的例子可以直接使用。但奇怪的事情发生了。

我只是想以相同的宽度和大小将两个div相邻。我使用完全相同的标记和单词，使它很容易看出它是如何工作的。然而，某种方式#content在标题之上有填充，而＃content1没有，它使“盒子”方式不同步。但是，当我向＃content1添加一个只有0.1px的填充时，它们一起排成一行并具有完全相同的填充量？我似乎并没有抓住最基本的概念......这是我用过的代码 -

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Float</title>

    <style>
        p {
            padding: 0;
            margin: 0;
        }

        #content {
            float: left;
            width: 50%;
            background-color: grey;
        }

        #content1 {
            padding-top: 0.1px;
            margin-left: 50%;
            width: 50%;
            background-color: grey;
        }
    </style>

</head>

<body>

    <div id="content">
        <h1>Ra ra banjo banjo</h1>
        <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra          ra banjo banjo. Ra ra banjo banjo.</p>
        <p>(Ra ra banjo banjo)</p>
    </div>

    <div id="content1">
        <h1>Ra ra banjo banjo</h1>
        <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra   ra banjo banjo. Ra ra banjo banjo.</p>
        <p>(Ra ra banjo banjo)</p>
    </div>


</body>

</html>

Answer 1

请记住，HTML Elements有一些默认样式，如填充或边距，这会影响元素的总宽度。您可以使用*轻松更改css，这将影响文档中的所有元素。

* {
    padding: 0;
    margin: 0;
    border: none;
    /* 
        etc., you can add here whatever you need to be a global style
        and rewrite some things afterwards in the specific classes, ids, ...
    */
}

如果您要浮动块，则需要考虑元素的总数，因此不仅要考虑width属性，还要考虑padding，margin和border。如果您浮动的元素的汇总（总）宽度大于其父元素的宽度，则它们不会浮动。

所以，在你的练习中，它看起来像这样：

*, p {
    padding: 0;
    margin: 0;
}

#content {
    float: left;
    width: 50%;
    background-color: grey;
}

#content1 {
    /*
      padding-top: 0.1px; - this is unnecessary 
      margin-left: 50%; 
      this margin makes the element 100% wide 
      (50% width + 50% margin-left), so it will not be floated to the 
      #content in your code as they would have the 150% of total width
      and it's 50% more than the parent's width 
      (of course, parent's width is always 100%)
    */
    width: 50%;
    background-color: grey;
    float: left;
}

Answer 2

我完全理解你的问题。为什么它不起作用？您的问题清楚地了解 CSS box-model。绘制 CSS 取决于父元素框建模。您的主要问题是box-model而不是display，position和float。

箱子模型如何运作？

CSS box-model是矩形框。 box-model描述了元素空间的内容。每个框都有 四条边 ：边距，边框，填充边和内容边缘。内容区域是元素的真实内容。它有背景，颜色或图片，文字等。它位于内容边缘内。其尺寸为content width，content-box width，content height或content-box height。

CSS box-model使用了box-sizing属性。

box-sizing全球价值：

box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

box-sizing关键字值：

box-sizing: content-box;
box-sizing: border-box;
box-sizing: padding-box; /* Only Firefox implemented this value, and it was removed in Firefox 50. */

内容框：

如果是方框width: 450px。然后你申请border: 5px solid red;。结果框width: 460px;。

*{
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.content-box{
  background-color: green;
  height: 150px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 450px;
}
.with-border{
  border: 5px solid #121212;
}

<div class="content-box">Without border</div>
<div class="content-box with-border">With border</div>

边界框：

如果是方框width: 450px。然后你申请border: 5px solid red;。结果框width: 450px;。

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.border-box{
  background-color: green;
  height: 150px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 450px;
}
.with-border{
  border: 5px solid #121212;
}

<div class="border-box">Without border</div>
<div class="border-box with-border">Width border</div>

语法＆amp;用途：

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

或

*{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

您可以将其与任何class或任何ID一起使用。

如果您清楚地了解了盒子模型，那么您将理解显示，位置和浮动。

学习显示，位置和浮动。尝试过浮动的简单练习，但是没有成功

2 个答案: