The box model

盒子的基础属性

文档中的每个元素都被构造为文档布局内的矩形框，其大小和"洋葱层"可以使用一些特定的CSS属性进行调整。 相关属性如下:

alt ="">

width and height

width 和 "> height 属性设置内容框的宽度和高度，这是显示框内容的区域 - 此内容包括 文本内容坐在框内，其他框表示嵌套子元素。

注意:存在其他属性，允许处理内容框大小的更微妙的方式 - 设置大小约束，而不是绝对大小。 这可以使用属性 min-width ， -CN / docs / Web / CSS / max-width"> max-width ， min-height"> min-height 和 max-height 。

padding

The padding box represents the inner margin of a CSS box — the layer between the outer edge of the content box and the inner edge of the border. The size of this layer can be set on all four sides at once with the padding shorthand property, or one side at a time with the padding-top, padding-right, padding-bottom and padding-left properties.

border

The border of a CSS box is a distinct layer, sitting between the outer edge of the padding and the inner edge of the margin. By default the border has a size of 0 — making it invisible — but you can set the thickness, style and color of the border to make it appear. The border shorthand property allows you to set all of these on all four sides at once, for example border: 1px solid black. This can be broken down into numerous different longhand properties for more specific styling needs:

• border-top, border-right, border-bottom, border-left: Set the thickness, style and color of one side of the border.
• border-width, border-style, border-color: Set only the thickness, style, or color individually, but for all four sides of the border.
• You can also set one of the three properties of a single side of the border individually, using border-top-width, border-top-style, border-top-color, etc. 

margin

边距表示CSS框周围的外部区域，它向上推动布局中的其他CSS框。 它的行为更像 padding ; 缩写属性为 margin ，各个属性为 docs / Web / CSS / margin-top"> margin-top ， margin-right ， margin-bottom 和 a href ="/ zh-CN / docs / Web / CSS / margin-left"> margin-left 。

注意:保证金具有特定行为，名为利润损失 >:当两个框相互触摸时，它们之间的距离是两个触摸边距中最大的值，而不是它们的和。

可选附加题 : 玩弄盒子们 Active learning: playing with boxes

在这一点上，让我们跳进一个主动的学习部分，并进行一些练习，以说明我们上面讨论的框模型的一些细节。 您可以在下面的实时编辑器中尝试这些练习，但是如果您在本地创建单独的HTML和CSS文件并在单独的浏览器窗口中尝试，可能会更容易看到一些效果。 您可以在Github上查找示例代码 / a>。

如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。

在下面的可编辑示例中，我们有一组三个框，所有框都包含文本内容，并已设置为跨越整个主体宽度。 它们由 < header> ， / docs / Web / HTML / Element / main"> < main> 和 < footer> 元素。 我们希望您专注于底部的三个CSS规则 - 即分别定位每个框的规则，并尝试以下操作:

• Have a look at the box model of each individual element on the page by opening up the browser developer tools and clicking on the elements in the DOM inspector. See Discover browser developer tools for help on how to do this. Each browser has a box model viewer that shows exactly what margin, border and padding is applied to each box, how big the content box is, and the total space the element takes up.
• Set some margin-bottom on the <main> element, say 20px. Now set some margin-top on the <footer> element, say 15px. Note how the 2nd one of these actions makes no difference to the layout — this shows margin collapsing in action; the smaller margin's effective width is reduced to 0, leaving only the larger margin.
• Set a margin of 30px and a padding of 30px on every side of the <main> element — note how the space around the element (the margin) and the space between the border and the content (the padding) both increase, causing the actual content to take up a small amount of space. Again, check this with the browser developer tools.
• Set a larger border on all sides of the <main> element, say 40px, and notice how this takes space away from the content rather than the margin or padding. You could do this by setting a complete new set of values for the width, style and color with the border property, e.g. 60px dashed red, but since the properties are already set in a previous rule, you could just set a new border-width.
• By default, the content width is set to 100% of the available space (after the margin, border, and padding have taken their share) — if you change the browser window width, the boxes will grow and shrink to stay contained inside the example output window. The height of the content will default to the height of the content inside it.
• Try setting a new width and height on the <main> element — start with say 400px width and 200px height — and observe the effect. You'll notice that the width no longer changes as the browser window is resized.
• Try setting a percentage width on the <main> element instead — say 60% width — and observe the effect. You should see that the width now changes again as the browser window is resized. Remove the <main> element's height setting for now.
• Try setting your <main> element's padding and margin to be 5% on all sides, and observe the result. If you use your browser developer tools to look at the width of the example output window and compare that to the width of the margin/padding, you'll see that this 5% means "5% of the containing element's width." So as the size of the example output window increases, so does the padding/margins.
• Margins can accept negative values, which can be used to cause element boxes to overlap. Try setting margin-top: -50px; on the <main> element to see the effect.
• Keep experimenting!

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div id="wrapper">
  <header>Header</header>
  <main>Main content</main>
  <footer>Footer</footer>
</div></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;">/* General styles */
body {
  margin: 0;
}

#wrapper * {
  padding: 20px;
  font-size: 20px;
  border: 20px solid rgba(0,0,0,0.5);
}

/* specific boxes */

#wrapper header, #wrapper footer {
  background-color: blue;
  color: white;
}

#wrapper main {
  background-color: yellow;
}

#wrapper header {

}

#wrapper footer {

}</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 20em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = '/* General styles */\n\nbody {\n  margin: 0;\n}\n\n#wrapper > * {\n  padding: 20px;\n  font-size: 20px;\n  border: 20px solid rgba(0,0,0,0.5);\n}\n\n/* specific boxes */\n\n#wrapper header, #wrapper footer {\n  background-color: blue;\n  color: white;\n}\n\n#wrapper main {\n  background-color: yellow;\n  margin: 2%;\n  padding: 2%;\n  border: 60px solid rgba(0,0,0,0.5);\n  width: 60%;\n}\n\n#wrapper header {\n\n}\n\n#wrapper footer {\n  margin-top: 20px;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

一些提示和想法:

• By default background-color/background-image extend to the edge of the border. This behaviour can be changed using the background-clip property, which you'll learn about in the Background_clip section.
• If the content box becomes larger than the example output window, it will overflow out of the window, and scroll bars will appear to allow you to scroll the window to view the rest of the box. You can control overflow with the overflow property — see also the Overflow section below.
• Box heights don't observe percentage lengths; box height always adopts the height of the box content, unless a specific absolute height is set (e.g. pixels or ems.) This is more convenient than the height of every box on your page defaulting to 100% of the viewport height.
• Borders ignore percentage width settings too.

• 您应该已经注意到，框的总宽度是其 width ， class ="new"href ="/ zh-CN / docs / Web / CSS / padding-right"> padding-right ， zh-CN / docs / Web / CSS / padding-left"> padding-left ， / border-right"> border-right 和 > border-left 属性。 在某些情况下，它是恼人的(例如，如果你想有一个框的总宽度为50％，边框和填充以像素表示)。为了避免这样的问题，可以调整框模型的属性 a href ="/ zh-CN / docs / Web / CSS / box-sizing"> box-sizing 。 使用值 border-box ，它将框模型更改为新的模型:

alt ="">

高级框操作

除了设置框的宽度，高度，边框，填充和边距，还有一些其他属性可用于更改它们的行为方式。 本节讨论这些其他属性。

溢出

当您使用绝对值(例如固定像素宽度/高度)设置框的大小时，内容可能不适合允许的大小，在这种情况下，内容会溢出框。 要控制在这种情况下发生的情况，我们可以使用 overflow 属性。 它需要几个可能的值，但最常见的是:

• auto: If there is too much content, the overflowing content is hidden and scroll bars are shown to let the user scroll to see all the content.
• hidden: If there is too much content, the overflowing content is hidden.
• visible: If there is too much content, the overflowing content is shown outside of the box (this is usually the default behavior.)

以下是一个简单的示例，显示这些设置的工作原理:

首先，一些HTML:

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

现在有一些CSS应用到你的HTML:

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

上面的代码给出以下结果:

背景嵌入的方式 Background clip

框背景由颜色和图像组成，堆叠在一起( background-color a>， background-image 。)它们应用于一个框，并绘制在 框。 默认情况下，背景延伸到边框的外边缘。 这通常很好，但在某些情况下，它可能是恼人的(如果你有一个平铺的背景图像，你只想延伸到内容的边缘)。这个行为可以通过设置 zh-CN / docs / Web / CSS / background-clip"> background-clip 属性。

让我们看一个例子，看看这是如何工作的。 首先，我们的HTML:

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

现在的CSS:

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

上面的代码产生以下结果:

大纲

最后但并非最不重要的是，框的 大纲 看起来像边框，但是 不是盒子模型的一部分。 它的行为像边框，但是绘制在框的顶部，而不改变框的大小(具体来说，轮廓绘制在边框外，边缘区域内部。)

盒子的种类 Types of CSS boxes

到目前为止，我们所说的一切都适用于代表块级元素的框。 然而，CSS有其他类型的行为不同的框。 应用于元素的框的类型由 display 属性指定。 display 有许多不同的值，但在本文中，我们将重点介绍三个 常见的; block ， inline 和 inline-block。

• 加了行锁的块状盒子 A block box is defined as a box that's stacked upon other boxes (i.e. content before and after the box appears on a separate line), and can have width and height set on it. The whole box model as described above applies to block boxes.
• 没有行锁的行内盒子 An inline box is the opposite of a block box: it flows with the document's text (i.e. it will appear on the same line as surrounding text and other inline elements, and its content will break with the flow of the text, like lines of text in a paragraph.) Width and height settings have no effect on inline boxes; any padding, margin and border set on inline boxes will update the position of surrounding text, but will not affect the position of surrounding block boxes.
• 没加行锁的块状盒子 An inline-block box is something in between the first two: It flows with surrounding text without creating line breaks before and after it like an inline box, but it can be sized using width and height and maintains its block integrity like a block box — it won't be broken across paragraph lines (in the below example the inline-box goes onto the 2nd line of text, as there is not enough space for it on the first line, and it won't break across two lines.)

这听起来有点混乱的时刻; 让我们来看一个简单的例子。

首先，HTML:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

现在让我们添加一些CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

上面的代码给出了这个结果，这说明了显示类型的不同效果:

下一步是什么

在这一点上，你应该对CSS框及其工作原理有些熟悉。 不要担心，如果你现在没有完全理解所有这一切 - 你可以随时阅读这篇文章，以获得更好的理解，加上你会开始理解的东西更好地，当你开始通过一些更实用的例子后， 在课堂中。 接下来，我们将了解调试CSS 。