css display <p> 默認block
阿新 • • 發佈:2017-05-27
應該 列表 hid 單元格 display 塊和內聯 支持 就會 table
隱藏元素 - display:none或visibility:hidden
隱藏一個元素可以通過把display屬性設置為"none",或把visibility屬性設置為"hidden"。但是請註意,這兩種方法會產生不同的結果。
visibility:hidden可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。
CSS Display - 塊和內聯元素
塊元素是一個元素,占用了全部寬度,在前後都是換行符。
塊元素的例子:
- <h1>
- <p>
- <div>
內聯元素只需要必要的寬度,不強制換行。
內聯元素的例子:
- <span>
- <a>
自動換行是因為display為block,改為inline就不會自動換行了,如果還是會換行,加上float屬性就會自動根據有沒有位置來放到一行裏面
<p style="display: inline;">換行</p>
<p style="display: inline;">換行</p>
換行
換行
塊元素才有width和height屬性,inline元素沒有,若想有width和height屬性,應用inline-block
值 描述 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 屬性的值。display屬性值
css display <p> 默認block