# CSS display 屬性
## 實例
使段落生出行內框:
```
p.inline
{
display:inline;
}
```
## 瀏覽器支持
| IE | Firefox | Chrome | Safari | Opera |
| --- | --- | --- | --- | --- |
所有主流瀏覽器都支持 display 屬性。
注釋:如果規定了 !DOCTYPE,則 Internet Explorer 8 (以及更高版本)支持屬性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
## 定義和用法
display 屬性規定元素應該生成的框的類型。
### 說明
這個屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型,如果使用 display 不謹慎會很危險,因為可能違反 HTML 中已經定義的顯示層次結構。對于 XML,由于 XML 沒有內置的這種層次結構,所有 display 是絕對必要的。
注釋:CSS2 中有值 compact 和 marker,不過由于缺乏廣泛的支持,已經從 CSS2.1 中去除了。
| 默認值: | inline |
| --- | --- |
| 繼承性: | no |
| --- | --- |
| 版本: | CSS1 |
| --- | --- |
| JavaScript 語法: | _object_.style.display="inline" |
| --- | --- |
### 可能的值
| 值 | 描述 |
| --- | --- |
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素,此元素前后會帶有換行符。 |
| inline | 默認。此元素會被顯示為內聯元素,元素前后沒有換行符。 |
| inline-block | 行內塊元素。(CSS2.1 新增的值) |
| list-item | 此元素會作為列表顯示。 |
| run-in | 此元素會根據上下文作為塊級元素或內聯元素顯示。 |
| compact | CSS 中有值 compact,不過由于缺乏廣泛支持,已經從 CSS2.1 中刪除。 |
| marker | CSS 中有值 marker,不過由于缺乏廣泛支持,已經從 CSS2.1 中刪除。 |
| table | 此元素會作為塊級表格來顯示(類似 <table>),表格前后帶有換行符。 |
| inline-table | 此元素會作為內聯表格來顯示(類似 <table>),表格前后沒有換行符。 |
| table-row-group | 此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。 |
| table-header-group | 此元素會作為一個或多個行的分組來顯示(類似 <thead>)。 |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。 |
| table-row | 此元素會作為一個表格行顯示(類似 <tr>)。 |
| table-column-group | 此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。 |
| table-column | 此元素會作為一個單元格列顯示(類似 <col>) |
| table-cell | 此元素會作為一個表格單元格顯示(類似 <td> 和 <th>) |
| table-caption | 此元素會作為一個表格標題顯示(類似 <caption>) |
| inherit | 規定應該從父元素繼承 display 屬性的值。 |
## TIY 實例
[如何把元素顯示為內聯元素](/tiy/t.asp?f=csse_display)
本例演示如何把元素顯示為內聯元素。
```
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>本例中的樣式表把段落元素設置為內聯元素。</p>
<p>而 div 元素不會顯示出來!</p>
<div>div 元素的內容不會顯示出來!</div>
</body>
</html>
```
[如何把元素顯示為塊級元素](/tiy/t.asp?f=csse_display_block)
本例演示如何把元素顯示為塊級元素。
```
<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>
<span>本例中的樣式表把 span 元素設置為塊級元素。</span>
<span>兩個 span 元素之間產生了一個換行行為。</span>
</body>
</html>
```
## 相關頁面
CSS 教程:[CSS 定位](/css/css_positioning.asp "CSS 定位 (Positioning)")
HTML DOM 參考手冊:[display 屬性](/jsref/prop_style_display.asp "HTML DOM display 屬性")
- CSS3 動畫屬性(Animation)
- CSS3 @keyframes 規則
- CSS3 animation 屬性
- CSS3 animation-name 屬性
- CSS3 animation-duration 屬性
- CSS3 animation-timing-function 屬性
- CSS3 animation-delay 屬性
- CSS3 animation-iteration-count 屬性
- CSS3 animation-direction 屬性
- CSS3 animation-play-state 屬性
- CSS3 animation-fill-mode 屬性
- CSS 背景屬性(Background)
- CSS background 屬性
- CSS background-attachment 屬性
- CSS background-color 屬性
- CSS background-image 屬性
- CSS background-position 屬性
- CSS background-repeat 屬性
- CSS3 background-clip 屬性
- CSS3 background-origin 屬性
- CSS3 background-size 屬性
- CSS 邊框屬性(Border 和 Outline)
- CSS border 屬性
- CSS border-bottom 屬性
- CSS border-bottom-color 屬性
- CSS border-bottom-style 屬性
- CSS border-bottom-width 屬性
- CSS border-color 屬性
- CSS border-left 屬性
- CSS border-left-color 屬性
- CSS border-left-style 屬性
- CSS border-left-width 屬性
- CSS border-right 屬性
- CSS border-right-color 屬性
- CSS border-right-style 屬性
- CSS border-right-width 屬性
- CSS border-style 屬性
- CSS border-top 屬性
- CSS border-top-color 屬性
- CSS border-top-style 屬性
- CSS border-top-width 屬性
- CSS border-width 屬性
- CSS outline 屬性
- CSS outline-color 屬性
- CSS outline-style 屬性
- CSS outline-width 屬性
- CSS3 border-bottom-left-radius 屬性
- CSS3 border-bottom-right-radius 屬性
- CSS3 border-image 屬性
- CSS3 border-image-outset 屬性
- CSS3 border-image-repeat 屬性
- CSS3 border-image-slice 屬性
- CSS3 border-image-source 屬性
- CSS3 border-image-width 屬性
- CSS3 border-radius 屬性
- CSS3 border-top-left-radius 屬性
- CSS3 border-top-right-radius 屬性
- CSS3 box-shadow 屬性
- Box 屬性
- CSS3 overflow-x 屬性
- CSS3 overflow-y 屬性
- CSS3 overflow-style 屬性
- CSS3 rotation 屬性
- CSS3 rotation-point 屬性
- Color 屬性
- CSS3 opacity 屬性
- Content for Paged Media 屬性
- CSS 尺寸屬性(Dimension)
- CSS height 屬性
- CSS max-height 屬性
- CSS max-width 屬性
- CSS min-height 屬性
- CSS min-width 屬性
- CSS width 屬性
- 可伸縮框屬性(Flexible Box)
- CSS3 box-align 屬性
- CSS3 box-direction 屬性
- CSS3 box-flex 屬性
- CSS3 box-flex-group 屬性
- CSS3 box-lines 屬性
- CSS3 box-ordinal-group 屬性
- CSS3 box-orient 屬性
- CSS3 box-pack 屬性
- CSS 字體屬性(Font)
- CSS font 屬性
- CSS font-family 屬性
- CSS font-size 屬性
- CSS font-size-adjust 屬性
- CSS font-stretch 屬性
- CSS font-style 屬性
- CSS font-variant 屬性
- CSS font-weight 屬性
- 內容生成(Generated Content)
- CSS content 屬性
- CSS counter-increment 屬性
- CSS counter-reset 屬性
- CSS quotes 屬性
- Grid 屬性
- CSS3 grid-columns 屬性
- CSS3 grid-rows 屬性
- Hyperlink 屬性
- CSS3 target 屬性
- CSS3 target-name 屬性
- CSS3 target-new 屬性
- CSS3 target-position 屬性
- CSS 列表屬性(List)
- CSS list-style 屬性
- CSS list-style-image 屬性
- CSS list-style-position 屬性
- CSS list-style-type 屬性
- CSS 外邊距屬性(Margin)
- CSS margin 屬性
- CSS margin-bottom 屬性
- CSS margin-left 屬性
- CSS margin-right 屬性
- CSS margin-top 屬性
- Marquee 屬性
- 多列屬性(Multi-column)
- CSS3 column-count 屬性
- CSS3 column-fill 屬性
- CSS3 column-gap 屬性
- CSS3 column-rule 屬性
- CSS3 column-rule-color 屬性
- CSS3 column-rule-style 屬性
- CSS3 column-rule-width 屬性
- CSS3 column-span 屬性
- CSS3 column-width 屬性
- CSS3 columns 屬性
- CSS 內邊距屬性(Padding)
- CSS padding 屬性
- CSS padding-bottom 屬性
- CSS padding-left 屬性
- CSS padding-right 屬性
- CSS padding-top 屬性
- Paged Media 屬性
- CSS 定位屬性(Positioning)
- CSS bottom 屬性
- CSS clear 屬性
- CSS clip 屬性
- CSS cursor 屬性
- CSS display 屬性
- CSS float 屬性
- CSS left 屬性
- CSS overflow 屬性
- CSS position 屬性
- CSS right 屬性
- CSS top 屬性
- CSS vertical-align 屬性
- CSS visibility 屬性
- CSS z-index 屬性
- CSS 打印屬性(Print)
- CSS page-break-after 屬性
- CSS page-break-before 屬性
- CSS page-break-inside 屬性
- CSS 表格屬性(Table)
- CSS border-collapse 屬性
- CSS border-spacing 屬性
- CSS caption-side 屬性
- CSS empty-cells 屬性
- CSS table-layout 屬性
- CSS 文本屬性(Text)
- CSS color 屬性
- CSS direction 屬性
- CSS letter-spacing 屬性
- CSS line-height 屬性
- CSS text-align 屬性
- CSS text-decoration 屬性
- CSS text-indent 屬性
- CSS text-transform 屬性
- CSS unicode-bidi 屬性
- CSS white-space 屬性
- CSS word-spacing 屬性
- CSS3 hanging-punctuation 屬性
- CSS3 punctuation-trim 屬性
- CSS3 text-emphasis 屬性
- CSS3 text-justify 屬性
- CSS3 text-outline 屬性
- CSS3 text-overflow 屬性
- CSS3 text-shadow 屬性
- CSS3 text-wrap 屬性
- CSS3 word-break 屬性
- CSS3 word-wrap 屬性
- 2D/3D 轉換屬性(Transform)
- CSS3 transform 屬性
- CSS3 transform-origin 屬性
- CSS3 transform-style 屬性
- CSS3 perspective 屬性
- CSS3 perspective-origin 屬性
- CSS3 backface-visibility 屬性
- 過渡屬性(Transition)
- CSS3 transition 屬性
- CSS3 transition-property 屬性
- CSS3 transition-duration 屬性
- CSS3 transition-timing-function 屬性
- CSS3 transition-delay 屬性
- 用戶界面屬性(User-interface)
- CSS3 appearance 屬性
- CSS3 box-sizing 屬性
- CSS3 icon 屬性
- CSS3 nav-down 屬性
- CSS3 nav-index 屬性
- CSS3 nav-left 屬性
- CSS3 nav-right 屬性
- CSS3 nav-up 屬性
- CSS3 outline-offset 屬性
- CSS3 resize 屬性
- CSS 選擇器參考手冊
- CSS 聽覺參考手冊
- CSS 網絡安全字體組合
- CSS 單位
- CSS 顏色
- CSS 合法顏色值
- CSS 顏色名
- CSS 顏色十六進制值
- 免責聲明