跳轉到內容

層疊樣式表/盒模型

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

塊級元素和內聯元素 - 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。此屬性應為文件中可能出現的 all 元素型別顯式設定，以確保不同實現之間的一致性。大多數網頁瀏覽器將為 (X)HTML 文件中的元素設定適當的值。(有關建議值的說明，請參閱 CSS 2.1 規範的附錄 D。)在 XML 文件中，使用以下規則

* {
  display: block
}

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

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 元素。如果 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 最小和最大寬度和高度

[編輯 | 編輯原始碼]

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 怪異模式

[編輯 | 編輯原始碼]

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

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

CSS 3 盒模型

[編輯 | 編輯原始碼]

當前 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 來達到相同目的。

填充

[編輯 | 編輯原始碼]

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

填充可以設定為長度，例如 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>

示例渲染

這段文字周圍有填充。橙色背景出現在填充和內容的後面。

簡寫屬性

[編輯 | 編輯原始碼]

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
}

邊距

[編輯 | 編輯原始碼]

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

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

簡寫屬性

[編輯 | 編輯原始碼]

W3C 規範 CSS1 CSS2.1

盒子陰影

[編輯 | 編輯原始碼]

盒子陰影是 CSS3 的一部分。它會建立一個 投影，該投影會跟隨盒子的形狀。目前，它受到 WebKit 和 Gecko 的支援。盒子陰影需要 4 個引數，並支援多個陰影。

CSS3 WebKit Gecko
box-shadow -webkit-box-shadow -moz-box-shadow
  • box-shadow: X 偏移量 Y 偏移量 模糊/擴散 顏色;


此盒子應該在右下方有一個銳利的矩形陰影。

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;
}



盒子大小

[編輯 | 編輯原始碼]

盒子大小 是一個 CSS3 屬性，用於簡化某些佈局。盒子大小受到 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"
華夏公益教科書