跳轉到內容

層疊樣式表/盒子模型

來自華夏公益教科書，開放的書籍，開放的世界

塊級元素和內聯元素 - display 屬性

[編輯 | 編輯原始碼]

W3C 規範 CSS1 CSS2.1

CSS 不理解底層文件的語義。特別是它不知道下面的 HTML 片段中的 p 元素應該從新行開始，而 em 元素不應該。

    <p>This paragraph contains an <em>emphasised</em> word.</p><p>This paragraph does not.</p>

display 屬性提供此資訊。

CSS1 為 display 定義了四個值。CSS2.1 添加了兩個更通用的值，以及用於建立表格的多個值。表格值在 顯示錶格 中進行了描述。

  • block - 這會導致元素從新行開始。
  • inline
  • list-item
  • none
  • inline-block (CSS2.1)
  • run-in (CSS2.1)

這些值將在後面的部分中詳細解釋。

注意：在 CSS1 中，display 的初始值為 block。在 CSS2.1 中，這將更改為 inline。此屬性應為文件中可能出現的所有元素型別顯式設定，以確保不同實現之間的一致性。大多數網路瀏覽器將為 (X)HTML 文件中的元素設定適當的值。（有關建議值，請參閱 CSS 2.1 規範的附錄 D）。在 XML 文件中，使用以下規則

* {
  display: block
}

為所有元素型別設定 display 屬性。然後使用更具體的規則為單個元素型別設定值。

display 值會影響對元素有效的其他屬性集。例如，列表屬性僅在 display 為 list-item 時有效。在下面的示例中，列表項上沒有出現專案符號，因為 display 已設定為 inline。

CSS 規則

li {
  display:inline;
  list-style-type:circle
}

示例 HTML

    <ul>
      <li>Parsley, </li>
      <li>sage, </li>
      <li>rosemary and </li>
      <li>thyme.</li>
    </ul>

示例渲染

歐芹，鼠尾草，迷迭香和百里香。

block

[編輯 | 編輯原始碼]

將 display 設定為 block 的元素從新行開始。它還充當其子元素內容的容器。

inline

[編輯 | 編輯原始碼]

將 display 設定為 inline 的元素與其最近的 block 父級元素的包含框內其他內容一起流動。它們不會從新行開始。

width 和 height 屬性在非替換內聯元素上無效。在 (X)HTML 文件中，替換元素是嵌入式內容，例如影像。

內聯元素的對齊方式由 vertical-align 屬性控制。此屬性的初始值為 baseline。由於 (X)HTML 影像通常是 inline 元素，這意味著影像的底部邊緣與文字的基線對齊。如果行上沒有文字，網路瀏覽器仍然必須計算基線所在的位置，併為其留出適當的空間。這在嘗試對齊影像時會導致問題。

list-item

[編輯 | 編輯原始碼]

list-item 與 block 類似，但它啟用了列表屬性 list-style-type、list-style-image、list-style-position 和 list-style。

none

[編輯 | 編輯原始碼]

當 display 為 none 時，網路瀏覽器必須表現得好像元素及其所有子元素不存在。這無法透過在子元素上設定 display 屬性來覆蓋，因為它們不存在以應用屬性。網路瀏覽器不得在顯示屏上留下任何空間，也不得打印出或說出任何內容，或以其他方式暗示元素的存在。

使用此值隱藏元素與 CSS2.1 媒體型別 結合使用非常有用。例如，您可以指定導航欄從列印頁面中移除，方法是為列印媒體將其 display 值設定為 none。

如果您只想隱藏元素，同時保留可見間隙，請將 CSS2.1 屬性 visibility 設定為 hidden。

inline-block

[編輯 | 編輯原始碼]

inline-block 元素以與 inline 元素相同的方式流動，但它充當其自身子元素的 block 容器。

run-in

[編輯 | 編輯原始碼]

run-in 允許將單個元素合併到緊隨其後的 block 元素的開頭。只有當 run-in 元素不包含任何 block 元素時，它才會被合併。如果 run-in 元素不能被合併，它會像 block 元素一樣起作用。

CSS 規則

h1, h2 {
  display:run-in;
  margin-right:0.5em
}

h1 {
  font-size:120%
}

h2 {
  font-size:100%
}

示例 HTML

    <h1>Main heading</h1>
    <h2>Sub-heading</h2>
    <p>Only the sub-heading is allowed to run into this paragraph.
      The heading can't be merged because only one <code>run-in</code> element is allowed.
    </p>

示例渲染

標題

子標題 只有子標題允許執行到本段。標題不能合併，因為只允許一個 run-in 元素。

與 float 的互動

[編輯 | 編輯原始碼]

如果元素的 float 屬性設定為除 none 之外的任何值，則該元素的行為就像 display 設定為 block 一樣，無論其實際值是什麼。

盒子模型

[編輯 | 編輯原始碼]

CSS 盒子模型是使用 CSS 佈局文件的基礎。每個元素的內容都在一個或多個框中呈現。CSS 框由以下部分組成：

  • 內容區域，
  • 被填充包圍（可選），
  • 被邊框包圍（可選），
  • 被邊距包圍（可選）。

如果框的所有三個可選部分都存在，那麼從一個外部邊距邊緣穿過框到內容，將遇到以下邊界

  • 外部邊距邊緣
  • 外部邊框邊緣 = 內部邊距邊緣
  • 外部填充邊緣 = 內部邊框邊緣
  • 內容邊緣 = 內部填充邊緣

如下面的圖表所示。

這是邊距。

這是邊框。

這是填充。

這是內容區域。

高度和寬度

[編輯 | 編輯原始碼]

width 被非替換內聯元素、表格列和表格列組忽略。

height 被非替換內聯元素、表格行和表格行組忽略。

width 和 height 屬性指定內容區域的尺寸（但請參見下面的怪異模式部分）。這是從填充的一側的內邊緣到另一側的填充的內邊緣的距離。這些值可以作為非負 長度 或百分比給出。如果 width 作為百分比給出，則該值基於包含塊的寬度。如果 height 作為百分比給出，則該值基於包含塊的高度。如果包含塊的高度不是絕對值，則百分比可能無法按預期工作。有關詳細資訊，請參閱 W3C 規範。

通常，在 em 或百分比中給出包含文字的元素的大小。影像和其他替換元素通常以畫素 (px) 為單位進行縮放。

CSS 規則

p {
  width:50%;
  height:3em;
  background:#cfc /* Set a background so the size of the content area is obvious. */
}

示例 HTML

    <p>A short paragraph.</p>
    <p>Another short paragraph.</p>

示例渲染

簡短的段落。

另一個簡短的段落。

注意，文字的左邊緣（內容）與背景的左邊緣（內容區域）相接。

如果內容區域太小，內容將溢位框（除了 Internet Explorer）。

CSS 規則

p {
  width:8em;
  height:3em;
  background:#cfc /* Set a background so the size is of the content area is obvious. */
}

#para2 {
  color:red /* Make the text of the second paragraph stand out. */
}

示例 HTML

    <p>A paragraph that is far too long for the tiny box it is supposed to fit inside.</p>
    <p id="para2">A short paragraph.</p>

示例渲染（此示例在 Internet Explorer 中不起作用）

一個段落，它太長了，無法容納在它應該放入的小盒子裡。

簡短的段落。

CSS2.1 最小和最大寬度和高度

[edit | edit source]

CSS2.1 引入了四個額外的屬性 min-width、max-width、min-height 和 max-height。例如，假設您正在建立一個佈局，頁面上有兩列並排。您希望主內容列的寬度為 27em，但不要超過頁面寬度的 75%。導航欄應該為 9em 或 25%。適當的規則如下

#content {
  width:27em;
  max-width:75%
}

#navigation {
  width:9em;
  max-width:25%
}

min-width 屬性通常與畫素長度一起使用，以確保列不會變得太窄，以至於無法容納其包含的影像。

Internet Explorer 不支援這些 CSS2.1 屬性。

Internet Explorer 怪異模式

[edit | edit source]

Internet Explorer 5.0 和 5.5 版本允許非替換內聯元素使用 width 和 height。如果 Internet Explorer 6 處於 怪異模式，它也會應用這些屬性。在 標準模式 中，它會正確地忽略非替換內聯元素上的這些屬性。

在怪異模式下，width 和 height 錯誤地設定了邊框外邊緣之間的距離，而不是內容區域的邊緣。

CSS 3 盒模型

[edit | edit source]

當前 CSS3 草案引入了新屬性 box-sizing。此屬性採用兩個值之一，content-box 或 border-box。

當該值為 content-box 時，使用正常的 CSS1/CSS2.1 盒模型，因此 width 和 height 定義內容區域的大小。

當該值為 border-box 時，width 和 height 屬性設定邊框外邊緣之間的距離，即框的行為類似於怪異模式框。

Mozilla Firefox 不支援 box-sizing，而是使用 -moz-box-sizing 來實現相同目的。

填充

[edit | edit source]

填充是在元素內容與其邊框之間插入的空白。元素的背景透過填充可見。填充由四個屬性設定

填充可以設定為長度，例如 1em，或百分比，例如 5%。值不能為負。百分比相對於包含塊的寬度，即使對於頂部和底部填充也是如此。

CSS 規則

p {  
  padding-top:1em;
  padding-right:2em;
  padding-bottom:3em;
  padding-left:4em;
  background-color:#fc9;
  width:10em;
  text-align:justify
}

示例 HTML

    <p>This text has padding around it. The orange backgound
      appears behind both the padding and the content.
    </p>

示例渲染

此文本週圍有填充。橙色背景出現在填充和內容的後面。

簡寫屬性

[edit | edit source]

W3C 規範 CSS1 CSS2.1

可以使用 padding 簡寫屬性一次設定所有四邊的填充。這需要一個由空格分隔的值列表。第一個值是頂部填充。其他值按順時針方向圍繞邊框，因此右側是第二個，底部是第三個，左側是最後一個。前面的例子可以簡化為

p {
  padding:1em 2em 3em 4em;
  background-color:#fc9;
  width:10em;
  text-align:justify
}

您可以在 padding 的列表中指定少於四個值。如果左側填充的值缺失，它將設定為等於右側填充。如果底部填充的值缺失，它將設定為等於頂部填充。如果只給出頂部填充，則所有邊框將獲得相同的填充。

p {
  padding:1em 2em 3em 4em; /* top = 1em, right = 2em, bottom = 3em, left = 4em */
}

p {
  padding:1em 2em 3em; /* top = 1em, right = 2em, bottom = 3em, left = right = 2em */
}

p {
  padding:1em 2em; /* top = 1em, right = 2em, bottom = top = 1em, left = right = 2em */
}

p {
  padding:1em; /* top = 1em, right = top = 1em, bottom = top = 1em, left = top = 1em */
}

padding 始終設定所有四邊的填充。如果只想更改某些邊的填充，則必須使用單個屬性。

p {
  padding:0.5em
}

p.narrow {
  padding-left:1.5em;
  padding-right:1.5em
}

邊距

[edit | edit source]

邊距是 CSS 盒模型中最外層，位於邊框之外。

允許設定邊距寬度的 CSS 屬性

簡寫屬性

[edit | edit source]

W3C 規範 CSS1 CSS2.1

盒陰影

[edit | edit source]

盒陰影是 CSS3 的一部分。它建立了一個 陰影，它遵循框的形狀。它目前受 WebKit 和 Gecko 支援。盒陰影採用 4 個引數，並支援多個陰影。

CSS3 WebKit Gecko
box-shadow -webkit-box-shadow -moz-box-shadow
  • box-shadow: X-offset Y-offset blur/diffusion color;


此框應在右下方有一個清晰的矩形陰影。

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
}



此框應在右下方有一個清晰的圓形陰影。

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



此框應在左上方有一個紅色的擴散圓形陰影。

div {
	border: 1px solid;
	box-shadow: -10px -10px 5px red;
	-webkit-box-shadow: -10px -10px 5px red;
	-moz-box-shadow: -10px -10px 5px red;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



此框應在右下方有一個紅色、綠色和藍色的擴散圓形陰影。

div {
	border: 1px solid;
	box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-webkit-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-moz-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



盒尺寸

[edit | edit source]

Box-sizing 是一個 CSS3 屬性，用於簡化某些佈局。Box-sizing 受 WebKit、Gecko 和 Presto 支援。

box-sizing 採用 1 個引數，可以是以下任何一個

  • content-box
    內部的盒子按正常方式排列。
  • border-box
    內部的盒子圍繞邊框排列。
  • inherit
    繼承父級行為。
W3C WebKit Gecko
box-sizing -webkit-box-sizing -moz-box-sizing

CSS 片段

div.bigbox {
	width: 40em;
	border: 1em solid red;
	min-height: 5em;
}

div.littlebox {
	width: 50%;
	border: 1em solid;
	box-sizing: border-box; /* this will set the boxes to flow along the border of the containing box */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	float: left;
}

HTML 片段

<div class="bigbox">
	<div class="littlebox" style="border-color: green;">This should be on the left.</div>
	<div class="littlebox" style="border-color: blue;">This should be on the right.</div>
</div>


這應該在左邊。
這應該在右邊。

如果您的瀏覽器支援 box-sizing，這兩個盒子應該並排位於此文字上方。

檢索自 "https://wikibook.tw/w/index.php?title=Cascading_Style_Sheets/Box_Model&oldid=3821315"
華夏公益教科書