盒模型概要

Overflow (溢出)

當(dāng)您使用絕對(duì)值(例如固定像素寬度/高度)設(shè)置框的大小時(shí)，內(nèi)容可能不適合允許的大小，在這種情況下，內(nèi)容會(huì)溢出框。 要控制在這種情況下發(fā)生的情況，我們可以使用 overflow 屬性。 它需要幾個(gè)可能的值，但最常見(jiàn)的是:

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

Background clip (背景重疊)

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

大綱

框的 outline 是看起來(lái)像邊框但不是框的一部分的東西 模型。 它的行為像邊框，但是繪制在框的頂部，而不改變框的大小(具體來(lái)說(shuō)，輪廓繪制在邊框外，邊緣區(qū)域內(nèi)部。)

盒的高級(jí)屬性

現(xiàn)在我們簡(jiǎn)要回顧一下，讓我們來(lái)看一些更有用的高級(jí)框?qū)傩浴?/span>

設(shè)置寬和高的約束

存在允許更靈活地處理內(nèi)容框大小的其他屬性 - 設(shè)置大小約束而不是絕對(duì)大小。 這可以使用屬性 min-width ， -CN / docs / Web / CSS / max-width"> max-width ， ="new"> min-height 和 max-height 。

一個(gè)明顯的用途是，如果你想允許一個(gè)布局的寬度是靈活的，通過(guò)將其外部容器的寬度設(shè)置為一個(gè)百分比，但你也不希望它變得太寬或太窄，因?yàn)椴季謺?huì)開(kāi)始看起來(lái)不好。 這里的一個(gè)選擇是使用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技術(shù)(我們將在后面介紹)，但是更簡(jiǎn)單的方法可能是給布局一個(gè)最大和最小寬度約束:

width: 70%;
max-width: 1280px;
min-width: 480px;

您還可以將此與下面的行，它應(yīng)用于其父中心容器的中心:

margin: 0 auto;

0使頂部和底部邊距為0，而 auto (在這種情況下)共享容器的左右邊距之間的可用空間，以此為中心。 最終結(jié)果是，當(dāng)容器在最小和最大寬度約束內(nèi)時(shí)，它將填充整個(gè)視口寬度。 當(dāng)超過(guò)1280像素寬度時(shí)，布局將保持在1280像素寬，并開(kāi)始在可用空間內(nèi)居中。 當(dāng)寬度低于480像素時(shí)，視口將小于容器，您必須滾動(dòng)才能看到它。

您可以在 "external"> min-max-container.html ( 查看源代碼)。

另一個(gè)使用 max-width 的好方法是將媒體(例如圖片和視頻)限制在容器內(nèi)。 回到上面的例子，圖像導(dǎo)致一個(gè)問(wèn)題 - 它看起來(lái)確定，直到容器變得比圖像更窄，但在這一點(diǎn)圖像開(kāi)始溢出容器(因?yàn)樗且粋€(gè)固定的寬度)。 要將圖像排序，我們可以在其上設(shè)置以下聲明:

display: block;
margin: 0 auto;
max-width: 100%;

前兩個(gè)使它的行為像塊元素，并將其居中在父容器中。 但真正的魔力在第三個(gè) - 這限制圖像的寬度是與容器最大相同的大小，因此，如果容器試圖收縮小于圖像寬度，圖像將隨著它收縮。

您可以在 "external"> min-max-image-container.html ( -recap"class ="external">查看源代碼)。

完全改變盒子模型

框的總寬度是其 width ， -CN / docs / Web / CSS / padding-right"class ="new"> padding-right ， padding-left"class ="new"> padding-left ， > border-right 和 border-left 屬性。 在某些情況下，它是惱人的(例如，如果你想有一個(gè)框的總寬度為50％，邊框和填充以像素表示)。為了避免這樣的問(wèn)題，可以調(diào)整框模型的屬性 a href ="/ zh-CN / docs / Web / CSS / box-sizing"> box-sizing 。 使用值 border-box ，它將框模型更改為新的模型:

:967px;">

讓我們看一個(gè)實(shí)例。 我們將設(shè)置兩個(gè)完全相同的 < div> 元素，每個(gè)元素的寬度相同 ，邊框和填充。 我們還將使用一些JavaScript來(lái)打印每個(gè)框的寬度的計(jì)算值(最終屏幕上的像素值)。 唯一的區(qū)別是我們已經(jīng)給出了底部框 box-sizing:border-box ，但是我們已經(jīng)離開(kāi)了頂部框及其默認(rèn)行為。

首先，HTML:

<div class="one"></div>
<div class="two"></div>

現(xiàn)在的CSS:

html {
  font-family: sans-serif;
  background: #ccc;
}

.one, .two {
  background: red;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px auto;
}

.two {
  box-sizing: border-box;
}

最后，使用一些JavaScript來(lái)測(cè)量總計(jì)算寬度:

var one = document.querySelector('.one');
var two = document.querySelector('.two');

function outputWH(box) {
  var width = box.offsetWidth;
  var height = box.offsetHeight;
  box.textContent = 'Width: ' + width + 'px, Height: ' + height + 'px.'
}

outputWH(one);
outputWH(two);

這給我們以下結(jié)果:

那么這里發(fā)生了什么？ 第一個(gè)框的寬度和高度等于content + padding + border，正如你所期望的。 然而，第二個(gè)框的寬度和高度等于通過(guò)CSS在內(nèi)容上設(shè)置的寬度和高度。 填充和邊框沒(méi)有添加到總寬度和高度; 相反，他們已經(jīng)占據(jù)了一些內(nèi)容的空間，使內(nèi)容更小，并保持總尺寸相同。

您還可以在 "external"> box-sizing-example.html ( /box-sizing-example.html"class ="external">查看源代碼)。

盒dispaly的類(lèi)型

到目前為止，我們所說(shuō)的一切都適用于代表塊級(jí)元素的框。 然而，CSS有其他類(lèi)型的行為不同的框。 應(yīng)用于元素的框的類(lèi)型由 display 屬性指定。

常見(jiàn)的display的類(lèi)型

 display 可以有很多種不同的值, 其中三種常見(jiàn)的值為 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 (an inline-block box that overflows a line of text will drop down onto a 2nd line, as there is not enough space for it on the first line, and it won't break across two lines.)

默認(rèn)情況下，塊級(jí)別元素在其上設(shè)置 display:block; ，內(nèi)聯(lián)元素在其上設(shè)置 display:inline; 。

不常見(jiàn)的display類(lèi)型

display 屬性中還有一些不太常用的值，您將在 旅行。 其中一些已經(jīng)存在了一段時(shí)間，并得到相當(dāng)好的支持，而其他是較新的，較不支持。 這些值通常創(chuàng)建為使創(chuàng)建網(wǎng)頁(yè)/應(yīng)用程序布局更容易。 最有趣的是:

• display: table — allows you to emulate table layouts using non-table elements, without abusing table HTML to do so. To read more about this, See CSS tables.
• display: flex — allows you to solve many classic layout problems that have plagued CSS for a long time, such as laying out a series of containers in flexible equal width columns, or vertically centering content. For more information, see Flexbox.
• display: grid — gives CSS a native way of easily implementing grid systems, whereas it has traditionally relied on somewhat hack-ish CSS grid frameworks. Our CSS Grids article explains how to use traditional CSS grid frameworks, and gives a sneak peek at native CSS Grids.

下一步是什么

經(jīng)過(guò)一個(gè)簡(jiǎn)短的回顧，我們看看CSS的一些更高級(jí)的功能操縱框，并通過(guò)觸摸一些高級(jí)布局功能完成。 隨著這一切都在我們后面，我們現(xiàn)在將繼續(xù)看看背景。