HTML&；CSS大小调整

因此，我遵循了本教程，以内容为中心，这是一个两列布局。

以下是完整产品的代码：

我的问题是，只要我改变

#wrap

宽度，然后改变

#main

和

#sidebar

宽度，使其填充

#wrap

宽度，布局就会完全出错。如本链接所示：

侧边栏不在主要部分的右侧

有人能简单地解释一下为什么会发生这种情况并加以解决吗

---

谢谢大家!！（我还在学习网络开发，哈哈）

设置宽度时，你必须考虑填充。因此，要获得1000px，您需要将#main设置为700px，将#sidebar设置为300px。然而，由于周围有一个10px的填充，你必须将这些像素向左减去10px，向右减去10px。所以你的#main应该是680px，而#边栏应该是280px。在jsfiddle中运行此代码，您可以看到它正在工作

         body,
     html {
        margin: 0;
        padding: 0;
        color: #000;
        background: white;
     }

     #wrap {
        width: 1000px;
        margin: 0 auto;
        background: #99c;
     }

     #header {
         padding:5px 10px;
         background:#ddd;
     }

     h1 {
         margin:0;
     }

     #nav {
         padding:5px 10px;
         background:#c99;
     }

     #main {
         float:left;
         width:680px;
         padding:10px;
         background:#9c9;
     }

     h2 {
         margin:0 0 1em;
     }

     #sidebar {
         float:right;
         width:280px;
         padding:10px;
         background:#99c;
     }

     #footer {
         clear:both;
         padding:5px 10px;
         background:#cc9;
     }

     #footer p {
         margin:0;
     }

     /* Navigation Bar */

     #nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
     }

     #nav li {
        display: inline;
        margin: 0;
        padding: 0;
     }

---

设置宽度时，必须考虑填充。因此，要获得1000px，您需要将#main设置为700px，将#sidebar设置为300px。然而，由于周围有一个10px的填充，你必须将这些像素向左减去10px，向右减去10px。所以你的#main应该是680px，而#边栏应该是280px。在jsfiddle中运行此代码，您可以看到它正在工作

         body,
     html {
        margin: 0;
        padding: 0;
        color: #000;
        background: white;
     }

     #wrap {
        width: 1000px;
        margin: 0 auto;
        background: #99c;
     }

     #header {
         padding:5px 10px;
         background:#ddd;
     }

     h1 {
         margin:0;
     }

     #nav {
         padding:5px 10px;
         background:#c99;
     }

     #main {
         float:left;
         width:680px;
         padding:10px;
         background:#9c9;
     }

     h2 {
         margin:0 0 1em;
     }

     #sidebar {
         float:right;
         width:280px;
         padding:10px;
         background:#99c;
     }

     #footer {
         clear:both;
         padding:5px 10px;
         background:#cc9;
     }

     #footer p {
         margin:0;
     }

     /* Navigation Bar */

     #nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
     }

     #nav li {
        display: inline;
        margin: 0;
        padding: 0;
     }

---

这是因为div的实际大小是

width+padding+border

。 使用：

获得想要的行为。阅读更多

---

---

更新的fiddle:

这是因为div的实际大小是

宽度+填充+边框

。 使用：

获得想要的行为。阅读更多

---

更新的小提琴：

这是因为。默认情况下，浏览器将填充和宽度分开，因此基本上元素的总宽度是

padding+width

假设您的元素是

1000px

，左边有一个

填充：100px

。默认情况下，浏览器会将元素绘制为

1100px

，因为额外的填充不包括在宽度中（默认情况下）

将此选择器添加到样式表的顶部

* {
  box-sizing: border-box;
}

…这样做的目的是告诉页面上的每个元素（没有父选择器的

*

选择器就是这样做的），并将其属性设置为

边框框

，这意味着浏览器现在将

宽度

属性作为实际总宽度

因此，如果现在有一个

1000px

元素，其左填充为

padding:100px

，那么包括该填充在内的总宽度实际上仍然是

1000px

。

这是因为。默认情况下，浏览器将填充和宽度分开，因此基本上元素的总宽度是

padding+width

假设您的元素是

1000px

，左边有一个

填充：100px

。默认情况下，浏览器会将元素绘制为

1100px

，因为额外的填充不包括在宽度中（默认情况下）

将此选择器添加到样式表的顶部

* {
  box-sizing: border-box;
}

…这样做的目的是告诉页面上的每个元素（没有父选择器的

*

选择器就是这样做的），并将其属性设置为

边框框

，这意味着浏览器现在将

宽度

属性作为实际总宽度

---

因此，现在如果您有一个

1000px

元素，左填充为

padding:100px

，那么包括该填充在内的总宽度实际上仍然是

1000px

。

特别是对于您的示例，您可以通过将包裹宽度更改为1040px来修复它：

   #wrap {
        width: 1040px;   /*instead of 1000px*/
    }

包裹宽度=主体宽度+列宽度+主体填充（右侧和左侧）+列填充（右侧和左侧）

---

=700+300+20+20=1040px

特别是对于您的示例，您可以通过将包裹宽度更改为1040px来修复它：

   #wrap {
        width: 1040px;   /*instead of 1000px*/
    }

包裹宽度=主体宽度+列宽度+主体填充（右侧和左侧）+列填充（右侧和左侧） =700+300+20+20=1040px