display · CSS基礎

## display 屬性 ### 屬性定義及使用說明 display 屬性規定元素應該生成的框的類型。 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 | 此元素會作為塊級表格來顯示（類似），表格前后帶有換行符。 | | inline-table | 此元素會作為內聯表格來顯示（類似），表格前后沒有換行符。 | | table-row-group | 此元素會作為一個或多個行的分組來顯示（類似）。 | | table-header-group | 此元素會作為一個或多個行的分組來顯示（類似）。 | | table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似）。 | | table-row | 此元素會作為一個表格行顯示（類似）。 | | table-column-group | 此元素會作為一個或多個列的分組來顯示（類似）。 | | table-column | 此元素會作為一個單元格列顯示（類似） | | table-cell | 此元素會作為一個表格單元格顯示（類似和） | | table-caption | 此元素會作為一個表格標題顯示（類似） | | inherit | 規定應該從父元素繼承 display 屬性的值。 | * * * ## 實例--設置段落生成一個行內框： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> p {display:inline} </style> </head> <body> <p>These two paragraphs generates inline boxes, and it results in</p> <p>no distance between the two elements.</p> </body> </html> ```