Overflow (溢出)

當(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.)

Background clip (背景重疊)

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

大綱

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

盒的高級屬性

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

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

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

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

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

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

margin: 0 auto;

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

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

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

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

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

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

:967px;">

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

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

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

盒dispaly的類型

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

常見的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 (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)情況下，塊級別元素在其上設(shè)置 display:block; ，內(nèi)聯(lián)元素在其上設(shè)置 display:inline; 。

不常見的display類型

display 屬性中還有一些不太常用的值，您將在 旅行。 其中一些已經(jīng)存在了一段時間，并得到相當(dāng)好的支持，而其他是較新的，較不支持。 這些值通常創(chuàng)建為使創(chuàng)建網(wǎng)頁/應(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)過一個簡短的回顧，我們看看CSS的一些更高級的功能操縱框，并通過觸摸一些高級布局功能完成。 隨著這一切都在我們后面，我們現(xiàn)在將繼續(xù)看看背景。