The box model

盒子的基礎(chǔ)屬性

文檔中的每個元素都被構(gòu)造為文檔布局內(nèi)的矩形框，其大小和"洋蔥層"可以使用一些特定的CSS屬性進(jìn)行調(diào)整。 相關(guān)屬性如下:

alt ="">

width and height

width 和 "> height 屬性設(shè)置內(nèi)容框的寬度和高度，這是顯示框內(nèi)容的區(qū)域 - 此內(nèi)容包括 文本內(nèi)容坐在框內(nèi)，其他框表示嵌套子元素。

注意:存在其他屬性，允許處理內(nèi)容框大小的更微妙的方式 - 設(shè)置大小約束，而不是絕對大小。 這可以使用屬性 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框周圍的外部區(qū)域，它向上推動布局中的其他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 。

注意:保證金具有特定行為，名為利潤損失 >:當(dāng)兩個框相互觸摸時，它們之間的距離是兩個觸摸邊距中最大的值，而不是它們的和。

可選附加題 : 玩弄盒子們 Active learning: playing with boxes

在這一點上，讓我們跳進(jìn)一個主動的學(xué)習(xí)部分，并進(jìn)行一些練習(xí)，以說明我們上面討論的框模型的一些細(xì)節(jié)。 您可以在下面的實時編輯器中嘗試這些練習(xí)，但是如果您在本地創(chuàng)建單獨的HTML和CSS文件并在單獨的瀏覽器窗口中嘗試，可能會更容易看到一些效果。 您可以在Github上查找示例代碼 / a>。

如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看一個潛在的答案。

在下面的可編輯示例中，我們有一組三個框，所有框都包含文本內(nèi)容，并已設(shè)置為跨越整個主體寬度。 它們由 < header> ， / docs / Web / HTML / Element / main"> < main> 和 < footer> 元素。 我們希望您專注于底部的三個CSS規(guī)則 - 即分別定位每個框的規(guī)則，并嘗試以下操作:

• 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.

• 您應(yīng)該已經(jīng)注意到，框的總寬度是其 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％，邊框和填充以像素表示)。為了避免這樣的問題，可以調(diào)整框模型的屬性 a href ="/ zh-CN / docs / Web / CSS / box-sizing"> box-sizing 。 使用值 border-box ，它將框模型更改為新的模型:

alt ="">

高級框操作

除了設(shè)置框的寬度，高度，邊框，填充和邊距，還有一些其他屬性可用于更改它們的行為方式。 本節(jié)討論這些其他屬性。

溢出

當(dāng)您使用絕對值(例如固定像素寬度/高度)設(shè)置框的大小時，內(nèi)容可能不適合允許的大小，在這種情況下，內(nèi)容會溢出框。 要控制在這種情況下發(fā)生的情況，我們可以使用 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.)

以下是一個簡單的示例，顯示這些設(shè)置的工作原理:

首先，一些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>

現(xiàn)在有一些CSS應(yīng)用到你的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; }

上面的代碼給出以下結(jié)果:

背景嵌入的方式 Background clip

框背景由顏色和圖像組成，堆疊在一起( background-color a>， background-image 。)它們應(yīng)用于一個框，并繪制在 框。 默認(rèn)情況下，背景延伸到邊框的外邊緣。 這通常很好，但在某些情況下，它可能是惱人的(如果你有一個平鋪的背景圖像，你只想延伸到內(nèi)容的邊緣)。這個行為可以通過設(shè)置 zh-CN / docs / Web / CSS / background-clip"> background-clip 屬性。

讓我們看一個例子，看看這是如何工作的。 首先，我們的HTML:

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

現(xiàn)在的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; }

上面的代碼產(chǎn)生以下結(jié)果:

大綱

最后但并非最不重要的是，框的 大綱 看起來像邊框，但是 不是盒子模型的一部分。 它的行為像邊框，但是繪制在框的頂部，而不改變框的大小(具體來說，輪廓繪制在邊框外，邊緣區(qū)域內(nèi)部。)

盒子的種類 Types of CSS boxes

到目前為止，我們所說的一切都適用于代表塊級元素的框。 然而，CSS有其他類型的行為不同的框。 應(yīng)用于元素的框的類型由 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.
• 沒有行鎖的行內(nèi)盒子 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>

現(xiàn)在讓我們添加一些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; }

上面的代碼給出了這個結(jié)果，這說明了顯示類型的不同效果:

下一步是什么

在這一點上，你應(yīng)該對CSS框及其工作原理有些熟悉。 不要擔(dān)心，如果你現(xiàn)在沒有完全理解所有這一切 - 你可以隨時閱讀這篇文章，以獲得更好的理解，加上你會開始理解的東西更好地，當(dāng)你開始通過一些更實用的例子后， 在課堂中。 接下來，我們將了解調(diào)試CSS 。